常用的三个事件修饰符
prevent:阻止默认事件发生
![](https://i-blog.csdnimg.cn/blog_migrate/b8cbb97f72cf52a9a30dce64d65885e6.png)
![](https://i-blog.csdnimg.cn/blog_migrate/385d721e32e01517735698bc64319b20.png)
在代码中加入这一行后,会阻止默认事件的发生(不发生页面跳转),执行showinfo()
stop:阻止冒泡发生
<div v-on:click="showinfo" style="background-color: bisque; width: 100px;height: 100px;">
<button v-on:click="showinfo">点击我显示更多</button>
</div>
</div>
![](https://i-blog.csdnimg.cn/blog_migrate/29ee7f4cf5e14a5bd4ae394ca7008c9c.png)
当点击按钮时,弹窗会弹出两次,
先弹出因为按钮点击引起的事件,再弹出因点击到了盒子所触发的事件,这就是冒泡。
当stop加到盒子事件的时候,这种情况会消失。
once事件只触发一次
<button v-on:click.once="showinfo1">点击我显示更多</button>
点击按钮后,弹窗只会弹出一次。
常用的键盘事件
Vue中常用的按键别名
回车=》enter
删除=》delete(捕获删除和退格键)
退出=》esc
空格=》space
换行=》tab(必须搭配keydown使用,搭配Keyup会倒致切换焦点,事件无法执行。)
上=》up
下=》down
左=》left
右=》right
Vue里面常用@keyup或者@keydown来绑定按键事件
<body>
<div id="demo">
<h3>欢迎来学习{{name}}</h3>
<input type="text" placeholder="按下回车出现提示" @keyup.enter="showinfo">
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
var vm=new Vue({
el:'#demo',
data:{
name:'Vue'
},
methods:{
showinfo(e){
console.log(e.target.value);
}
}
})
</script>
</body>
根据Vue提供的9个按键可以实现我们想要的功能
2.但是现在如果我们想要使用未给我们提供的按键,又该如何呢?
键盘上每一个键都有名字和编码
比如回车 名字(Key)时Enter,编码(KeyCode)是13
因此我们可以使用键的原始Key值(即名字)去绑定相应的按键,但名字是两个字母的要要分别小写且要以下划线分割开来。
例如切换大小写的按键caps-lock的形式才可以
3.特殊的系统修饰键 ctrl,alt,shift,meta键
配合keyup需要在按下修饰键的基础上,按下其他键才会生效
配合keydown正常使用。