[vue] Modificadores comúnmente usados en Vue:

---

1. Modificadores de formulario

Se usa después de la directiva v-model en la etiqueta de entrada, como v-model.lazy="value"

1. 【lazy】Cuando el cursor sale de la etiqueta, el valor se asignará al valor

2. [ trim] filtrar los espacios en ambos lados

3. [ number] convierte automáticamente el valor de entrada del usuario en un tipo numérico, pero si parseFloat no puede analizar el valor, se devolverá el valor original

2. Modificadores de eventos

1. 【stop】Evitar el burbujeo del evento, lo que equivale a llamar al método event.preventPropagation

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

2. [ prevent] evita el comportamiento predeterminado del evento, lo que equivale a llamar al método event.preventDefault

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

3. [ self] Activar la función de procesamiento solo cuando event.target es el elemento actual en sí

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

4. [ once] Después de vincular el evento, solo se puede activar una vez y no se activará la segunda vez.

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

【capture】Captura de eventos, activado desde arriba hacia abajo

<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] se utiliza para mejorar el rendimiento del evento de desplazamiento en el terminal móvil. En el lado móvil, cuando estamos escuchando eventos de desplazamiento de elementos, el evento onscroll siempre se activará y nuestra página web se bloqueará, por lo tanto, cuando usamos este modificador, es equivalente a agregar un modificador .lazy al evento onscroll.

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

6. 【native】Si vincula un evento nativo en una etiqueta de componente personalizada, debe agregar .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. Modificadores del botón del mouse

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

4. Modificadores de teclado

Los modificadores de teclado se utilizan para modificar eventos de teclado (onkeyup, onkeydown), de la siguiente manera:
普通键（enter、tab、delete、space、esc、up...）
系统修饰键（ctrl、alt、meta、shift...）

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

Cinco, modificador v-bind

1. [ sync] Realice el enlace bidireccional de los accesorios de subcomponentes

//父组件
<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);
}

Al usar la sincronización, el formato del nombre del evento pasado por el subcomponente debe ser actualización: valor, donde el valor debe ser exactamente el mismo que el nombre declarado en accesorios en el subcomponente

Tenga en cuenta que v-bind con el modificador .sync no se puede usar con expresiones

Usar v-bind.sync en un objeto literal, como v-bind.sync="{ title: doc.title }", no funcionará correctamente

2. [ props] Establezca atributos de etiqueta personalizados para evitar exponer datos y prevenir la contaminación de la estructura HTML

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

3. [ camel] Cambie el nombre a mayúsculas y minúsculas, como convertir el nombre del atributo view-Box a viewBox