Vue 常用修饰符

目录

定义

事件修饰符 v-on（缩写@）

鼠标按键修饰符

v-bind 修饰符（缩写:）

键值修饰符

表单修饰符

---

定义

修饰符是用于限定类型以及类型成员的声明的一种符号，vue 中修饰符分为以下五种：事件修饰符、鼠标按键修饰符、v-bind 修饰符、键值修饰符、表单修饰符

事件修饰符 v-on（缩写@）

• .stop：阻止事件冒泡，相当于调用 event.stopPropagation() 方法

• .prevent：阻止事件的默认行为，相当于调用 event.preventDefault() 方法

• .capture：使事件触发从包含这个元素的顶层开始往下触发

  <div @click.capture="shout(1)">
      obj1
      <div @click.capture="shout(2)">
          obj2
          <div @click="shout(3)">
              obj3
              <div @click="shout(4)">
                  obj4
              div>
          div>
      div>
  div>
  // 输出结构：1 2 4 3
  

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

• .native：让组件变成像 html 内置标签那样监听根元素的原生事件，否则组件上使用 v-on 只会监听自定义事件

• .once：绑定了事件以后只能触发一次，第二次就不会触发

• .passive：在移动端，当我们在监听元素滚动事件的时候，会一直触发 onscroll 事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给 onscroll 事件整了一个 .lazy 修饰符

  <div v-on:scroll.passive="onScroll">...div>
  

❗️❗️ 注意：

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

鼠标按键修饰符

• .left：只当点击鼠标左键时触发

• .right：只当点击鼠标右键时触发

• .middle：只当点击鼠标中键时触发

v-bind 修饰符（缩写:）

• .prop：设置自定义标签属性，避免暴露数据，防止污染HTML结构

• .camel：将命名变为驼峰命名法，如将 view-Box属性名转换为 viewBox

• .sync：语法糖，能对 props 进行一个双向绑定

键值修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

@keyup：按键抬起

@keydown：按键按下

• .enter：只有在 `key` 是 `Enter` 时调用

  <input v-on:keyup.enter="submit">
  

• .tab：捕获 tab 键
• .delete：捕获 delete 删除键和 backspace 退格键
• .esc
• .space
• .up
• .down
• .left
• .right
• .ctrl
• .alt
• .shift
• .exact： 修饰符允许你控制由精确的系统修饰符组合触发的事件

  <button v-on:click.ctrl="onClick">Abutton>
   
  <button v-on:click.ctrl.exact="onCtrlClick">Abutton>
   
  <button v-on:click.exact="onClick">Abutton>
  

• .meta

❗️❗️ 注意：

• 在 Mac 系统键盘上，meta 对应 command 键 (⌘)。
• 在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
• 在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。
• 在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。
• 在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

使用 keyCode attribute 也是允许的：

<input v-on:keyup.13="submit">
 
<input v-on:keyup.alt.67="clear">
 
<div v-on:click.ctrl="doSomething">Do somethingdiv>

还可以通过全局 config.keyCodes 对象自定义按键修饰符别名

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

表单修饰符

• .lazy：在表单输入时不会马上显示在页面，而是等输入完成失去焦点时才会显示，也就是在change 事件之后再进行信息同步

  <input type="text" v-model.lazy="value">
  <p>{{value}}p>
  

• .trim：过滤表单输入时两边的空格，而中间的空格不会过滤

  <input type="text" v-model.trim="value">input>
  

• .number：自动将用户的输入值转为数值类型，但如果这个值无法被 parseFloat 解析，则会返回原来的值

  <input type="number" v-model.number="age">input>