Introdução aos fundamentos do Vue2 e instruções e filtros

1. Introdução
2. Uso básico de vue
3. Instruções e filtros

1. Introdução

1. Conceito

Vue é um conjunto de frameworks front-end para construção de interfaces de usuário.

2. Duas características do vue

2.1 Visão Orientada por Dados

Em uma página que usa vue, o vue monitorará as alterações de dados e renderizará novamente automaticamente a estrutura da página.
(1) Vantagens
Quando os dados da página mudam, a página será renderizada novamente automaticamente.
(2) Observe que
o Data Driven View é uma vinculação de dados unidirecional.

2.2 Vinculação de dados bidirecional

Ao preencher o formulário, a vinculação de dados bidirecional pode ajudar os desenvolvedores a sincronizar automaticamente o conteúdo preenchido pelo usuário com a fonte de dados sem manipular o DOM.
Na página web, o formulário do formulário é responsável pela coleta de dados e o Ajax é responsável pelo envio dos dados.
A alteração dos dados js será renderizada automaticamente na página.Quando
os dados coletados pelo formulário na página forem alterados, eles serão automaticamente obtidos pelo vue e atualizados para os dados js.
(1) Vantagens
Os desenvolvedores não precisam mais manipular manualmente os elementos DOM para obter o valor mais recente dos elementos do formulário.

3.MVVM

MVVM é o princípio fundamental do vue para realizar a visão orientada a dados e a vinculação bidirecional de dados. MVVM refere-se à camada Model, camada View e camada ViewModel.
O modelo representa a fonte de dados na qual a página atual é renderizada.
View representa a estrutura DOM renderizada pela página atual.
ViewModel representa uma instância do Vue, que é o núcleo do MVVM

2. Uso básico de vue

1. Importe o arquivo de script de script de vue.js

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

2. Declare uma área DOM para ser controlada por vue na página

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

3. Crie um objeto de instância vm (objeto de instância vue)

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

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

4. Exemplo 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. Instruções e filtros

1. O conceito de instruções

As diretivas são a sintaxe do modelo fornecida pelo Vue aos desenvolvedores para ajudá-los a renderizar a estrutura básica da página.

2. Seis tipos de instruções

(1) Instruções de renderização de conteúdo
(2) Instruções de vinculação de atributos
(3) Instruções de vinculação de eventos
(4) Instruções de vinculação bidirecional
(5) Instruções de renderização condicional
(6) Instruções de renderização de lista

3. Instruções de renderização de conteúdo

3.1 Introdução

As instruções de renderização de conteúdo são usadas para auxiliar os desenvolvedores na renderização do conteúdo de texto dos elementos DOM

3.2 Três tipos

（1）v-texto
（2）{ {}}
（3）v-html

3.3 v-texto

(1) Aplicações relacionadas

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

(2) Resultados
insira a descrição da imagem aqui

(3) Desvantagens
A diretiva v-text substituirá o valor padrão no elemento

3.4 Expressões de interpolação

(1) Apresente a sintaxe {{}}
fornecida por vue , que é usada especialmente para resolver o problema de que o texto v substituirá o conteúdo do texto padrão. O nome profissional para esta sintaxe {{}} é expressões de interpolação. Usado principalmente no desenvolvimento real, é apenas um espaço reservado para o conteúdo e não substitui o conteúdo original.
(2) Aplicações relacionadas

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

(3) Resultados
insira a descrição da imagem aqui
(4) Nota
Expressões de interpolação só podem ser usadas em nós de conteúdo de elementos, e não em nós de atributos de elementos.

3,5 v-html

(1) A introdução de
diretivas de texto v e expressões de interpolação só pode renderizar conteúdo de texto simples. Se você deseja renderizar uma string contendo tags HTML como um elemento HTML na página, você precisa usar v-html.
(2) Aplicações relacionadas

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

