关于前端:前端开发框架Vuejs巧妙运用修饰符讲解分析

在本文我就不具体介绍 Vue.js 是如何给组件绑定事件了的，大家都晓得是通过 v -on: 事件 =” 事件名 ” 或者它的语法糖 @事件 =” 事件名 ” 前端培训。
Vue.js 为咱们提供了很多不同品种的修饰符，例如事件修饰符、按键修饰符、鼠标按键修饰符，咱们就对这三种修饰符进行具体的介绍。
一、事件修饰符
首先，来看一下 Vue.js 为咱们提供的事件修饰符有哪些吧。

修饰符名称作用.stop 阻止事件进行传递.prevent 阻止事件的默认行为.capture 使该事件最先触发.self 限度事件是由本身触发才进行解决，即事件冒泡触发该事件有效.once 规定该事件只会触发一次.passive 会立刻触发事件的默认行为，即不会被 event.preventDefault()影响
.stop
未应用修饰符 .stop 的状况：
<template>
<div class=’father’ @click=’btnClick1′>
<div class=’child’ @click=’btnClick2′>
<div class=’grandson’ @click=’btnClick3′></div>
</div>
</div>
</template>
<script>
…
btnClick1() {
console.log(‘div1 被点击 ’)
},
btnClick2() {
console.log(‘div2 被点击 ’)
},
btnClick3() {
console.log(‘div3 被点击 ’)
}
…
</script>
当咱们点击类名为 grandson 的 div 标签时，会打印以下内容
div1 被点击
div2 被点击
div3 被点击
咱们再来看一下应用了修饰符 .stop 是什么样子的：
<template>
<div class=’father’ @click=’btnClick1′>
<div class=’child’ @click.stop=’btnClick2′>
<div class=’grandson’ @click=’btnClick3′></div>
</div>
</div>
</template>
<script>
…
btnClick1() {
console.log(‘div1 被点击 ’)
},
btnClick2() {
console.log(‘div2 被点击 ’)
},
btnClick3() {
console.log(‘div3 被点击 ’)
}
…
</script>
这时咱们进行同样的操作，打印后果如下：
div1 被点击
div2 被点击
类名为 father 的 div 标签上的 click 事件并没有被触发，其实是因为修饰符.stop 相当于 stopPropagation()的作用，阻止了事件持续向上传递
.prevent
该修饰符就不多做拆穿了，相当于 preventDefault() 的作用
.capture
该修饰符是将事件触发程序提前，来持续看下面那个例子，咱们用了该修饰符后，是怎么样一个状况
<template>
<div class=’father’ @click.capture=’btnClick1′>
<div class=’child’ @click=’btnClick2′>
<div class=’grandson’ @click=’btnClick3′></div>
</div>
</div>
</template>
<script>
…
btnClick1() {
console.log(‘div1 被点击 ’)
},
btnClick2() {
console.log(‘div2 被点击 ’)
},
btnClick3() {
console.log(‘div3 被点击 ’)
}
…
</script>
咱们点击最两头的元素，看看后果如何：
div1 被点击
div3 被点击
div2 被点击
咱们能够看到，最外层的 div 应用了修饰符 .capture，所以当咱们点击最外面的 div 时，本应该由外向外顺次触发事件，但此时却先触发了最外层的 div 的事件，而后再按本来的程序顺次触发
.self
该修饰符依据字面意思也很好了解，就是只有当本身触发该事件才会调用解决的函数，咱们来接着下面的例子来看
<template>
<div class=’father’ @click=’btnClick1′>
<div class=’child’ @click.self=’btnClick2′>
<div class=’grandson’ @click=’btnClick3′></div>
</div>
</div>
</template>
<script>
…
btnClick1() {
console.log(‘div1 被点击 ’)
},
btnClick2() {
console.log(‘div2 被点击 ’)
},
btnClick3() {
console.log(‘div3 被点击 ’)
}
…
</script>
咱们先来点击类名为 grandson 的 div，后果如下
div3 被点击
div1 被点击
咱们再来点击一下类名为 child 的 div，后果如下
div2 被点击
div1 被点击
咱们能够看到，当点击了最外面的 div 时，事件冒泡到两头的 div，但因为应用了修饰符 .self，所以它并没有调用事件的处理函数
.once
该修饰符示意事件只能被触发一次，咱们来看例子
<template>
<div class=’father’ @click=’btnClick1′>
<div class=’child’ @click=’btnClick2′>
<div class=’grandson’ @click.once=’btnClick3′></div>
</div>
</div>
</template>
<script>
…
btnClick1() {
console.log(‘div1 被点击 ’)
},
btnClick2() {
console.log(‘div2 被点击 ’)
},
btnClick3() {
console.log(‘div3 被点击 ’)
}
…
</script>
咱们来对类名为 grandson 的 div 进行第一次点击，后果如下
div3 被点击
div2 被点击
div1 被点击
那咱们对它进行第二次点击，后果如下
div2 被点击
div1 被点击
咱们能够看到，因为最外部的 div 应用了修饰符 .once，所以只有在第一次点击它的时候，它才会调用事件处理函数，之后再点击，就不会触发了
.passive
这个修饰符也就不多做演示了，作用呢，就是使事件立刻触发默认行为。比方咱们给一个表单提交事件 submit 设置了 event.preventDefault()，阻止了表单提交的默认行为，但咱们对该事件应用了修饰符 .passive，点击提交表单的时候，event.preventDefault() 就会生效，即依然进行表单提交的默认行为。
== 留神 ==：但这里肯定要留神，修饰符.prevent 和修饰符 .passive 不能一起应用，零碎会疏忽前者。接下来咱们会介绍到修饰符的组合应用。
修饰符的组合应用
修饰符是能够组合应用的，相似这样的.stop.once。咱们来看看修饰符.stop 和修饰符.once 一起应用会有什么成果
<template>
<div class=’father’ @click=’btnClick1′>
<div class=’child’ @click.stop.once=’btnClick2′>
<div class=’grandson’ @click=’btnClick3′></div>
</div>
</div>
</template>
<script>
…
btnClick1() {
console.log(‘div1 被点击 ’)
},
btnClick2() {
console.log(‘div2 被点击 ’)
},
btnClick3() {
console.log(‘div3 被点击 ’)
}
…
</script>
咱们来点击类名为 grandson 的 div，后果如下
div3 被点击
div2 被点击
这里，因为 div2 应用了修饰符 .stop，所以点击事件没有向上持续传递。而后咱们再来点击一下，看看后果如何
div3 被点击
div1 被点击
因为 div2 应用了修饰符 .once，所以第二次点击以及接下来的点击都不会触发它的事件处理函数了。
二、按键修饰符
咱们能够对 keyup 或 keydown 等键盘按键的事件进行修饰符的应用。Vue.js 给咱们提供了一些罕用按键的修饰符，咱们来看一下
.enter // 回车键
.tab //tab 键
.delete //delete 键和退格键
.esc //esc 键
.space // 空格键
.up //↑键
.down //↓键
.left //←键
.right //→键
咱们只须要在事件的前面跟上一个按键修饰符就能够规定按哪个键才会触发事件了。
键盘上那么多键，咱们如果要规定按别的键怎么办？其实咱们只须要本人对别的键进行配置一下就能够了，例如
Vue.config.keyCodes.f1 = 112
这样给全局配置完当前，咱们就能够应用按键修饰符 .f1 了
<div @keyup.f1=”divClick”></div>
三、零碎润饰键
咱们在平时见过这样一个需要，按住 ctrl + f1，就能够触发某些操作，所以 Vue.js 还提供了一些润饰键来帮忙咱们实现这样的需要。
.ctrl
.alt
.shift
.meta // 该润饰键是作用于 Mac 零碎的电脑的
.exact
润饰键能够配合事件应用，例如 @click.ctrl=’btnClick’ 示意要按住 ctrl 去点击才会触发事件；同时润饰键还能跟按键修饰符一起应用，例如 @keyup.alt.enter=’keyUp’ 示意按住 alt 的同时按住回车键才会触发该事件。
但其实应用时咱们会发现这样一个状况，@keyup.alt.enter=’keyUp’，咱们按住 alt，再按住一个空格键或者 tab 键，而后按住回车键，也能够触发该事件。所以 Vue.js 新增了一个修饰符.exact，用来实现按键的准确触发。
@keyup.alt.enter.exact=’keyUp’，这样应用了修饰符.exact 当前，咱们必须只有在按住 alt 和回车键时，能力触发该事件了，再多按了一个键都不能触发。
四、鼠标按钮修饰符
当然了，鼠标上还有三个键呢，即左键、右键、滚轮键，他们也有对应的修饰符，别离是 .left、.right、.middle，这里也就不做多余的演示了。
五、其它修饰符
除了以上提到的修饰符，还有一些其它修饰符用于特定的状况，咱们来理解一下
.sync
要理解该修饰符的作用，咱们先来回顾一下父子组件之间通信的一个例子
• 子组件状况

