directiva vue-2:

instrucción

Qué es el atributo html: se utiliza para ampliar la función de las etiquetas html. El atributo está escrito en la etiqueta de desarrollo html: atributo = "valor del atributo",

Las instrucciones se utilizan para ampliar la funcionalidad de las etiquetas en Vue

{ {}} : sintaxis de plantilla, interpolación de texto

Etiquetas html no analizables

{ { Puede escribir variables, constantes, expresiones }} : indefinido y nulo no se representará en la página

Es poner la expresión (la fórmula que devuelve el resultado por cálculo) en la página para su visualización

v-cloak: resuelva { { }} al actualizar la página , generalmente escrito en el componente raíz, id="app", debe agregar manualmente el código css

    - 使得 {
   
   {}} 刷新不让用户看见
    - 直到编译完成前，`<div>` 将不可见
    - 必须手工添加css代码
    - 适用于多个元素
    
    <div id="app" v-cloak>{
   
   {msg}}</div>
 
    <script>
         new Vue({
                el: '#app',
                data: {
                    msg: '欢迎Vue!'
                }
            })
    </script>

    <style> 
        [v-cloak]
             display:none;
         }
    </style>   

v-text: comando de texto

• Etiquetas html no analizables

• <elemento v-text='variable, constante, expresión'></elemento>

• Vue3 advierte que el contenido de la etiqueta se sobrescribirá

v-html: analiza etiquetas HTML o símbolos especiales

• Puede analizar etiquetas html

• <elemento v-html='variable, constante, expresión'></elemento>

• Vue2 sobrescribirá el contenido en la etiqueta

• advertencia de vue3, se sobrescribirá

v-model.trim: eliminar el primer espacio

messageDe esta manera, el valor ingresado por el usuario en el cuadro de entrada eliminará automáticamente los espacios iniciales y finales, y realizará un enlace bidireccional con los datos en la instancia de Vue .

<input v-model.trim="message">

etiqueta de plantilla: <!-- es una etiqueta, pero no se mostrará en la página -->

<template v-if="age>18"> 成年人的世界，你懂得~ </template>

v-once: visualización dinámica cuando el contenido del elemento se carga por primera vez

• <elemento v-una vez>{ {...}}</elemento>

v-pre: no quiero compilar contenido: { {}}

• <elemento v-pre>xxx{ {xxx}}xx</elemento>

v-bind: enlazar datos y atributos de elementos

• v-bind: nombre de atributo=""    

• Abreviatura con dos puntos: nombre del atributo = ""

    <div id="app">
        <!-- 基本绑定样式 -->
        <p class="active">白日依山尽</p>
        <p :class="'active'">白日依山尽</p>
        <p :class="x">白日依山尽</p>
        <p :class="flag?x:''">白日依山尽</p>
        <!-- 对象的方式 -->
        <p :class="{active:false,border:true}">黄河入海流</p>
        <!-- 数组的方式 -->
        <p :class="['active','border']">欲穷千里目</p>
        <!-- style绑定 -->
        <p :style="{backgroundColor:'red',fontSize:'28px'}">更上一层楼</p>
        <p :style="{backgroundColor:z}">更上一层楼</p>
    </div>

v-show etiqueta mostrar y ocultar

Principio v-show: el método css controla la visualización y ocultación de etiquetas mediante el control de visualización: ninguno/bloque: adecuado para cambios frecuentes

Creación y eliminación de etiquetas v-if, v-else-if, v-else

El principio de v-if: controlar la visualización y ocultación de elementos creando y destruyendo nodos dom. verdadero agregar falso eliminar: costo rendimiento

: Use js para crear (document.createElement()) y eliminar (ele.remove())

<元素1 v-if="条件1">
<元素2 v-else-if="条件2">
...
<元素n v-else>

紧挨着写，不能插入其他元素

La diferencia entre v-if y v-show

función v-show: el método css controla la visualización y ocultación de etiquetas mediante el control de visualización: ninguno/bloque: adecuado para cambios frecuentes

El principio de v-if: controlar la visualización y ocultación de elementos a través de la creación y destrucción de elementos. verdadero agregar falso eliminar: costo rendimiento

actuación:

