Introducción a los conceptos básicos de Vue2 e instrucciones y filtros.

1. Introducción
2. Uso básico de vue
3. Instrucciones y filtros

1. Introducción

1. Concepto

Vue es un conjunto de marcos front-end para crear interfaces de usuario.

2. Dos características de vue

2.1 Vista basada en datos

En una página que usa vue, vue monitoreará los cambios de datos y volverá a representar automáticamente la estructura de la página.
(1) Ventajas
Cuando los datos de la página cambian, la página se volverá a representar automáticamente.
(2) Tenga en cuenta que
la Vista basada en datos es un enlace de datos unidireccional.

2.2 Enlace de datos bidireccional

Al completar el formulario, el enlace de datos bidireccional puede ayudar a los desarrolladores a sincronizar automáticamente el contenido completado por el usuario con la fuente de datos sin manipular el DOM.
En la página web, el formulario es responsable de recopilar datos y Ajax es responsable de enviar datos.
El cambio de datos js se representará automáticamente en la página.
Cuando los datos recopilados por el formulario en la página cambien, vue los obtendrá automáticamente y los actualizará a los datos js.
(1) Ventajas
Los desarrolladores ya no necesitan manipular manualmente los elementos DOM para obtener el valor más reciente de los elementos del formulario.

3、MVVM

MVVM es el principio central de vue para realizar una vista basada en datos y un enlace de datos bidireccional. MVVM se refiere a la capa Modelo, capa Vista y capa Modelo Vista.
El modelo representa la fuente de datos en la que se representa la página actual.
View representa la estructura DOM representada por la página actual.
ViewModel representa una instancia de Vue, que es el núcleo de MVVM.

2. Uso básico de vue

1. Importe el archivo de script de vue.js

<script src="./lib/vue-2.6.14.js"></script>

2. Declare un área DOM que será controlada por vue en la página

<div id="app">{
   
   {username}}</div>

3. Cree un objeto de instancia vm (objeto de instancia vue)

const vm = new Vue({
    
    
  // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
  // 相当于 view层
  el: '#app',

  // data对象就是要渲染到页面上的数据
  // 相当于 model层
  data: {
    
    
    username: 'zhangsan'
  }
})

4. Ejemplo de código completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">{
   
   {username}}</div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
      
      
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
      
      
                username: 'zhangsan'
            }
        })
    </script>
</body>
</html>

3. Instrucciones y filtros

1. El concepto de instrucciones

Las directivas son la sintaxis de plantilla proporcionada por Vue para que los desarrolladores los ayuden a representar la estructura básica de la página.

2. Seis tipos de instrucciones

(1) Instrucción de representación de contenido
(2) Instrucción de vinculación de atributos
(3) Instrucción de vinculación de eventos
(4) Instrucción de vinculación bidireccional
(5) Instrucción de representación condicional
(6) Instrucción de representación de lista

3. Instrucciones de representación de contenido

3.1 Introducción

Las instrucciones de representación de contenido se utilizan para ayudar a los desarrolladores a representar el contenido de texto de los elementos DOM.

3.2 Tres tipos

(1)v-texto
(2){ {}}
(3)v-html

3.3 texto v

(1) Aplicaciones relacionadas

 <p v-text="username">姓名：</p>

(2) Resultados
inserte la descripción de la imagen aquí

(3) Desventajas
La directiva v-text anulará el valor predeterminado en el elemento

3.4 Expresiones de interpolación

(1) Introduzca la sintaxis { {}}
proporcionada por vue , que se utiliza especialmente para resolver el problema de que v-text sobrescribirá el contenido de texto predeterminado. El nombre profesional para esta sintaxis { {}} es expresiones de interpolación. Se utiliza principalmente en el desarrollo real, es solo un marcador de posición para el contenido y no sobrescribirá el contenido original.
(2) Aplicaciones relacionadas

<p>性名：{
   
   {username}} </p>

(3) Resultados
inserte la descripción de la imagen aquí
(4) Nota
Las expresiones de interpolación solo se pueden usar en nodos de contenido de elementos, no en nodos de atributos de elementos.

3.5v-html

(1) La introducción
de directivas de texto v y expresiones de interpolación solo puede representar contenido de texto sin formato. Si desea representar una cadena que contiene etiquetas HTML como un elemento HTML en la página, debe usar v-html.
(2) Aplicaciones relacionadas

<div v-html="info"></div>

(3) Resultados
inserte la descripción de la imagen aquí

