一、事件修饰符
<script>
export default {
methods: {
outer () {
console.log("outer");
},
middle () {
console.log("middle");
},
inner () {
console.log("inner");
},
},
}
</script>
.capture：与事件冒泡方向相反，事件捕获由外到内。点击子节点，就会触发从外至内即父节点-》子节点的点击事件
<div @click.capture="outer">
<div @click.capture="middle">
<button @click.capture="inner">点击</button>
</div>
</div>
.stop：阻止点击事件冒泡，点击子节点不会捕获到父节点的事件
<div class="outeer" @click.stop="outer">
<div class="middle" @click.stop="middle">
<button @click.stop="inner">点击</button>
</div>
</div>
.self：只有自己触发的才会执行,会忽略掉内部的冒泡事件传递出来的信号
<div @click.self="outer">
<div @click.self="middle">
<button @click.self="inner">点击</button>
</div>
</div>
stop与self的区别：
stop：自身开始不向外部传递冒泡信号
self：只响应当前元素自身触发的事件，不响应冒泡触发的事件，且会向外部传递冒泡信号。
.once：只有自己触发的才会执行,会忽略掉内部的冒泡事件传递出来的信号
<button @click.once="inner">点击</button>
.prevent：阻止预设行为，等同于js的event.preventDefault()
<a @click.prevent="handleSomething"></a>
.passive：执行默认方法。每次事件产生，浏览器都会查询是否有preventDefault阻止该次事件的默认动作。加上passive是为了告诉浏览器不用查询，直接执行。(passive能够提升移动端的性能,一般用在滚动监听，@scoll，@touchmove )
<div @scoll.passive="quickScroll"></div>
prevent和passive一起使用，prevent会被忽略。
二、v-model修饰符
.lazy：使用前输入框改变值更新，使用后值会在光标离开input框后才更新
<input type="text" v-model.lazy="inputValue">
.number：将输出字符串转为Number类型。(虽然type类型定义的是Number类型，但如果输入字符串，输出的是String)
<input type="text" v-model.number="inputValue">
.trim：自动过滤用户输入的首尾空格
<input type="text" v-model.trim="inputValue">
三、键盘修饰符
.enter：监听回车键
<input type="text" v-model="inputValue" @keyup.enter="enterkeyup" >
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键
