[vue] Modifiers commonly used in Vue:

---

1. Form modifiers

Used after the v-model directive on the input tag, such as v-model.lazy="value"

1. [ lazy] When the cursor leaves the label, the value will be assigned to value

2. [ trim] filter out the spaces on both sides

3. 【number】Automatically convert the user input value into a numeric type, but if the value cannot be parsed by parseFloat, the original value will be returned

2. Event modifiers

1. 【stop】Prevent the bubbling of the event, which is equivalent to calling the event.preventPropagation method

<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>  // 只输出1
</div>

2. [ prevent] prevents the default behavior of the event, which is equivalent to calling the event.preventDefault method

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

3. [ self] Trigger the processing function only when event.target is the current element itself

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

4. [ once] After the event is bound, it can only be triggered once, and it will not be triggered the second time

<button @click.once="shout(1)">ok</button>

【capture】Event capture, triggered from the top down

<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 3 4

5. [ passive] is used to improve the performance of the scroll event on the mobile terminal. On the mobile side, when we are listening to element scrolling events, the onscroll event will always be triggered and our webpage will become stuck. Therefore, when we use this modifier, it is equivalent to adding a .lazy modifier to the onscroll event.

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

6. 【native】If you bind a native event on a custom component tag, you need to add .native.

<button @click="add(this)">普通的html标签，不包含native的按钮</button><br/>
<button @click.native="add(this)">普通的html标签，包含native的按钮</button><br/>
<myself-button @click="add(this)"/></myself-button><br/>
<myself-button @click.native="add(this.id)"/></myself-button>
只有第一行和第四行的事件会生效。

3. Mouse Button Modifiers

<button @click.left="shout(1)">ok</button> //左键
<button @click.right="shout(1)">ok</button> //右键
<button @click.middle="shout(1)">ok</button> //中键

4. Keyboard Modifiers

Keyboard modifiers are used to modify keyboard events (onkeyup, onkeydown), as follows:
普通键（enter、tab、delete、space、esc、up...）
系统修饰键（ctrl、alt、meta、shift...）

// 只有按键为enter的时候才触发
<input type="text" @keyup.enter="shout()">

Five, v-bind modifier

1. [ sync] Realize two-way binding of subcomponent props

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

//父亲组件
<comp :myMessage="bar" @update:myMessage="func"></comp>
func(e){
    
    
 this.bar = e;
}
//子组件js
func2(){
    
    
  this.$emit('update:myMessage',params);
}

When using sync, the format of the event name passed by the subcomponent must be update:value, where the value must be exactly the same as the name declared in props in the subcomponent

Note that v-bind with the .sync modifier cannot be used with expressions

Using v-bind.sync on a literal object, such as v-bind.sync="{ title: doc.title }", will not work properly

2. [ props] Set custom tag attributes to avoid exposing data and preventing pollution of HTML structure

<input id="uid" title="title1" value="1" :index.prop="index">

3. [ camel] Change the naming to camel case, such as converting the view-Box attribute name to viewBox