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

微信公众号:测试生财(定期分享独家内容和资源)

 

 

 

 

 

posted @ 2021-04-16 07:45  公众号-测试生财  阅读(82)  评论(0编辑  收藏  举报