03.vue事件&指令修饰符

一、先用一张图理解下冒泡和捕获

冒泡和捕获

二、事件修饰符

• .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">