vue之修饰符

港控/mmm° 2023-06-03 03:55 3阅读 0赞

Vue提供了很多修饰符来方便开发者使用，这里主要补充一个修饰符的大纲用作笔记。

**目录**

[v-bind修饰符][v-bind]

1.  自定义事件修饰符
    
     *  .prop
     *  .camel
     *  .sync

1.  [v-model修饰符][v-model]
    
    1.  表单修饰符
        
         *  .lazy
         *  .number
         *  .trim

--------------------

**1.1 [事件修饰符][Link 1]**

**.stop**

阻止事件冒泡，相当于调用了event.stopPropagation()方法。

<a v-on:click.stop="doThis"></a>

**.prevent**

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

<form v-on:submit.prevent="onSubmit"></form>

注：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 `v-on:click.prevent.self` 会阻止所有的点击，而 `v-on:click.self.prevent` 只会阻止对元素自身的点击。

**.capture**

<div v-on:click.capture="doThis">...</div>

我们知道触发事件有冒泡机制，完整的事件机制是：捕获阶段--目标阶段--冒泡阶段。  
默认的呢，是事件触发是从目标开始往上冒泡。  
当我们加了这个.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

在以上例子中，我们点击obj4的时候，obj1，obj2在捕获阶段就触发了事件，因此是先1后2；后面的obj3，obj4是默认的冒泡阶段触发，因此是先4然后冒泡到3。

**.self**

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

只当事件是从事件绑定的元素本身触发时才触发回调。像下面所示，刚刚我们从.stop时候知道子元素会冒泡到父元素导致触发父元素的点击事件，当我们加了这个.self以后，我们点击button不会触发父元素的点击事件shout，只有当点击到父元素的时候（蓝色背景）才会触发shout。

![830967-20190811183408604-1049644734.png][]

**.once**

<a v-on:click.once="doThis"></a>

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的**[组件事件][Link 2]**上。如果你还没有阅读关于组件的文档，现在大可不必担心。

**.passive**

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

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

这个 .passive 修饰符尤其能够提升移动端的性能。

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

**[.native][]** - 监听组件根元素的原生事件

我们经常会写很多的小组件，有些小组件可能会绑定一些事件，但是，像下面这样绑定事件是不会触发的

<My-component @click="shout(3)"></My-component>

必须使用.native来修饰这个click事件

<My-component @click.native="shout(3)"></My-component>

可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签。

注：使用.native修饰符来操作普通HTML标签是会令事件失效的。

--------------------

**1.2 [按键修饰符][Link 3]**

**[keyCode][]与[自定义按键修饰符别名][Link 4]**

按键修饰符也是事件修饰符的一种，**[键盘按键与 ASCII 字符集对照表][ASCII]**。

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter  
.tab  
.delete (捕获“删除”和“退格”键)  
.esc  
.space  
.up  
.down  
.left  
.right

<button type="button" @keyup.enter="onClick">onClick!</button>

**[系统修饰符][keyCode]**[**.ctrl|****.alt|****.shift|****.meta**][keyCode]

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl  
.alt  
.shift  
.meta

注：仅仅使用系统修饰键是无法触发keyup事件的，我们需要将系统修饰键和事件触发链接起来使用

<input @keyup.alt.67="clear">
    
    
    <div @click.ctrl="doSomething">Do something</div>

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

**[鼠标按钮修饰符.left|.right|.middle][.left_.right_.middle]**

.left - (2.2.0) 只当点击鼠标左键时触发。  
.right - (2.2.0) 只当点击鼠标右键时触发。  
.middle - (2.2.0) 只当点击鼠标中键时触发。

<button type="button" @click.middle="onClick">onClick!</button>
    <button type="button" @click.right.prevent="func2">func2!</button>

注：使用click.right的时候连用.prevent，阻止默认的鼠标右键事件。

**[.exact (2.5新增)][.exact_2.5]**

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<button @click.ctrl="onClick">A</button>
    
    
    <button @click.ctrl.exact="onCtrlClick">A</button>
    
    
    <button @click.exact="onClick">A</button>

注意：这个只是限制系统修饰键的，像下面这样书写以后你还是可以按下ctrl + c，ctrl+v或者ctrl+普通键 来触发，但是不能按下ctrl + shift +普通键来触发。

然后下面这个你可以同时按下enter+普通键来触发，但是不能按下系统修饰键+enter来触发。

--------------------

**2.1[自定义事件修饰符][Link 5]**

**[.sync][Link 5]**

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。我们通常的做法是：

//父亲组件
    <comp :myMessage="bar" @update:myMessage="func"></comp>

//js
    methods: {
      func(e) {
        this.bar = e;
      }
    }

//子组件js
    methods: {
      func2(e) {
        this.$emit('update:myMessage',params);
      }
    }

.sync修饰符就是简化了上面的步骤：

//父组件
    <comp :myMessage.sync="bar"></comp> 
    //子组件
    this.$emit('update:myMessage',params);

vue很好用的v-model的，也是类似的一个语法糖：以v-model传入，props:value接受，$emit('input',params)传出，节省了.sync。

**[.prop][v-bind]  **\- 被用于绑定 DOM 属性 (property)

<div v-bind:text-content.prop="text"></div>

要学习这个修饰符，我们首先要搞懂两个东西的区别。