1. Un interruptor v-if consume una actuación

2. v-show, solo consume una actuación cuando la pantalla inicial

Seguridad (el control de permisos reflejará): v-if es mayor que v-show

Admite escribir en la etiqueta de la plantilla.

1. v-si apoyo

2. v-show no es compatible    

v-for <!-- Mantra: Escribe v-for en quien quieras que aparezca varias veces -->

• For in atraviesa la matriz para obtener (valor, subíndice), y atraviesa el objeto para obtener (valor clave, nombre clave, subíndice)

• Sintaxis v-for="(valor transversal, subíndice transversal) en los datos que desea facilitar"

  • // Gramática 1: números transversales: // v-for = "elemento en números": clave = 'único, si hay una identificación, use la identificación, si no hay una identificación, use el índice'

  • // Gramática 2: recorrer la matriz // v-for = "(elemento, índice) matriz en datos": clave = 'único, use id si hay una identificación, use índice si no hay una identificación'

  • // Gramática 3: Atravesar objetos // v-for = "(valor, clave, índice) en objeto en datos": clave = 'único, si hay una identificación, use la identificación, si no hay una identificación, use el índice' . el valor es el valor de la clave, la clave es el nombre de la clave, el índice índice

  • Con clave, mejora la eficiencia de for loop

Prioridad de v-if y v-for

En vue2: v-for tiene mayor prioridad que v-if

En vue3: v-if tiene mayor prioridad que v-for

Nota: trate de no escribir v-if y v-for en una etiqueta

v-on: escucha de eventos de enlace

/* 
   绑定事件的语法：
      v-on:事件名= "少量的js代码(要求代码是赋值语法)"
      v-on:事件名= "函数名"
      v-on:事件名= "函数名(参数)"
    简写：
       @事件名 =  "少量的js代码(要求代码是赋值语法)"
       @事件名 =  "函数名"
       @事件名 =  "函数名(参数)"

    事件对象如何获取：
       如何阻止事件的默认行为 e.preventDefault()
       1. 调用时不传参数时，默认就在第一个形参位置就是事件对象
       2. 调用时传递参数时，需要手动的 把事件对象$event 放在最后一个参数位置

    事件修饰符：
       @事件名.prevent = '事件处理函数'
       @事件名.stop = '事件处理函数'
       @事件名.prevent.stop = '事件处理函数'

       特殊的事件如keyup 事件
    按键修改符：
       @keyup.enter = '事件处理函数'   抬起时并按下了回车键，就会指向事件处理函数
        .enter
        .delete (捕获“Delete”和“Backspace”两个按键)
        .space (空格键)
        .up   （上箭头）
        .down  （下箭头）
        .left   （左箭头）
        .right   （右箭头）

       配合功能键：
          .ctrl 键
          .alt 键
          .shift 键
          .meta 键

       需求： 按下enter键的同时按下ctrl键
          @keyup.ctrl.enter = ''
*/

v-model realiza enlaces bidireccionales en elementos de formulario: el único enlace bidireccional

Los elementos <input> y <textarea> del tipo de texto vincularán el valor predeterminado de value

Los elementos <input> y <textarea> del tipo de texto vincularán el valor predeterminado de value

<input type="text" v-model.number="text">

De forma predeterminada, siempre que el modelo v esté vinculado al cuadro de entrada, al modificar el contenido, el contenido cambiará con este

Pero a veces queremos modificar el contenido y luego modificar el contenido cuando ocurre el evento de cambio.

<input type="checkbox"  v-model="checked" />

{
   
   {checked}}   //true或者false根据复选状态

El tipo de variable de datos se divide en dos categorías (entrada):
   el tipo de valor de la variable de datos es una matriz y el valor asociado con v-model es una matriz que contiene todos los valores del valor seleccionado. El
   tipo de valor de la variable de datos no es una matriz y es un modelo v El valor asociado es un valor booleano (verdadero, falso) (alta frecuencia de uso)

<select v-model='data中变量'>
      v-model关联的是选中的选项

Use v-model en elementos de formulario comunes para realizar un enlace bidireccional de elementos de formulario

Use v-model en componentes personalizados para lograr un enlace bidireccional del contenido de los subcomponentes