关于vue.js: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 修饰符进行转换