Vue学习笔记(四):事件处理
1 v-on¶
Vue中,绑定点击事件用v-on:
实现,例如绑定鼠标点击事件用v-on:click="fun"
实现,绑定键盘回车键按下事件用v-on:keydown.enter="fun"
实现,其中“fun”是点击事后后的回调方法。v-on:
可以简写为“@”,例如@click="fun"
、@keyup.enter="fun"
。
2 鼠标事件¶
绑定鼠标点击事件通过v-on:click
实现,例如给按钮添加一个点击事件,点击后执行名为“fun1”的方法:
<div id="app">
<button v-on:click="fun1">按钮</button>
<!-- <button @click="fun1">按钮</button> -->
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#app',
methods:{
fun1(event){
console.log(event)
alert('按钮被点击')
},
}
})
</script>
在上述示例中,我们给button绑定了fun1作为回调方法,那么,fun1方法接受了一个参数event,这个参数就是点击事件本身,通过这个参数可以获取一些环境变量,例如按钮信息等。这时候因为点击事件回调时除默认的event外并没有传递其他参数,所以,可以以v-on:click="fun"
的方式绑定事件。但是,如果还有其他参数情况下,就不能这样书写。例如,我们希望回调时,传递两个个额外的数值给fun1,那么,可以做么做:
<div id="app">
<button @click="fun1(1, $event, 66)">按钮</button> <!-- 这里的event前面必须有个$符号 -->
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
num = 123
const vm = new Vue({
el:'#app',
methods:{ // 此处定义回调函数
fun1(a, event, b){
console.log(a)
console.log(event)
console.log(b)
},
}
})
</script>
为了区别于其他参数,event前面必须有个“\$”符号,“$event”的位置可以随意,可以使第一个参数位置,也可以是第二个参数位置。回调方法调用处的参数顺序、个数必须与定义处一致。
另外需要注意,在事件回调方法内部,如果使用this关键字,this指代的是Vue实例对象。
3 事件修饰符¶
3.1 阻止默认事件:prevent¶
在上面例子中,我们将鼠标点击事件绑定在button上,但在一些应用场景中我们需要对其他类型标签绑定鼠标事件,例如a标签,这时候,由于标签本身存在默认事件,点击执行回调后,标签本身的默认事件也会发生,为了阻止默认事件发生,我们可以使用“prevent”对默认事件进行阻止。具体操作是在绑定点击事件时,将“@click”改为“@click.prevent”,如下所示:
<div id="app">
<a href="https://home.cnblogs.com/u/chenhuabin/" @click.prevent="fun1">我是一个a标签</a>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#app',
methods:{ // 此处定义回调函数
fun1(){
console.log('Hello Vue! ')
},
}
})
</script>
通过这一方法,点击a标签后,页面并不会跳转,从控制台输出也可以看出,回调函数成功执行。
3.2 阻止事件冒泡:stop¶
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。例如,下面的代码,点击按钮后,会触发两次弹窗:
<div id="app">
<div @click="fun1">
<button @click="fun1">按钮</button>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#app',
methods:{ // 此处定义回调函数
fun1(){
alert('Hello Vue! ')
},
}
})
</script>
在Vue中,阻止事件冒泡方法很简单,只需要在绑定事件时,将“@click”改为“@clilck.stop”即可,上面示例改为:
<div id="app">
<div @click="fun1">
<button @click.stop="fun1">按钮</button>
</div>
</div>
多个事件修饰符可以连续使用,例如同时使用prevent和stop:
<div @click.prevent="fun1">
<a href="https://www.baidu.com" @click.prevent.stop="fun1">按钮</a> <!-- 这里同时使用prevent和stop -->
</div>
3.3 事件只允许触发一次:once¶
有时候,我们只需要事件被触发一次,即触发一次后,再次触发,将不会执行回调方法。这种功能可以通过“once”实现。
<div id="app">
<button @click.once="fun1">按钮</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el:'#app',
methods:{ // 此处定义回调函数
fun1(){
alert('Hello Vue! ')
},
}
})
</script>
在上述代码示例中,只有第一次点击按钮会出现弹窗,后续点击不再有弹窗出现。
4 键盘事件¶
键盘事件是指我们对键盘进行操作时触发的事件,在Vue中,使用“keydown”和“keyup”绑定,分别对应按下键盘和松开键盘,一般使用“keyup”居多(tab键需使用keydown,否则将由于按下tab后焦点转移导致keyup不触发)。在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:如下所示,我们定义一个输入框,完成输入后,按下“Enter”键,在控制台输出输入框内容:
<div id="app">
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#app',
methods: {
showInfo(e){
console.log(e.target.value)
}
},
})
</script>
上述示例中,我们通过“.enter”绑定回车按键事件,除回车外,Vue中对绝大多数常见按键定义了此类别名,方便调用:
- enter
- tab
- delete (捕获“删除”和“退格”键)
- esc
- space
- up
- down
- left
- right
以下是个按键使用是需要注意,因为这4个按键同安作为系统修饰键配合其他按键进行组合使用,所以多事情况下建议不要使用keydown,而是使用keyup:
- ctrl
- alt
- shift
- meta
例如绑定“ctrl+y”事件时,可以这么写:
<div id="app">
<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo">
</div>
![](https://files.cnblogs.com/files/chenhuabin/wechat.gif)
作者:奥辰
微信号:chb1137796095
Github:https://github.com/ChenHuabin321
欢迎加V交流,共同学习,共同进步!
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。