展现父组件传递过去的变量 title，并在点击时，向父组件发送一个名为 changeValue 的事件，同时也传递过来了一个值。
// 咱们创立了个名为 child-cpn 的组件
<div @click=’divClick’>{{title}}</div>

     ……

props: [‘title’],
methods: {
divClick() {
this.$emit(‘changeValue’, ‘ 我是扭转后的值 ’)
}
}
• 父组件状况

父组件将本人的变量 origin_title 传递给子组件，同时接管子组件传递过去的事件 changeValue 事件以及数据。
// 父组件应用了子组件 child-cpn
<child-cpn :title='{{origin_title}}’ @changeValue=’changeValue’/>
……
data() {
return {
origin_title: ‘ 我是原始值 ’
}
},
methods: {
changeValue(info) {
this.origin_title = info
}
}
咱们都晓得父组件传递给子组件的数据是单向变动的，即只有当父组件的数据扭转，子组件取得的数据才会跟着扭转。所以这个例子中，子组件想扭转这个值，通过子组件向父组件通信的形式，通知父组件，你快把这个值给改一下，批改后的值我也发给你了。就这样，父组件还须要监听子组件传递过去的事件，再用一个办法去解决该事件，就显得很麻烦。
通过理解下面这个例子的需要，咱们来引入咱们的修饰符.sync，看看应用了这个修饰符，代码会变得多简洁
• 子组件状况