3.6 Código completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-text="username"></p>
        <p v-text="gender"></p>

        <hr>

        <p>性名：{
   
   {username}} </p>
        <p>性别：{
   
   {gender}} </p>

        <hr>

        <div v-html="info"></div>
    
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
      
      
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
      
      
                username: 'zhangsan',
                gender: '女',
                info: '<h4 style="color:red; font-weight:blod;">你好，世界</h4>'
            }
        })
    </script>
</body>
</html>

4. Instrucción de vinculación de atributos v-bind

4.1 enlace v

(1) Introduzca
la instrucción de vinculación de atributos v-bind para vincular dinámicamente el valor del atributo del atributo del elemento.
(2) Aplicaciones relacionadas

<input type="text" v-bind:placeholder="tips">

(3) Resultados
inserte la descripción de la imagen aquí

(4) v-bind también se puede abreviar como:, el efecto es el mismo

<img :src="photo" alt="" style="width:150px">

4.2 Código completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-bind:placeholder="tips">

        <hr>

        <img :src="photo" alt="" style="width:150px">
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
      
      
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
      
      
                tips: '请输入用户名',
                photo: 'https://img-home.csdnimg.cn/images/20201124032511.png'
            }
        })
    </script>
</body>
</html>

5. Escriba declaraciones JS en interpolación y enlace de propiedades.

5.1 Cálculo con expresiones de interpolación

<div>1 + 2的结果是:{
   
   {1 + 2}}</div>

resultado
inserte la descripción de la imagen aquí

5.2 Manipulación del contenido de expresiones interpoladas

<div>{
   
   {tips}},反转后为:{
   
   {tips.split('').reverse().join('')}}</div>

resultado
inserte la descripción de la imagen aquí

5.3 Contenido de empalme dinámico

Durante el enlace utilizando el atributo v-bind, si el contenido del enlace necesita ser empalmado dinámicamente, se deben colocar comillas simples alrededor de la cadena.

<div :title="'box' + index">这是一个div</div>

5.4 Código completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>1 + 2的结果是:{
   
   {1 + 2}}</div>
        <div>{
   
   {tips}},反转后为:{
   
   {tips.split('').reverse().join('')}}</div>
        <div :title="'box' + index">这是一个div</div>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
      
      
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
      
      
                tips: '请输入用户名',
                photo: 'https://img-home.csdnimg.cn/images/20201124032511.png',
                index: 3
            }
        })
    </script>
</body>
</html>

6. comando de enlace de eventos v-on

6.1 introducción v-on

Vue proporciona instrucciones de vinculación de eventos v-on para ayudar a los programadores a vincular detectores de eventos para elementos DOM.

6.2 Forma abreviada de función

: la función() se puede abreviar como ()

 add: function(){
    
    }   ===   add(){
    
    }

6.3 Código completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>count的值是: {
   
   {count}}</p>
        <button v-on:click="add">展示1</button>
        <button v-on:click="sub">展示2</button>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
      
      
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
      
      
                count: 0
            },
            // methods的作用就是定义事件的处理函数
            methods: {
      
      
                add: function(){
      
      
                    console.log('ok')
                },
                sub(){
      
      
                    console.log('触发了sub处理函数')
                }
            }
        })
    </script>
</body>
</html>

6.4 Acceder a los datos de la fuente de datos a través de este

(1) Aplicaciones relacionadas

sub(){
    
    
    this.count -= 1
}

(2) Vincular eventos y pasar parámetros

1.body里的代码
<button v-on:click="add(2)">+1</button>

2.methods里的代码
add(n){
     // vm.count += n
     this.count += n
}

(3) Códigos relacionados

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>count的值是: {
   
   {count}}</p>
        <!--绑定事件处理函数的时候，可以使用()传递参数-->
        <button v-on:click="add(2)">+1</button>
        <button v-on:click="sub">-1</button>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
      
      
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
      
      
                count: 0
            },
            // methods的作用就是定义事件的处理函数
            methods: {
      
      
                add(n){
      
      
                    // vm.count += n
                    this.count += n
                },
                sub(){
      
      
                    this.count -= 1
                }
            }
        })
    </script>
</body>
</html>

6.5 Forma corta de v-on

v-on se puede abreviar como @

 <button v-on:click="add">+1</button>

 等价于

  <button @click="add">+1</button>

6.6 $evento

