vue basic grammar

Characteristics of vue

  • Low threshold and quick start:
    It's easy to learn. As long as you know a little about HTML, CSS and JavaScript, you can get started quickly Vue

  • Lightweight framework:
    Compared with about 35kb after React compression; Angular compression is about 60Kb; Vue is about 20kb after compression, so it is lighter.

  • Bidirectional data binding:
    Declarative rendering is the main embodiment of two-way binding of data, and it is also the core of Vue.js. It allows the integration of declarative rendering of data into DOM using concise template syntax.

  • Rich instruction system:
    Vue.js interacts with the page mainly through built-in instructions. The role of the instructions is to apply some behaviors to the DOM when the value of its expression changes.

  • Componentization:
    Component is one of the most powerful functions of Vue.js. Components can extend HTML elements and encapsulate reusable code.

Basic grammar

Basic use

<!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>
    <!-- introduce vue Library file-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <h1>{{name}}</h1>
    </div>
    
    <!-- establish vue example -->
    <script>
        // vm is the vue object
        let vm = new Vue({
            el: "#App ", / / which element does Vue want to manage
            data: {
                // Status is also called data
                // key :  value
                name: "Li Si"
            }
        })

    </script>
</body>
</html>

Data and methods

data attribute

The data option of a component is a function. Vue calls this function in the process of creating new component instances. It should return an object, and Vue will wrap it up through the responsive system and store it in the component instance in $data.

let vm = new Vue({
            el: "#App ", / / which element does Vue want to manage
            data: {
                // Status is also called data
                // key :  value
                name: "Li Si"
            }
        })

methods property

In Vue, in order to realize business, we must use many methods. At this time, we can use the methods option, which is an object. Vue automatically binds this for methods. In order to ensure the correct point of this when a method is used as an event listener or callback function, the arrow function cannot be used when defining a method in methods.

<!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>
    <!-- introduce vue Library file-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <h1 @click="handleClick">{{name}}</h1>
    </div>
    
    <!-- establish vue example -->
    <script>
        // vm is the vue object
        let vm = new Vue({
            el: "#App ", / / which element does Vue want to manage
            data: {
                // Status is also called data
                // key :  value
                name: "Li Si"
            },
            // Method area
            methods: {
                handleClick() {
                    alert('I was clicked')
                }
            }
        })

    </script>
</body>
</html>

instructions

Directives are a special attribute with v-prefix. When the value of an expression changes, it will act on the DOM responsively.

In Vue, common instructions are as follows:

              ┌───────► Content rendering instructions
              │
              ├───────► Conditional rendering instruction
              │
              ├───────► List rendering instructions
              │
directive ────┼───────► Attribute binding instruction
              │
              ├───────► Event binding instruction
              │
              ├───────► Bidirectional binding instruction
              │
              └───────► Custom instruction

Content rendering instructions

<!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>
    <!-- introduce vue Library file-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <h1 v-text="message">asdasd</h1>
        <p>{{name}}</p>
        <h2 v-html="message">ffffff</h2>
    </div>
    
    <!-- establish vue example -->
    <script>
        // Content rendering instructions
        // Function: render data in data
        // 1. v-text is equivalent to innerText in DOM. The label cannot be translated to cover the original content
        // 2. {{}} labels that cannot be translated will not cover the original content (used a lot in development), which is equivalent to the splicing of strings
        // 3. v-html can translate tags and cover the original content, which is equivalent to innerHTML in DOM
        let vm = new Vue({
            el: "#app",
            data: {
                name: "Li Si",
                message: "<em>I don't want to get up today</em>"
            }
        })

    </script>
</body>
</html>

v-text

  • The v-text instruction overrides the default content within the element
  • The v-text instruction cannot parse a label

Interpolation expression

  • Compared with the v-text instruction, interpolation expression is more commonly used in development, because it does not overwrite the default text content in the element.

be careful

Interpolation expressions cannot be used in the properties of labels

v-html

  • If you want to render the string containing the HTML tag as the HTML element of the page, you need to use the v-html instruction.

Conditional rendering instruction

v-if/v-else-if/v-else

Conditional rendering instructions are used to assist developers to control whether virtual DOM is compiled into real DOM on demand.

<!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>
    <!-- introduce vue Library file-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <p v-if="score == 'A'">excellent</p>
        <p v-else-if="score == 'B'">good</p>
        <p v-else-if="score == 'C'">secondary</p>
        <p v-else="score == 'D'">commonly</p>
    </div>
    
    <!-- establish vue example -->
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: "Li Si",
                message: "<em>I don't want to get up today</em>",
                score: 'B'
            }
        })
    </script>
</body>
</html>

v-show

The v-show instruction is used to assist developers to control the DOM style display:none or display:block on demand