子组件在向父组件通信时，传递的事件名须要改为这样的格局：update: 须要扭转的变量名
// 咱们创立了个名为 child-cpn 的组件
<div @click=’divClick’>{{title}}</div>

     ……

props: [‘title’],
methods: {
divClick() {
this.$emit(‘update:title’, ‘ 我是扭转后的值 ’)
}
}
• 父组件状况

父组件只须要在传递给子组件变量时，在变量名前面加一个修饰符.sync，这样的话父组件中的 origin_title 就会间接扭转成子组件传递过去的参数了。
// 父组件应用了子组件 child-cpn
<child-cpn :title.sync='{{origin_title}}’/>
……
data() {
return {
origin_title: ‘ 我是原始值 ’
}
}
仔细的小伙伴肯定发现了，父组件在应用了修饰符.sync 后，省去了 @changeValue=’changeValue’ 和 changeValue(info) {this.origin_title = info}这两局部代码，变得非常的简洁。
留神：

1. 这里我还是要强调一遍哦，子组件在向父组件通信的时候，传递的事件参数必须是 unpdate: 须要扭转的变量名 这样的格局，这是规定好的。
2. 在咱们应用了修饰符 .sync 后，传递给子组件数据时，不能应用表达式的模式，例如这样 :title.sync=”origin_title + ‘ 哈哈 ’ “，这样是会报错的。

.native
该修饰符的作用比较简单，我就几句话形容一下吧
// 父组件应用了一个名为 child-cpn 的子组件，并监听他的 click 事件，后果是没作用的
<child-cpn @click=’cpnClick’/>
有教训的人会晓得，在组件的根元素上绑定原始的事件，是没有作用的，不信你们能够本人入手试一下。
但只有咱们在该事件前面应用修饰符 .natvie 就能够绑定上原始的事件了
// 父组件应用了一个名为 child-cpn 的子组件，并监听他的 click 事件，胜利绑定
<child-cpn @click.native=’cpnClick’/>