(1) Introducción
Vue proporciona una variable incorporada llamada $evento, es el objeto de evento del DOM nativo . (2) Escenario de aplicación Cuando la función comienza a pasar parámetros y quiere controlar el objeto DOM, se puede operar mediante evento$ .
(3) Códigos relacionados

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>count的值是: {
   
   {count}}</p>
        <button v-on:click="add(1, $event)">+1</button>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
      
      
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
      
      
                count: 0
            },
            // methods的作用就是定义事件的处理函数
            methods: {
      
      
                add(n,e){
      
      
                    // vm.count += n
                    this.count += n

                    // 判断this.count的值是否为偶数
                    if(this.count % 2 === 0){
      
      
                        // 偶数
                        e.target.style.backgroundColor = 'red'
                    } else {
      
      
                        // 奇数
                        e.target.style.backgroundColor = ''
                    }
                },
            }
        })
    </script>
</body>
</html>

6.7 Atención

Los objetos DOM nativos tienen eventos nativos como onclick, oninput, onkeyup, etc., que se reemplazan por el formulario de enlace de eventos de vue como v-on:click, v-on:input, v-on:keyup

7. Modificador de evento @click

7.1 Introducción

Llamar a event.preventDefault() o event.stopPropagation() en un controlador de eventos es un requisito muy común.
.prevent evita el comportamiento predeterminado (como evitar saltos de enlaces, envíos de formularios)
.stop evita la propagación de eventos.
.capture activa el controlador de eventos actual en modo de captura.
El evento vinculado a .once solo se activa una vez.
.self Activa el controlador de eventos solo cuando event.target es el elemento actual.

7.2 Código de muestra

Prevenir salto de enlace

<a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>

7.3 Código completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
      
      
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
      
      
                count: 0
            },
            // methods的作用就是定义事件的处理函数
            methods: {
      
      
                show(){
      
      
                    console.log("点击了链接")
                }
            }
        })
    </script>
</body>
</html>

8. Modificador de tecla @keyup

8.1 Introducción

Al escuchar eventos de teclado, es necesario determinar las teclas detalladas y puede agregar modificadores de teclas para eventos relacionados con el teclado.

8.2 Código de muestra

<input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">

8.3 Código completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
      
      
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
      
      
                
            },
            // methods的作用就是定义事件的处理函数
            methods: {
      
      
                clearInput(e){
      
      
                    console.log("触发了clearInput方法")
                    e.target.value = ''
                },
                commitAjax(){
      
      
                    console.log('触发了commitAjax请求')
                }
            }
        })
    </script>
</body>
</html>

Nueve, enlace de datos bidireccional del modelo v

9.1 Instrucciones de enlace de datos bidireccionales

Vue proporciona instrucciones de enlace de datos bidireccionales de modelo v para ayudar a los desarrolladores a obtener rápidamente datos del formulario sin manipular el DOM.

9.2 Entorno aplicable

(1)
tipo de cuadro de entrada = “radio”
tipo = “casilla de verificación”
tipo = “xxxxx”
(2) área de texto
(3) seleccionar

9.3 Códigos relacionados

<p>用户的名字是：{
   
   {username}}</p>
<input type="text" v-model="username">
<hr>
<select v-model="city">
    <option value="">请选择城市</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
</select>

9.4 Código completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>用户的名字是：{
   
   {username}}</p>
        <input type="text" v-model="username">
        <hr>
        <select v-model="city">
            <option value="">请选择城市</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
        </select>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
      
      
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
      
      
                username:'zhangsan',
                city: '2'
            },
            // methods的作用就是定义事件的处理函数
            methods: {
      
      
                
            }
        })
    </script>
</body>
</html>

10. modificador de instrucción del modelo v

10.1 Tres modificadores

(1) El primer modificador
.number convierte automáticamente el valor de entrada del usuario en un tipo numérico

 <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{
   
   {n1 + n2}}</span>

(2) El segundo modificador
.trim filtra automáticamente los caracteres en blanco iniciales y finales ingresados por el usuario

<input type="text" v-model.trim="username">

(3) El tercer modificador
.lazy se actualiza cuando "cambia" en lugar de "entrada"

<input type="text" v-model.lazy="username">

10.2 Código completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{
   
   {n1 + n2}}</span>
        <hr>
        <input type="text" v-model.trim="username">
        <button @click="showName">获取用户名</button>
        <hr>
        <input type="text" v-model.lazy="username">
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
      
      
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
      
      
                username: "lisi",
                n1: 1,
                n2: 2
            },
            // methods的作用就是定义事件的处理函数
            methods: {
      
      
                showName(){
      
      
                    console.log(`用户名是："${ 
        this.username}"`)
                }
            }
        })
    </script>
</body>
</html>

11. Instrucciones de renderizado condicional

11.1 Introducción

