Las instrucciones son atributos especiales con el prefijo v-.
Se espera que el valor del atributo de directiva sea una sola expresión de JavaScript (v-for es una excepción).
La responsabilidad de la instrucción es actuar en el DOM de forma responsable cuando cambia el valor de la expresión.
Tabla de contenido
1. texto-v
Actualiza el contenido de texto del elemento, que es el contenido de texto del objeto del elemento.
<div v-text="a"></div>
// 跟数据绑定的文本插值效果一样
<div>{
{ a }}</div>
2. v-html
El usuario actualiza el innerHTML del elemento.
<div v-html="a"></div>
Tenga en cuenta que este comando solo se usa en contenido confiable, nunca en contenido enviado, de lo contrario, conducirá fácilmente a ataques XSS.
Componente de archivo único Si agrega alcance a su estilo, el estilo no se aplicará al html insertado.
3. v-show
Según el valor verdadero y falso de la expresión para mostrar y ocultar los elementos , se muestra y se oculta a través de css, que tiene un mejor rendimiento que v-if.
<div v-show="a"></div>
4. v-if
El elemento se representa de acuerdo con el valor verdadero y falso de la expresión, y el elemento se destruye cuando es falso, y los datos y componentes internos se destruyen y reconstruyen al cambiar.
<div v-if="a"></div>
Cuando se usa con v-if, v-for tiene una prioridad más alta que v-if
5. v-else
El elemento en el mismo nivel delante de esta instrucción debe tener v-if o v-else-if.
<div v-if="a"></div>
<div v-else></div>
6. v-else-if
El elemento en el mismo nivel delante de esta instrucción debe tener v-if o v-else-if.
<div v-if="a"></div>
<div v-else-if="b"></div>
<div v-else></div>
7. v-for
El valor debe ser una matriz, objeto, número, cadena.
Para darle a Vue una pista para que pueda rastrear la identidad de cada nodo, reutilizando y reordenando los elementos existentes, debe proporcionar una clave única para cada elemento.
7.1 Matriz
<div v-for="(item, index) in [1, 2, 3, 4]" :key="index">{
{item}}|{
{index}}</div>
resultado:
<div>1|0</div>
<div>2|1</div>
<div>3|2</div>
<div>4|3</div>
7.2 Objeto
<div v-for="(val, name, index) in { name: '小明', age: 18, }" :key="name">
{
{val}}|{
{name}}|{
{index}}
</div>
resultado:
<div>小明|name|0</div>
<div>18|age|1</div>
7.3 Número
<div v-for="(val, index) in 2" :key="index">{
{val}}|{
{index}}</div>
resultado:
<div>1|0</div>
<div>2|1</div>
7.4 Cuerda
<div v-for="(val, index) in '小明'" :key="index">{
{val}}|{
{index}}</div>
resultado:
<div>小|0</div>
<div>明|1</div>
8. v-on
Su abreviatura es @.
V-on se utiliza para vincular oyentes de eventos. En elementos comunes, solo puede escuchar eventos nativos de dom, como hacer clic y cambiar. En el componente de elemento personalizado, puede escuchar el evento personalizado desencadenado por el componente secundario.
Si usa una declaración en línea, la declaración puede acceder a una propiedad de $ event: v-on: click = "handle ('ok', $ event)".
Modificadores:
.stop-call event.stopPropagation ().
.prevent-call event.preventDefault ().
.capture: use el modo de captura al agregar detectores de eventos.
.self: la devolución de llamada se activa solo cuando el evento se activa desde el propio elemento vinculado al oyente.
. {keyCode | keyAlias} -La devolución de llamada solo se activa cuando el evento se activa desde una tecla específica.
.native: escucha los eventos nativos del elemento raíz del componente.
.una vez activa la devolución de llamada solo una vez.
.left- (2.2.0) Se activa solo cuando se hace clic en el botón izquierdo del mouse.
.right- (2.2.0) Se activa solo cuando se hace clic con el botón derecho del mouse.
.middle- (2.2.0) Se activa solo cuando se hace clic en el botón central del mouse.
.passive- (2.3.0) Agregar un oyente en modo {pasivo: verdadero}
<!-- 方法 -->
<div v-on:click="fun"></div>
<!-- 内联语句 -->
<div v-on:click="fun('hellp', $event)"></div>
<!-- 简写 -->
<div @click="fun"></div>
<!-- 使用修饰符 阻止冒泡 -->
<div @click.stop="fun"></div>
<!-- 串联修饰符 -->
<div @click.stop.prevent="fun"></div>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>
9. v-bind
v-bind se utiliza para vincular atributos dinámicos.
Su abreviatura es :.
Modificadores:
.prop-bind como una propiedad DOM en lugar de como un atributo.
.camel- (2.1.0+) Convierta el nombre del atributo kebab-case en camelCase. (Compatible desde 2.1.0)
.sync (2.3.0+) Syntactic sugar, se expandirá a un oyente v-on que actualiza el valor de enlace del componente principal.
<!-- 绑定一个属性 -->
<img v-bind:src="a" />
<!-- 简写 -->
<img :src="a" />
<!-- 绑定style -->
<div :style="{
fontSize: size + 'px' }">小明</div>
<!-- 绑定class -->
<div :class="[classA, classB]"></div>
10. modelo v
Utilizado para la unión de dos vías
modificadores sobre los controles de formulario :
.lazy reemplazo de entrada a eventos de cambio de monitor.
Cadena de número de entradas en un número válido.
Ajuste de entrada de espacios iniciales y finales para filtrar
<input v-model="msg" >
11. v-pre
No compile este elemento y sus elementos secundarios
<div v-pre>{
{ a }}</div>
resultado
{
{ a }}
12. capa en v
Se utiliza para mostrar el elemento de control después de la compilación para resolver el problema de que la pantalla parpadeará.
En vue-router, es un div vacío, que se implementa mediante el montaje de elementos, por lo que esta instrucción no es necesaria.
<div v-cloak>123</div>
13. v-once
Solo renderice un elemento o componente una vez, y nunca vuelva a renderizarlo, para optimizar el rendimiento.
<div v-once>123</div>
14. ranura en V
Se utiliza para proporcionar espacios con nombre o aceptar accesorios.
Su abreviatura es #.
Solo se puede utilizar en la etiqueta de plantilla.
El valor predeterminado es predeterminado.
Puede entenderse como bloques de construcción. Esta instrucción le indica qué bloque de construcción colocar en qué lugar.