Vue中的事件修饰符
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='pwd' />
</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>
传送门:2021最新测试资料&大厂职位
博主:测试生财(一个不为996而996的测开码农)
座右铭:专注测试开发与自动化运维,努力读书思考写作,为内卷的人生奠定财务自由。
内容范畴:技术提升,职场杂谈,事业发展,阅读写作,投资理财,健康人生。
csdn:https://blog.csdn.net/ccgshigao
博客园:https://www.cnblogs.com/qa-freeroad/
51cto:https://blog.51cto.com/14900374
微信公众号:测试生财(定期分享独家内容和资源)