Property：节点对象在内存中存储的属性，可以访问和设置。
    Attribute：节点对象的其中一个属性( property )，值是一个对象。
    可以通过点访问法 document.getElementById('xx').attributes 或者 document.getElementById('xx').getAttributes('xx') 读取，通过 document.getElementById('xx').setAttribute('xx',value) 新增和修改。
    在标签里定义的所有属性包括 HTML 属性和自定义属性都会在 attributes 对象里以键值对的方式存在。

其实attribute和property两个单词，翻译出来都是属性，但是《javascript高级程序设计》将它们翻译为特性和属性，以示区分。

//这里的id,value,style都属于property
    //index属于attribute
    //id、title等既是属性，也是特性。修改属性，其对应的特性会发生改变；修改特性，属性也会改变
    <input id="uid" title="title1" value="1" :index="index">
    //input.index === undefined
    //input.attributes.index === this.index

v-bind 默认绑定到 DOM 节点的 attribute 上，使用 .prop 修饰符后，会绑定到 property。

注意：

*  使用 property 获取最新的值；
 *  attribute 设置的自定义属性会在渲染后的 HTML 标签里显示，property 不会。

修饰符用途：

*  通过自定义属性存储变量，避免暴露数据
 *  防止污染 HTML 结构

<input id="input" type="foo" value="11" :data="inputData"></input>
    // 标签结构: <input id="input" type="foo" value="11" data="inputData 的值"></input>
    // input.data === undefined
    // input.attributes.data === this.inputData
    
    <input id="input" type="foo" value="11" :data.prop="inputData"></input>
    // 标签结构: <input id="input" type="foo" value="11"></input>
    // input.data === this.inputData
    // input.attributes.data === undefined

[**.camel**][v-bind]

.camel 修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化，例如 SVG 的 viewBox 属性：

在使用字符串模板或通过 vue-loader/vueify 编译时，无需使用 .camel。

--------------------

**3.1** **[表单修饰符][Link 6]**

**[.lazy][]**

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 ，但是有时候我们希望，在我们输入完所有东西，光标离开才更新视图。

你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

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

**[.number][]**

要自动将用户的输入值转为数值类型，可以给 `v-model` 添加 `number` 修饰符：

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。

![830967-20190810234812687-409298528.png][]

注：如果这个值无法被 parseFloat() 解析，则会返回原始的值，就是以下情况：

![830967-20190810234935760-162941162.png][]

**[.trim][]**

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

![830967-20190810235023927-725583837.png][]

注：内容中间的空格是不过滤的。

这个 .passive 修饰符尤其能够提升移动端的性能。

--------------------

写此篇内容的目的主要是做一个修饰符总结，因为官方的文档比较散。

参考：

*  [Vue教程][Vue]
 *  [Vue-API.js][v-on]
 *  [vue修饰符--可能是东半球最详细的文档][vue_--]
 *  [VUE.js学习笔记--vue的各种修饰符][VUE.js_--vue]
 *  [vue 2.x 的 v-bind 指令的 .prop 事件修饰符详解][vue 2.x _ v-bind _ .prop]

转载于:https://www.cnblogs.com/Nightsky-Dec/p/11318815.html

[v-on]: https://cn.vuejs.org/v2/api/#v-on
[v-bind]: https://cn.vuejs.org/v2/api/#v-bind
[v-model]: https://cn.vuejs.org/v2/api/#v-model
[Link 1]: https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6
[830967-20190811183408604-1049644734.png]: /images/20230601/6f0b60c3526a42199f1701e518ec0a02.png
[Link 2]: https://cn.vuejs.org/v2/guide/components-custom-events.html
[.native]: https://cn.vuejs.org/v2/guide/components-custom-events.html#%E5%B0%86%E5%8E%9F%E7%94%9F%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A%E5%88%B0%E7%BB%84%E4%BB%B6
[Link 3]: https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
[keyCode]: https://cn.vuejs.org/v2/guide/events.html#%E7%B3%BB%E7%BB%9F%E4%BF%AE%E9%A5%B0%E9%94%AE
[Link 4]: https://cn.vuejs.org/v2/api/#keyCodes
[ASCII]: https://www.runoob.com/note/29592
[.enter_.tab_.delete_.esc_.space_.up_.down_.left_.right]: https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E7%A0%81
[.left_.right_.middle]: https://cn.vuejs.org/v2/guide/events.html#%E9%BC%A0%E6%A0%87%E6%8C%89%E9%92%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6
[.exact_2.5]: https://cn.vuejs.org/v2/guide/events.html#exact-%E4%BF%AE%E9%A5%B0%E7%AC%A6
[Link 5]: https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
[Link 6]: https://cn.vuejs.org/v2/guide/forms.html#%E4%BF%AE%E9%A5%B0%E7%AC%A6
[.lazy]: https://cn.vuejs.org/v2/guide/forms.html#lazy
[.number]: https://cn.vuejs.org/v2/guide/forms.html#number
[830967-20190810234812687-409298528.png]: /images/20230601/5b3556d607f74baf963f276d5c97bf57.png
[830967-20190810234935760-162941162.png]: /images/20230601/bfc79abbc3cf4c0290317baa12c184a3.png
[.trim]: https://cn.vuejs.org/v2/guide/forms.html#trim
[830967-20190810235023927-725583837.png]: /images/20230601/c6b25da637364760a21e1127c2ecde26.png
[Vue]: https://cn.vuejs.org/v2/guide/events.html
[vue_--]: https://segmentfault.com/a/1190000016786254
[VUE.js_--vue]: https://www.jianshu.com/p/f8d61b91733b
[vue 2.x _ v-bind _ .prop]: https://segmentfault.com/a/1190000012820563