本文详细介绍了Vue.js中的事件处理机制，包括如何使用v-on或@进行事件绑定，强调methods中函数的this指向及事件参数传递。同时，文章探讨了事件修饰符的用法，如prevent、stop、once、capture、self和passive，通过实例展示了它们在阻止默认行为、阻止冒泡、一次性触发和优化性能等方面的应用。
1.事件处理
<!--事件的基本使用：
1、使用v-on:XXX或@XXX 事件绑定，XXX为事件名
2、事件的回调需要配置对象在methods对象中，最终会在vm上
3、methods中的配置的函数，不要用箭头函数！否则this就是vm了
4、method中的配置函数，都是被Vue所管理的函数，this的指向vm
或组件实例对象
5、@click="demo"和@click="demo($event)",效果一致，但前者可以
传参； -->
<div id="root">
<h1>hello{{name}}</h1>
<button v-on:click="showInfor1">点我提示信息2</button>
<button @click="showInfor2($event,66)">点我提示信息2</button>
</div>
<script>
Vue.config.productionTip = false;//阻止Vue在使用时生成提示
new Vue({
el: "#root",
data: {
name: "pizza"
},
methods: {
showInfor1() {
alert("ok")
},
showInfor2(event, number) {
// console.log(event.target.innerText)//点我提示
信息2
// console.log(this)//this指的是vm
alert("ok")
}
}
})
</script>
2.事件修饰
<body>
<!--Vue中的事件修饰符：
1、prevent：阻止默认(常见)
2、stop：阻止事件冒泡(常用)，在嵌套中从内向外执行
3、once：事件只触发一次(常用)//比如弹出,执行一次以后再也不会执
行了
4、capture:使用事件的捕获,在嵌套中从外向内执行
5、self：只有event.target是当前操作的元素时才触发事件
6、passive:事件的默认行为立即执行，无需等待事件回调执行完毕
修饰符在多层嵌套中可以结合使用如：@click.prevent.stop-->
<div id="root">
<h2>欢迎到来{{name}}</h2>
<a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
<!--
prevent：阻止默认(常见) 只会执行showInfo()，不会跳转<a>
-->
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点我提示信息</button>
<!--
stop：阻止事件冒泡(常用)，在嵌套中从内向外执行
-->
</div>
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<div class="demo1" @click.self="showInfo2">
<button @click="showInfo2">点我提示信息</button>
<!--
self：只有event.target是当前操作的元素时才触发事件
-->
</div>
<ul class="list" @wheel.passive="demo">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
name: "pizza"
},
methods: {
showInfo(e) {
//e.stopPropagation()api阻止事件冒泡
alert("同学你好")
},
showMsg(w) {
console.log(w)//先输出1再输出2
},
showInfo2(e) {
console.log(e.target)
},
demo() {
//其实就是事件先执行(wheel)先滚动滚轮在处理执行函数
for循环
//wheel.passive==srcoll
for(let i=0;i<100000;i++){
console.log("@")
}
}
}
})
</script>
</body>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