Las instrucciones de representación condicional se utilizan para ayudar a los desarrolladores a controlar la visualización y ocultación de DOM según sea necesario.

11.2 Dos instrucciones de renderizado

(1) Principio v-if
: cree o elimine elementos dinámicamente cada vez para realizar la visualización y ocultación de elementos.
Entorno: si algunos elementos no necesitan mostrarse de forma predeterminada cuando ingresa por primera vez a la página, y es posible que este elemento no necesite mostrarse más adelante, en este momento v-si el rendimiento es mejor.

<p v-if="flag">这是被v-if控制的元素</p>

(2) El principio de v-show
: agregue o elimine dinámicamente la visualización: ningún estilo para el elemento cada vez para realizar la visualización y ocultación del elemento.
Entorno: si desea cambiar el estado de visualización de los elementos con frecuencia, el rendimiento de v-show será mejor.

<p v-show="flag">这是被v-show控制的元素</p>

11.3 Código completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p v-if="flag">这是被v-if控制的元素</p>
        <p v-show="flag">这是被v-show控制的元素</p>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
      
      
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
      
      
                // 如果 flag 为true,则显示被控制的元素，如果为false则隐藏被控制的元素
                flag: true
            },
            // methods的作用就是定义事件的处理函数
            methods: {
      
      
               
            }
        })
    </script>
</body>
</html>

11.4 Atención

En el desarrollo real, en la mayoría de los casos, no es necesario considerar los problemas de rendimiento, simplemente use v-if directamente.

12. v-if instrucciones de apoyo

12.1 v-más

<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>

12.2 Código completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-if="type === 'A'">优秀</div>
        <div v-else-if="type === 'B'">良好</div>
        <div v-else-if="type === 'C'">一般</div>
        <div v-else>差</div>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
      
      
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
      
      
                // 如果 flag 为true,则显示被控制的元素，如果为false则隐藏被控制的元素
                flag: true,
                type: 'A'
            },
            // methods的作用就是定义事件的处理函数
            methods: {
      
      
               
            }
        })
    </script>
</body>
</html>

13. Lista de instrucciones de renderizado

13.1 Introducción

Vue proporciona instrucciones de representación de listas v-for para ayudar a los desarrolladores a representar una estructura de lista basada en una matriz. La directiva v-for requiere una sintaxis especial del elemento de formulario en elementos.
Donde
items es la matriz que se va a buclear
item es cada elemento que se va a buclear

13.2 Índices en v-for

La directiva v-for admite un segundo parámetro opcional, el índice del elemento actual. El formato de sintaxis es (elemento, índice) en elementos.
Nota: El elemento elemento y el índice de índice en la instrucción v-for son parámetros formales, cuyo nombre se puede cambiar según sea necesario.

13.3 Código de muestra

<tr v-for="(item,index) in list" :key="item.id" :title="item.name + index">
    <td>{
   
   {index}}</td>
    <td>{
   
   {item.id}}</td>
    <td>{
   
   {item.name}}</td>
</tr>

13.4 Asuntos que requieren atención al usar la clave

(1) El valor de la clave solo puede ser una cadena o un número
(2) El valor de la clave debe ser único (el valor de la clave no se puede repetir)
(3) Se recomienda utilizar el valor de la identificación atributo del elemento de datos como el valor de la clave (porque el atributo id El valor es único)
(4) No tiene sentido usar el valor de Índice como el valor de la clave (porque el valor del índice no es único)
( 5) Se recomienda especificar el valor de la clave cuando se utiliza la instrucción v-for (tanto para mejorar el rendimiento como para evitar el desorden del estado de la lista)

13.5 Código completo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
    <div id="app">
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <th>索引</th>
                <th>ID</th>
                <th>姓名</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="item.id" :title="item.name + index">
                    <td>{
   
   {index}}</td>
                    <td>{
   
   {item.id}}</td>
                    <td>{
   
   {item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.14.js"></script>
    <!--2.创建Vue的实例对象-->
    <script>
        // 创建Vue的实例对象
        // 相当于 ViewModel层
        const vm = new Vue({
      
      
            // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
            // 相当于 view层
            el: '#app',

            // data对象就是要渲染到页面上的数据
            // 相当于 model层
            data: {
      
      
                list:[
                    {
      
      id:1,name:'张三'},
                    {
      
      id:2,name:'李四'},
                    {
      
      id:3,name:'王五'}
                ]
            },
            // methods的作用就是定义事件的处理函数
            methods: {
      
      
               
            }
        })
    </script>
</body>
</html>

Introducción básica completa, instrucciones y filtros de Vue2.