vue.js的修饰符

vue.js的几个修饰符理解

Vue.js 为 v-on 提供了事件修饰符，方便对函数的执行进行过滤处理
事件修饰符如下：

.stop
.prevent
.capture
.self
.once
下面逐个解释，并给出例子

a. .stop
知识点：js的事件冒泡：即父元素跟子元素调用同一个函数时，当点击子元素会执行两次，先执行子元素的事件，再执行父元素的事件。如：

<div id="app-1" @click="doThis($event,'parent')">
    点击父元素
    <a v-on:click="doThis($event,'child')">点击子元素</a>
</div>
new Vue({
    el: '#app-1',
    methods: {
        doThis: function (e,msg) {
             if(e){
                 alert(msg)
              }
        }
    }
})

结果：
先弹出parent
再弹出child

但是!!如果是v-on:click.stop的话，第一次点击子元素还是会先执行两次，再次点击时就只会出现执行子元素的函数了

b. .capture

<div id="parent" @click.capture="doThis($event,'hh')">
   点击父元素
   <a v-on:click="doThis($event,'child')" id="child">点击子元素</a>
</div>

知识点：event.preventDefault()：阻止元素发生默认的行为（例如，当点击a标签不会发生跳转）。
.pervent的作用跟event.preventDefault()一样。

PS：若要阻止事件冒泡，则应该修改子元素的click.stop
若要执行事件捕获，则应该修改父元素的click.capture

c. .prevent
知识点：event.preventDefault()：阻止元素发生默认的行为（例如，当点击a标签不会发生跳转）。
.pervent的作用跟event.preventDefault()一样。
PS：如果只是单纯的a标签阻止跳转的话，记得要new Vue才可以实现.prevent的作用

d. .self
.self不会执行不是本身调用的函数，比如事件冒泡会调用子元素和父元素的函数，但当父元素使用了.self，则点击子元素时只会调用子元素的函数；

e. .once
.once如其名，只会执行一次而已。

按键修饰符：
使用@keyup.xx来调用按键事件，常见按键名如下：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.spacecamelCase
.up
.down
.left
.right
使用自定义修饰符的话，取名字不能使用camelCase这种大小写形式，只能使用kebab-case 且用双引号括起来。如果只是一个单词的话，可以直接使用Vue.config.keyCodes.ent = 13来定义，如果名字是多个单词组合，则要用：

Vue.config.keyCodes = {
“media-play-pause”: 179
}

//2.5.0 新增
可直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符，比如CapsLock键：

<input type="text" width="50px" height="20px"
            @keyup.caps-lock="sendMsg('2333')">

关于其他KeyValue值可看：https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values

其他修饰符可参考官网：https://cn.vuejs.org/v2/guide/events.html#事件修饰符