Vue修饰符

事件修饰符

• .prevent修饰符
• .stop修饰符
• .once修饰符

prevent修饰符

• 用于阻止默认事件行为,至关于event.preventDefault()，例如a标签默认跳转

  <div id="app">
  <a @click.prevent="fn" href="https://kaiwu.lagou.com/">连接</a> // 能够添加fn方法也能够不加
  <a @click.prevent href="https://kaiwu.lagou.com/">连接</a>
  </div>

  ---

  stop修饰符

• 用于阻止事件传播，至关于event.stopPropagation()。
• 元素在事件触发后默认会产生事件冒泡，事件冒泡会致使，当前元素触发后向上传递给父元素，并依次向外传递，若是外部某元素也存在相同事件时也会被触发

点击按钮时，div的点击事件也会触发

正确写法

<div @click="fn1">
  <button @click.stop="fn2">按钮</button>
</div>

修饰符的结合使用

<div @click="fn1">
  <a @click.prevent.stop="fn2" href="xxx">连接</a>
</div>

---

once修饰符

• 用于设置事件只会触发一次

  <div id="app">
  <button @click.once="fn2">按钮</button>
  </div>

  ---

  passive修饰符

• passive这个修饰符会执行默认方法。大家可能会问，明明默认执行为何会设置这样一个修饰符。这就要说一下这个修饰符的本意了
• 【浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，因此浏览器自己是没有办法对这种场景进行优化的。这种场景下，用户的手势事件没法快速产生，会致使页面没法快速执行滑动逻辑，从而让用户感受到页面卡顿。】
• 通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动做。咱们加上passive就是为了告诉浏览器，不用查询了，咱们没用preventDefault阻止默认动做
• 通常用在滚动监听，@scoll，@touchmove，由于滚动监听过程当中，移动每一个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。咱们经过passive将内核线程查询跳过，能够大大提高滑动的流畅度

• 注：passive和prevent冲突，不能同时绑定在一个监听器上

  self修饰符

• 只当在 event.target 是当前元素自身时触发处理函数

  <div v-on:click.self="doThat">...</div>

  更多事件修饰符来自官网

---

按键修饰符

• 按键码：按键码指的是将 按键的按键码 做为修饰符使用，以标识按键的操做方式。

  <div id="app">
  <input type="text" @keyup="fn"> // 指定按键松开会触发
  </div>

  var vm = new Vue({
  data:{
  },
  methods:{
    fn(event){
      console.log(event) // 内有code，key，keycode(被废弃)
    }
  }
  }).$mount("#app")

  添加按键码修饰符

  <div id="app">
  <input type="text" @keyup.49="fn"> // 只有keycode49能够触发
  </div>

  若是按键是字母,能够修改成字母修饰符

  <div id="app">
  <input type="text" @keyup.a="fn"> // 只有a字母能够触发
  </div>

• 特殊按键：指的是键盘中相似esc、enter、delete等功能按键，为了更好的兼容性,应首选内置别名。

• 不一样设备keycode可能不一致，特殊按键用别名

  <div id="app">
  <input type="text" @keyup.esc="fn"> // 只有 esc 能够触发
  </div>

• 按键码的修饰符组合

  <div id="app">
  <input type="text" @keyup.a.b.c="fn"> // a 或者 b 或者 c 均可以触发
  </div>

更多按键修饰符来自官网

---

系统修饰符

• 系统按键指的是ctrl、alt 、shift、meta（windows键）等按键。
• 系统按键不单独使用
• 系统按键一般与其余按键组合使用，例如配合ctrl+c 来使用

<div id="app">
  <input type="text" @keyup.ctrl="fn"> // 点击 ctrl+c
</div>

<div id="app">
  <input type="text" @keyup.ctrl.q ="fn"> // 只有 ctrl+q 才能触发
</div>

---

鼠标按键修饰符

• 用于设置点击事件由鼠标哪一个按键来完成。
• .left修饰符
• .right修饰符
• .middle修饰符（滚轮）

<div id="app">
  <input type="text" @keyup.left ="fn"> // 左键 才能触发
</div>

---

v-model修饰符

• .trim修饰符
• .lazy修饰符
• .number修饰符

trim修饰符

• 用于自动过滤用户输入内容首尾两端的空格。（input，textarea）

  <div id="app">
  <input type="text" v-model.trim="inputVal"> // input中首尾空格会被trim移除
  <p>{{ inputVal }}</p>
  </div>

  ---

  lazy修饰符

• 用于将v-model的触发方式由 input事件 触发更改成 change事件 触发。

• 每次输入完毕失去交点时才进行检测，触发

  <div id="app">
  <input type="text" v-model.lazy="inputVal"> // input只有失去焦点才会更新
  <p>{{ inputVal }}</p>
  </div>

  ---

  number修饰符

• 用于自动将用户输入的值转换为数值类型，如没法被parseFloat()转换，则返回原始内容。
• input标签输入123，实际获取的 vm.inputVal = "123",可使用 .number修饰符进行转换