VUE的事件修饰符

Posted shenja

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE的事件修饰符相关的知识,希望对你有一定的参考价值。

<div id="ON" v-on:click="handle0">
        <p v-text="num"></p>
        @*v-on:click.stop="handle" 事件修饰符,在事件后面加.stop表示不再冒泡*@
        <input id="Button1" v-on:click.stop="handle" type="button" value="点击" />
        @*.prevent阻止事件默认行为 事件修饰符可以串联使用*@
        <a href="http://www.baidu.com" v-on:click.prevent.stop="handle2">百度</a>
    </div>
var ms = new Vue({
        el: "#ON",
        data: {
            num:0
        },
        methods: {
            handle0: function () {
                this.num++;
            },
            handle: function (event) {
                //阻止冒泡 传统方式
                //event.stopPropagation();
            },
            handle2: function (event) {
                //阻止默认行为
                //event.preventDefault();
            }
        }

    })

主要的内容还是请看代码部分,对比了原生js的事件修饰符,以及VUE事件修饰符的展示

以下是所有的事件修饰符

  • .stop - 调用 event.stopPropagation()
  • .prevent - 调用 event.preventDefault()
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。
  • .left - (2.2.0) 只当点击鼠标左键时触发。
  • .right - (2.2.0) 只当点击鼠标右键时触发。
  • .middle - (2.2.0) 只当点击鼠标中键时触发。
  • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。

以上是关于VUE的事件修饰符的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 鼠标事件处理程序修饰符

Vue学习之路第八篇:事件修饰符

键盘事件、事件修饰符

Vue中的事件修饰符,按键修饰符

Vue常用修饰符

vue5 v-model详解,绑定事件,修饰符,深度响应式