Introduction to the basics of Vue2 and instructions and filters

1. Introduction
2. Basic usage of vue
3. Instructions and filters

1. Introduction

1. Concept

Vue is a set of front-end frameworks for building user interfaces.

2. Two features of vue

2.1 Data Driven View

In a page that uses vue, vue will monitor data changes and automatically re-render the structure of the page.
(1) Advantages
When the page data changes, the page will be automatically re-rendered.
(2) Note that
Data Driven View is a one-way data binding.

2.2 Two-way data binding

When filling in the form, two-way data binding can assist developers to automatically synchronize the content filled by the user to the data source without manipulating the DOM.
In the web page, the form form is responsible for collecting data, and Ajax is responsible for submitting data.
The change of js data will be automatically rendered to the page.
When the data collected by the form on the page changes, it will be automatically obtained by vue and updated to the js data.
(1) Advantages
Developers no longer need to manually manipulate DOM elements to obtain the latest value of form elements.

3、MVVM

MVVM is the core principle of vue to realize data-driven view and two-way data binding. MVVM refers to the Model layer, View layer and ViewModel layer.
Model represents the data source on which the current page is rendered.
View represents the DOM structure rendered by the current page
ViewModel represents an instance of Vue, which is the core of MVVM

2. Basic usage of vue

1. Import the script script file of vue.js

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

2. Declare a DOM area to be controlled by vue in the page

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

3. Create a vm instance object (vue instance object)

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

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

4. Sample complete code

<!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. Instructions and filters

1. The concept of instructions

Directives are the template syntax provided by Vue for developers to assist developers in rendering the basic structure of the page.

2. Six types of instructions

(1) Content rendering instruction
(2) Attribute binding instruction
(3) Event binding instruction
(4) Two-way binding instruction
(5) Conditional rendering instruction
(6) List rendering instruction

3. Content rendering instructions

3.1 Introduction

Content rendering instructions are used to assist developers in rendering the text content of DOM elements

3.2 Three types

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

3.3 v-text

(1) Related applications

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

(2) Results
insert image description here

(3) Disadvantages
The v-text directive will override the default value in the element

3.4 Interpolation expressions

(1) Introduce the { {}} syntax
provided by vue , which is specially used to solve the problem that v-text will overwrite the default text content. The professional name for this { {}} syntax is interpolation expressions. Mostly used in actual development, it is just a placeholder for the content and will not overwrite the original content.
(2) Related applications

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

(3) Results
insert image description here
(4) Note
Interpolation expressions can only be used in content nodes of elements, not attribute nodes of elements.

3.5 v-html

(1) Introducing
v-text directives and interpolation expressions can only render plain text content. If you want to render a string containing HTML tags as an HTML element on the page, you need to use v-html.
(2) Related applications

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

(3) Results
insert image description here

3.6 Complete code

<!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. v-bind attribute binding instruction

4.1 v-bind

(1) Introduce
the v-bind attribute binding instruction to dynamically bind the attribute value for the attribute of the element.
(2) Related applications

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

(3) Results
insert image description here

(4) v-bind can also be abbreviated as: , the effect is the same

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

4.2 Complete code

<!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. Write JS statements in interpolation and property binding

5.1 Calculation with interpolation expressions

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

result
insert image description here

5.2 Manipulating the contents of interpolated expressions

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

result
insert image description here

5.3 Dynamic splicing content

During binding using the v-bind attribute, if the binding content needs to be spliced dynamically, single quotation marks should be wrapped around the string.

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

5.4 Complete code

<!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. v-on event binding command

6.1 v-on introduction

Vue provides v-on event binding instructions to assist programmers in binding event listeners for DOM elements.

6.2 Shorthand form of function

: function() can be abbreviated as ()

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

6.3 Complete code

<!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 Access the data in the data source through this

(1) Related applications

sub(){
    
    
    this.count -= 1
}

(2) Bind events and pass parameters

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

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

(3) Related codes

<!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 Short form of v-on

v-on can be abbreviated as @

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

 等价于

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

6.6 $event

(1) Introduction
Vue provides a built-in variable called $event, it is the event object of native DOM . (2 ) Application scenario When the function starts to pass parameters and wants to control the DOM object, it can$ be operated through event.
(3) Related codes

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

Native DOM objects have native events such as onclick, oninput, onkeyup, etc., which are replaced by vue's event binding form as v-on:click, v-on:input, v-on:keyup

7. @click event modifier

7.1 Introduction

Calling event.preventDefault() or event.stopPropagation() in an event handler is a very common requirement.
.prevent prevents the default behavior (such as preventing link jumps, form submissions)
.stop prevents event bubbling.
.capture triggers the current event handler in capture mode.
The event bound to .once is only triggered once.
.self Triggers the event handler only when event.target is the current element itself.

7.2 Sample code

Prevent link jump

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

7.3 Complete code

<!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. @keyup key modifier

8.1 Introduction

When listening to keyboard events, it is necessary to determine the detailed keys, and you can add key modifiers for keyboard-related events.

8.2 Sample code

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

8.3 Complete code

<!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. v-model two-way data binding

9.1 Two-way data binding instructions

Vue provides v-model two-way data binding instructions to help developers quickly obtain form data without manipulating the DOM.

9.2 Applicable environment

(1) input box
type=“radio”
type=“checkbox”
type=“xxxxx”
(2) textarea
(3) select

9.3 Related codes

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

<!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. v-model instruction modifier

10.1 Three modifiers

(1) The first modifier
.number automatically converts the user's input value into a numeric type

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

(2) The second modifier
.trim automatically filters the leading and trailing blank characters entered by the user

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

(3) The third modifier
.lazy is updated when "change" instead of "input"

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

10.2 Complete code

<!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. Conditional rendering instructions

11.1 Introduction

Conditional rendering instructions are used to assist developers to control the display and hiding of DOM as needed.

11.2 Two Rendering Instructions

(1) v-if
principle: create or remove elements dynamically each time to realize the display and hiding of elements.
Environment: If some elements do not need to be displayed by default when you first enter the page, and this element may not need to be displayed later, at this time v-if performance is better.

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

(2) The principle of v-show
: dynamically add or remove the display: none style for the element each time to realize the display and hiding of the element.
Environment: If you want to switch the display state of elements frequently, the performance of v-show will be better.

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

11.3 Complete code

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

In actual development, in most cases, you don't need to consider performance issues, just use v-if directly.

12. v-if supporting instructions

12.1 v-else

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

<!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. List rendering instructions

13.1 Introduction

Vue provides v-for list rendering instructions to assist developers to render a list structure based on an array. The v-for directive requires a special syntax of the form item in items.
Where
items is the array to be looped
item is each item to be looped

13.2 Indexes in v-for

The v-for directive supports an optional second parameter, the index of the current item. The syntax format is (item, index) in items
Note: The item item and Index index in the v-for instruction are both formal parameters, which can be renamed as needed.

13.3 Sample code

<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 Matters needing attention when using key

(1) The value of the key can only be a string or a number
(2) The value of the key must be unique (the value of the key cannot be repeated)
(3) It is recommended to use the value of the id attribute of the data item as the value of the key (because the id attribute The value is unique)
(4) It is meaningless to use the value of Index as the value of the key (because the value of index is not unique)
(5) It is recommended to specify the value of the key when using the v-for instruction (both to improve performance , and prevent list state disorder)

13.5 Complete code

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

Complete basic introduction and instructions and filters of Vue2