-
事件绑定有两种写法
v-on:事件 来对事件进行绑定
<div v-on:click="change">{{msg}}</div>//change是方法,方法的括号可写可不写
也可用 @事件 来进行绑定
<div @click="fn3"> {{msg3}}</div>//fn3是方法 -
once 只能点击一次
<button @click.once="change">只能点击一次</button> -
self 只有点击自己的时候才会触发，其他的事件冒泡会越过他，但他也不会阻止冒泡
<body>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
</style>
<div id="app">
<!-- v-on:事件 来对事件进行绑定 方法的括号可写可不写-->
<div v-on:click="change">{{msg}}</div>
<!-- 也可用 @事件 来进行绑定 -->
<div @click="fn1" style="width: 200px;height: 200px;background-color: aqua;">{{msg1}}
<!-- self 只有点击自己的时候才会触发，其他的事件冒泡会越过他，他也不会阻止冒泡 -->
<div @click.self="fn2" style="width: 150px;height: 150px;background-color: blueviolet;">{{msg2}}
<div @click="fn3" style="background-color:greenyellow"> {{msg3}}</div>
</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
msg: "点击打印",
msg1: "打印1",
msg2: "打印2",
msg3: "打印3",
},
// methods板块专门写函数
methods: {
change() {
console.log(77777);
},
fn1() {
console.log(1111);
},
fn2() {
console.log(2222);
},
fn3() {
console.log(3333);
},
},
})
</script>
</body>
- stop阻止冒泡
<body>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
</style>
<div id="app">
<!-- v-on:事件 来对事件进行绑定 方法的括号可写可不写-->
<div v-on:click="change">{{msg}}</div>
<!-- 也可用 @事件 来进行绑定 -->
<div @click="fn1" style="width: 200px;height: 200px;background-color: aqua;">{{msg1}}
<!-- stop 阻止冒泡 -->
<div @click.stop="fn2" style="width: 150px;height: 150px;background-color: blueviolet;">{{msg2}}
<div @click="fn3" style="background-color:greenyellow"> {{msg3}}</div>
</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
msg: "点击打印",
msg1: "打印1",
msg2: "打印2",
msg3: "打印3",
},
// methods板块专门写函数
methods: {
change() {
console.log(77777);
},
fn1() {
console.log(1111);
},
fn2() {
console.log(2222);
},
fn3() {
console.log(3333);
},
},
})
</script>
</body>
