一、先用一张图理解下冒泡和捕获
冒泡和捕获
二、事件修饰符
-
.stop
阻止冒泡（通俗讲就是阻止事件向上级DOM元素传递） -
.prevent
阻止默认事件的发生
默认事件指对DOM的操作会引起自动执行的动作，比如点击超链接的时候会进行页面的跳转，点击表单提交按钮时会重新加载页面等，使用".prevent"修饰符可以阻止这些事件的发生。 -
.capture
捕获冒泡，即有冒泡发生时，有该修饰符的dom元素会先执行，如果有多个，从外到内依次执行，然后再按自然顺序执行触发的事件。 -
.once
设置事件只能触发一次，比如按钮的点击等。 -
.self
将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响 -
.native
在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触 发的。 -
.passive
该修饰符大概意思用于对DOM的默认事件进行性能优化，根据官网的例子比如超出最大范围的滚动条滚动的。
三、指令修饰符
-
.lazy
v-model 指令默认会在 input 事件中加载输入框中的数据（中文输入法中输入拼音的过程除外）。我们可以使用 .lazy 懒加载修饰符，让其只在 change 事件中再加载输入框中的数据。
<!-- 默认的v-model是每输入一个字符自动更新一次msg -->
<!-- .lazy => 当 input 失去焦点或者按下enter键后才更新msg -->
<input type="text" v-model.lazy="msg">
-
.number
输入字符串转为数字
<input v-model.number="age" type="number">
-
.trim
输入首尾空格过滤
<input v-model.trim="age" type="number">
