Vue的事件处理
一、事件的基本使用
Vue中使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名,事件的回调需要配置在methods对象中,methods中配置的函数,不要用箭头函数,否则this就不是指向Vue实例,而是指向window,@click=“xxx” 和 @click=“xxx($event)” 效果一致,但后者可以传参。
模板和Vue实例
<body>
<div id="root">
<button v-on:click="showInfo">点击跳出弹窗(v-on)</button>
<button @click="showInfo">点击跳出弹窗(@简写)</button>
</div>
</body>
<script>
new Vue({
el:'#root',
methods: {
showInfo(){
alert('showInfo函数被执行了')
}
},
})
</script>
二、Vue的事件修饰符
1.prevent:阻止默认事件(常用)
2.stop:阻止事件冒泡(常用)
3.once:事件只触发一次(常用)
4.capture:使用事件的捕获模式
5.self:只有event.target是当前操作的元素时才触发事件
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕
模板和Vue实例
<body>
<div id="root">
<button v-on:click="showInfo.once">点击跳出弹窗(v-on)</button>
<button v-on:click="showInfo">点击跳出弹窗(@简写)</button>
</div>
</body>
<script>
new Vue({
el:'#root',
methods: {
showInfo(){
alert('showInfo函数被执行了')
}
},
})
</script>
第一个button按钮使用了once修饰符,所以只有第一次点击,才会跳出弹窗,之后点击不会再跳出弹窗。第二个button按钮没有once修饰符,点击总是会跳出弹窗。
三、Vue的键盘修饰符
Vue中常用的按键别名
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊,必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
模板和Vue实例
<body>
<div id="root">
<input type="text" v-bind:value="value" @keydown.enter="showInfo">
<br>
<span>{{value}}</span>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
value:'123456'
},
methods:{
showInfo(e){
this.value=e.target.value
}
}
})
</script>
如果对keydown事件不添加enter修饰符,input框内的值发生变化,span标签的值也会随之发生变化。但对keydown事件添加enter修饰符之后,input框内的值发生变化,span标签的值不会随之变化,只有按下回车键之后,span标签的值才会发生变化。