Detailed summary of vue modifiers (with examples)

This article brings you a detailed summary of vue modifiers (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

In order to make it easier for everyone to write code, vue.js provides you with many convenient modifiers, such as canceling bubbling, blocking default events, etc. that we often use~

Catalog

Form modifier

Event modifier

Mouse button modifier

Key value modifier

v- bind modifier (I really don’t know what it’s called)

Form modifier

What is the most commonly used to fill in forms? input! v-model~And our modifiers exist to simplify these things

.lazy

<div>
   <input>
   <p>{{value}}</p>
</div>

We can see from here that while we are still typing, while the cursor is still there, the following value has already come out, which can be said to be very real-time.
But sometimes we want to update the view after the cursor leaves after we have finished inputting everything.

<div>
   <input>
   <p>{{value}}</p>
</div>

That’s it~ Only when our cursor leaves the input box, it will update the view, which is equivalent to triggering an update in the onchange event.

.trim

In our input box, we often need to filter the content entered by some brothers who accidentally hit the space after entering the password.

<input>

In order to let you see it more clearly, I changed the style, but the problem is not big. I believe you have clearly seen this big There are no spaces on the left and right sides of hello, even though you hit the space bar in the input box.
It should be noted that it can only filter the leading and trailing spaces! The first and last, and the ones in the middle will not be filtered

.number

As you can see from this name, it should be to limit the input of numbers or to convert the input into numbers, but it is not It's so hot to rush the order.

##If you enter the number first, it will limit You can only enter numbers.

If you enter the string first, it is equivalent to not adding the .number

event modifier

.stop

due to the event With the bubbling mechanism, when we bind a click event to an element, the parent's click event will also be triggered.

<div>
  <button>ok</button>
</div>

//js
shout(e){
  console.log(e)
}
//1
//2

Stop event bubbling with one click, which is so convenient. It is equivalent to calling the event.stopPropagation() method.

<div>
  <button>ok</button>
</div>
//只输出1

.prevent

Default behavior for preventing events, for example, preventing submission of a form when the submit button is clicked. Equivalent to calling the event.preventDefault() method.

<!-- 提交事件不再重载页面 -->

Note: Modifiers can be used multiple times at the same time, but the order may vary. Using v-on:click.prevent.self will prevent all clicks, while v-on:click.self.prevent will only prevent clicks on the element itself.
That is,
Judged from left to right~

.self

Only when the event is triggered from the element itself to which the event is bound The callback is triggered. As shown below, we just knew from .stop that the child element will bubble to the parent element and trigger the click event of the parent element. When we add this .self, when we click the button, the click event shout of the parent element will not be triggered. Only when the parent element is clicked (blue background) will shout~ From the English translation of self, it is 'self, itself'. You can see the usage of this modifier

<div>
  <button>ok</button>
</div>

.once

The usage of this modifier is as simple and crude as the name. It can only be used once. After the event is bound, it can only be triggered once. , it will not trigger the second time.

//键盘按坏都只能shout一次
<button>ok</button>

.capture

From the above we know the bubbling of events. In fact, the complete event mechanism is: capture phase-target phase-bubble phase.

The default is that event triggering starts from the target and bubbles up.
When we add this .capture, we do the opposite, and the event triggers from the top level containing this element downwards.

   <div>
      obj1
      <div>
        obj2
        <div>
          obj3
          <div>
            obj4
          </div>
        </div>
      </div>
    </div>
    // 1 2 4 3

从上面这个例子我们点击obj4的时候，就可以清楚地看出区别，obj1，obj2在捕获阶段就触发了事件，因此是先1后2，后面的obj3，obj4是默认的冒泡阶段触发，因此是先4然后冒泡到3~

.passive

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

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div>...</div>

.native

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

<my-component></my-component>

必须使用.native来修饰这个click事件（即<my-component></my-component>），可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，
注意：使用.native修饰符来操作普通HTML标签是会令事件失效的

鼠标按钮修饰符

刚刚我们讲到这个click事件，我们一般是会用左键触发，有时候我们需要更改右键菜单啥的，就需要用到右键点击或者中间键点击，这个时候就要用到鼠标按钮修饰符

.left   左键点击

.right  右键点击

.middle 中键点击

<button>ok</button>

键值修饰符

其实这个也算是事件修饰符的一种，因为它都是用来修饰键盘事件的。
比如onkeyup，onkeydown啊

.keyCode

如果不用keyCode修饰符，那我们每次按下键盘都会触发shout，当我们想指定按下某一个键才触发这个shout的时候，这个修饰符就有用了，具体键码查看键码对应表

<input>

为了方便我们使用，vue给一些常用的键提供了别名

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

//系统修饰键
.ctrl
.alt
.meta
.shift

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

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

我们从上面看到，键分成了普通常用的键和系统修饰键，区别是什么呢？
当我们写如下代码的时候,我们会发现如果仅仅使用系统修饰键是无法触发keyup事件的。

<input>

那该如何呢？我们需要将系统修饰键和其他键码链接起来使用，比如

<input>

这样当我们同时按下ctrl+c时，就会触发keyup事件。
另，如果是鼠标事件，那就可以单独使用系统修饰符。

      <button>ok</button>
      <button>ok</button>
      <button>ok</button>

大概是什么意思呢，就是你不能单手指使用系统修饰键的修饰符（最少两个手指，可以多个）。你可以一个手指按住系统修饰键一个手指按住另外一个键来实现键盘事件。也可以用一个手指按住系统修饰键，另一只手按住鼠标来实现鼠标事件。

.exact (2.5新增)

我们上面说了这个系统修饰键，当我们像这样绑定了click键按下的事件，惊奇的是，我们同时按下几个系统修饰键，比如ctrl shift点击，也能触发，可能有些场景我们只需要或者只能按一个系统修饰键来触发（像制作一些快捷键的时候），而当我们按下ctrl和其他键的时候则无法触发。那就这样写。
注意：这个只是限制系统修饰键的，像下面这样书写以后你还是可以按下ctrl + c，ctrl+v或者ctrl+普通键 来触发，但是不能按下ctrl + shift +普通键来触发。

<button>ok</button>

然后下面这个你可以同时按下enter+普通键来触发，但是不能按下系统修饰键+enter来触发。相信你已经能听懂了8~

<input>

v-bind修饰符

.sync(2.3.0+ 新增)

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

//父亲组件
<comp></comp>
//js
func(e){
 this.bar = e;
}

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

现在这个.sync修饰符就是简化了上面的步骤

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

这样确实会方便很多，但是也有很多需要注意的点

1. 使用sync的时候，子组件传递的事件名必须为update:value，其中value必须与子组件中props中声明的名称完全一致(如上例中的myMessage，不能使用my-message)

2. 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。

3. 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。

.prop

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

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>
//input.index === undefined
//input.attributes.index === this.index

从上面我们可以看到如果直接使用v-bind绑定，则默认会绑定到dom节点的attribute。
为了

通过自定义属性存储变量，避免暴露数据

防止污染 HTML 结构

我们可以使用这个修饰符，如下

<input>
//input.index === this.index
//input.attributes.index === undefined

.camel

由于HTML 特性是不区分大小写的。

<svg></svg>

实际上会渲染为

<svg></svg>

这将导致渲染失败，因为 SVG 标签只认 viewBox，却不知道 viewbox 是什么。
如果我们使用.camel修饰符，那它就会被渲染为驼峰名。
另，如果你使用字符串模版，则没有这些限制。

new Vue({
  template: '<svg></svg>'
})

The above is the detailed content of Detailed summary of vue modifiers (with examples). For more information, please follow other related articles on the PHP Chinese website!