Vue自学之路9-vue模版语法（事件修饰符&按键修饰符)

 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

微信公众号：测试生财（定期分享独家内容和资源）