<!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>
    <!-- introduce vue Library file-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <!-- <p v-if="score == 'A'">excellent</p>
        <p v-else-if="score == 'B'">good</p>
        <p v-else-if="score == 'C'">secondary</p>
        <p v-else="score == 'D'">commonly</p> -->

        <p v-show="score == 'A'">excellent</p>
        <p v-show="score == 'B'">good</p>
        <p v-show="score == 'C'">secondary</p>
        <p v-show="score == 'D'">commonly</p>
    </div>
    
    <!-- establish vue example -->
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: "Li Si",
                message: "<em>I don't want to get up today</em>",
                score: 'B'
            }
        })
    </script>
</body>
</html>

The difference between v-if and v-show

  • v-if
  • v-show

common ground

  • Both v-if and v-show can display and hide elements

difference

  • v-show simply controls the display attribute of the element, while v-if is conditional rendering (if the condition is true, the element will be rendered, if the condition is false, the element will be destroyed);
  • v-show has higher first rendering overhead, while v-if has much lower first rendering overhead;
  • v-if has higher switching overhead and v-show has lower switching overhead
  • v-if has supporting v-else-if and v-else, but v-show does not
  • v-if can be used with template, but v-show cannot

WARNING

  • The v-else instruction must be used with the v-if instruction, otherwise it will not be recognized
  • The v-else-if instruction must be used with the v-if instruction, otherwise it will not be recognized

List rendering instructions

We can use the v-for instruction to render a list based on an array. The v-for instruction requires a special syntax in the form of item in items, where items is the source data array and item is the alias of the array element being iterated

Rendering a set of elements with v-for

<!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>
    <!-- introduce vue Library file-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <ul>
            <li v-for="item in hobby">{{item.a}}</li>
        </ul>
    </div>
    
    <!-- establish vue example -->
    <script>
        
        let vm = new Vue({
            el: "#app",
            data: {
                name: "Li Si",
                message: "<em>I don't want to get up today</em>",
                hobby: [{ id: 1,a: "Play basketball", flag: true},{ id: 2,a: "play football", flag: false},{ id: 3,a: "Play games", flag: true},{ id: 4,a: "sketch ", flag: true}]
            }
        })

    </script>
</body>
</html>

Displaying indexes and elements with v-for

<!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>
    <!-- introduce vue Library file-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <ul>
            <li v-for="(item, index) in hobby">{{index}}---{{item.a}}</li>
        </ul>
    </div>
    
    <!-- establish vue example -->
    <script>
        
        let vm = new Vue({
            el: "#app",
            data: {
                name: "Li Si",
                message: "<em>I don't want to get up today</em>",
                hobby: [{ id: 1,a: "Play basketball", flag: true},{ id: 2,a: "play football", flag: false},{ id: 3,a: "Play games", flag: true},{ id: 4,a: "sketch ", flag: true}]
            }
        })

    </script>
</body>
</html>

Add key to v-for

When Vue is updating the list of elements rendered using v-for, it defaults to update in place However, this default performance optimization strategy will prevent the stateful list from being updated correctly. In order to give Vue a prompt so that it can track the identity of each node, so as to improve the rendering performance on the premise of ensuring that the stateful list is updated correctly. At this time, it is necessary to provide a unique key attribute for each item

<!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>
    <!-- introduce vue Library file-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <ul>
            <li v-for="(item, index) in hobby" :key="item.id">{{index}}---{{item.a}}</li>
        </ul>
    </div>
    
    <!-- establish vue example -->
    <script>
        
        let vm = new Vue({
            el: "#app",
            data: {
                name: "Li Si",
                message: "<em>I don't want to get up today</em>",
                hobby: [{ id: 1,a: "Play basketball", flag: true},{ id: 2,a: "play football", flag: false},{ id: 3,a: "Play games", flag: true},{ id: 4,a: "sketch ", flag: true}]
            }
        })

    </script>
</body>
</html>

WARNING

  • The value of key can only be string or numeric type
  • The value of the key must be unique (that is, the value of the key cannot be repeated)
  • It is recommended to take the value of the data item id attribute as the value of the key (because the value of the id attribute is unique)
  • It makes no sense to use the value of index as the value of key (because the value of index is not unique)
  • It is recommended to specify the value of key when using the v-for instruction (not only to improve performance, but also to prevent list state disorder)

v-for is used with v-if

When they are in the same node, the priority of v-if is higher than that of v-for, which means that v-if will not have access to the variables in v-for:
So you can move v-for to the template tag to fix it

<!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>
    <!-- introduce vue Library file-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <ul>
            <template v-for="(item,index) in hobby">
                <li V-if="item.flag == true" :key="item.id">{{index}}---{{item.a}}</li>
            </template>
        </ul>
    </div>
    
    <!-- establish vue example -->
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: "Li Si",
                message: "<em>I don't want to get up today</em>",
                hobby: [{ id: 1,a: "Play basketball", flag: true},{ id: 2,a: "play football", flag: false},{ id: 3,a: "Play games", flag: true},{ id: 4,a: "sketch ", flag: true}]
            }
        })

    </script>
</body>
</html>


Tags: Vue

Posted on Mon, 29 Nov 2021 06:16:29 -0500 by daz_effect