1) .stop 阻止冒泡<input type='button' @click.stop='handle1()'/>VUE方式阻止冒泡</input>2) .prevent 阻止默认行为<a href="https://blog.csdn.net/ccgshigao?spm=1010.2135.3001.5343" v-on:click.prevent="handle2()"></a>Vue中的按键修饰符
1) .enter 回车键<input @keyup.enter='submit'/>2) .delete 删除键<input @keyup.delete='handle'/>
- .stop 阻止事件继续传播
- .prevent 阻止标签默认行为
- .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
- .self 只当在 event.target 是当前元素自身时触发处理函数
- .once 事件将只会触发一次
- .passive 告诉浏览器你不想阻止事件的默认行为
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right
在config.keyCodes对象中设置
Vue.config.keyCodes.f1 = 112
事件修饰符的例子<div id='app'> <form> <div> <!--敲击delete键，调用handleContent，清空用户名--> <input type='text' @keyup.delete='handleContent' v-module='uname' /> </div> <div> <!--敲击回车键，当放开的时候，会调用handleSubmit--> <input type='text' @keyup.enter='handleSubmit' v-module='p���۲���,�ᶨ����wd' /> </div> <div> <input type='button' @click='handleSubmit' value='提交' /> </div> </form> <div v-on:click='handle0'> <input type='button' @click='handle1()'/>传统方式阻止冒泡</input> </div> <!-- 可以预定义别名 --> <input type='text' @keyup.aaa='handleKeyCode' /> <!-- 直接使用KeyCode的值 --> <input type='text' @keyup.65='handleKeyCode' /> <div v-on:click='handle0'> <!-- .stop阻止冒泡 --> <input type='button' @click.stop='handle2()'/>VUE方式阻止冒泡</input> </div> <a href="https://blog.csdn.net/ccgshigao?spm=1010.2135.3001.5343" v-on:click="handle3()"></a> <!-- .prevent阻止默认行为 --> <a href="https://blog.csdn.net/ccgshigao?spm=1010.2135.3001.5343" v-on:click.prevent="handle2()"></a> <div>{{ num }}</div></div><!-- 先下载vue.js --><script type='text/javascript' src='js/vue.js'></script><script>//1. html中书写标签//2. 引入vue.js//3. 使用vue进行数据渲染。//自定义按键修饰符Vue.config.keyCodes.aaa = 65;var vm = new Vue( { el: '#app', //绑定到id选择器 data: { "uname": "", "pwd" : "", "num" : 0, },methods: { //空参数，默认第一个参数传递event handle0: function(event){ num++; }, handle1: function(event) { event.stopPropation(); }， handle2: function(event) { //do nothing; }, handle3: function(event) { event.preventDefault(); }, handleKeyCode:function(event) { console.log(event.keyCode); }, handleSubmit: function(event){ console.log(this.uname+":"+this.pwd); }, handleContent: function(event){ this.uname = ""; } } })</script>博主：测试生财（一个不为996而996的测开码农）
座右铭：专注测试开发与自动化运维，努力读书思考写作，为内卷的人生奠定财务自由。
内容范畴：技术提升，职场杂谈，事业发展，阅读写作，投资理财，健康人生。
csdn：https://blog.csdn.net/ccgshigao
博客园：https://www.cnblogs.com/qa-freeroad/
51cto：https://blog.51cto.com/14900374
微信公众号：测试生财（定期分享独家内容和资源）