(3. Resultados
insira a descrição da imagem aqui

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. Instrução de vinculação de atributos v-bind

4.1 v-bind

(1) Introduza
a instrução de vinculação de atributos v-bind para vincular dinamicamente o valor do atributo ao atributo do elemento.
(2) Aplicações relacionadas

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

(3. Resultados
insira a descrição da imagem aqui

(4) v-bind também pode ser abreviado como:, o efeito é o mesmo

<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. Escreva instruções JS em interpolação e vinculação de propriedades

5.1 Cálculo com expressões de interpolação

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

resultado
insira a descrição da imagem aqui

5.2 Manipulando o conteúdo de expressões interpoladas

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

resultado
insira a descrição da imagem aqui

5.3 Conteúdo de emenda dinâmica

Durante a vinculação usando o atributo v-bind, se o conteúdo da vinculação precisar ser emendado dinamicamente, aspas simples deverão ser colocadas ao redor da string.

<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 vinculação de evento v-on

6.1 introdução v-on

Vue fornece instruções de vinculação de eventos v-on para ajudar os programadores na vinculação de ouvintes de eventos para elementos DOM.

6.2 Forma abreviada de função

: function() pode ser abreviado 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 Acesse os dados na fonte de dados através deste

(1) Aplicações relacionadas

sub(){
    
    
    this.count -= 1
}

(2) Vincular eventos e passar 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 abreviada de v-on

v-on pode ser abreviado como @

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

 等价于

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

6.6 $evento

(1) Introdução
Vue fornece uma variável integrada chamada $event, é o objeto de evento do DOM nativo . (2 ) Cenário de aplicação Quando a função começa a passar parâmetros e deseja controlar o objeto DOM, ela pode$ ser operada por meio de 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 Atenção

Objetos DOM nativos possuem eventos nativos como onclick, oninput, onkeyup, etc., que são substituídos pela forma de vinculação de eventos do vue como v-on:click, v-on:input, v-on:keyup

7. Modificador de evento @click

7.1 Introdução

Chamar event.preventDefault() ou event.stopPropagation() em um manipulador de eventos é um requisito muito comum.
.prevent evita o comportamento padrão (como evitar saltos de links, envios de formulários)
. .stop evita bolhas de eventos.
.capture aciona o manipulador de eventos atual no modo de captura.
O evento vinculado a .once é acionado apenas uma vez.
.self Aciona o manipulador de eventos somente quando event.target é o próprio elemento atual.

7.2 Código de exemplo

Evitar salto de link

<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 Introdução

Ao ouvir eventos de teclado, é necessário determinar as teclas detalhadas e você pode adicionar modificadores de teclas para eventos relacionados ao teclado.

8.2 Código de exemplo

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

9. vinculação de dados bidirecional do modelo v

9.1 Instruções de ligação de dados bidirecionais

Vue fornece instruções de vinculação de dados bidirecionais de modelo v para ajudar os desenvolvedores a obter rapidamente dados de formulário sem manipular o DOM.

9.2 Ambiente aplicável

(1)
tipo de caixa de entrada = “rádio”
tipo = “caixa de seleção”
tipo = “xxxxx”
(2) área de texto
(3) selecione

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 instrução do modelo v

10.1 Três modificadores

(1) O primeiro modificador
.number converte automaticamente o valor de entrada do usuário em um tipo numérico

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

(2) O segundo modificador
.trim filtra automaticamente os caracteres em branco iniciais e finais inseridos pelo usuário

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

(3) O terceiro modificador
.lazy é atualizado quando "change" em vez de "input"

<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. Instruções de renderização condicional

11.1 Introdução

Instruções de renderização condicional são usadas para ajudar os desenvolvedores a controlar a exibição e ocultação do DOM conforme necessário.

11.2 Duas instruções de renderização

(1) princípio v-if
: crie ou remova elementos dinamicamente a cada vez para realizar a exibição e ocultação de elementos.
Ambiente: se alguns elementos não precisarem ser exibidos por padrão quando você entra na página pela primeira vez, e esse elemento pode não precisar ser exibido posteriormente, neste momento o desempenho do v-if é melhor.

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

(2) O princípio do v-show
: adicionar ou remover dinamicamente o estilo display: none do elemento a cada vez para realizar a exibição e ocultação do elemento.
Ambiente: Se você quiser mudar o estado de exibição dos elementos com frequência, o desempenho do v-show será melhor.

<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 Atenção

No desenvolvimento real, na maioria dos casos, você não precisa considerar problemas de desempenho, apenas use v-if diretamente.

12. instruções de suporte v-if

12,1 v-outro

<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. Listar instruções de renderização

13.1 Introdução

Vue fornece instruções de renderização de lista v-for para ajudar os desenvolvedores a renderizar uma estrutura de lista baseada em um array. A diretiva v-for requer uma sintaxe especial do formulário item em itens.
Onde
items é o array a ser repetido
item é cada item a ser repetido

13.2 Índices em v-for

A diretiva v-for suporta um segundo parâmetro opcional, o índice do item atual. O formato da sintaxe é (item, índice) em itens
Nota: O item item e o índice de índice na instrução v-for são parâmetros formais, que podem ser renomeados conforme necessário.

13.3 Código de exemplo

<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 Assuntos que precisam de atenção ao usar a chave

(1) O valor da chave só pode ser uma string ou um número
(2) O valor da chave deve ser único (o valor da chave não pode ser repetido)
(3) Recomenda-se usar o valor do id atributo do item de dados como o valor da chave (porque o atributo id O valor é único)
(4) Não faz sentido usar o valor do índice como o valor da chave (porque o valor do índice não é único)
( 5) Recomenda-se especificar o valor da chave ao usar a instrução v-for (tanto para melhorar o desempenho quanto para evitar desordem no estado da 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>

Introdução básica completa, instruções e filtros do Vue2