Summary of Vue Basics

This Vue basics will be summarized from 4 directions and 1 project.

Basic grammar

1. Object format of data

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <div id="app">
        <p>{{student. The name}} {{student. Age}} years old this year, is {{student. Sex}}</p>
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        el: "#app".data: {
            student : {
                name : 'Joe'.age : 23.sex : 'male'}}})</script>
Copy the code

2. Bidirectional binding

Requirements: Input box input data, will be displayed to h3 elements, respectively through JS and VUE implementation

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="msg">
        <h3>{{msg}}</h3>
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    / / v - model instruction
    new Vue({
        el: "#app".data: {
            msg : ""}})</script>
Copy the code

Effect:

3. Easy implementation of bidirectional data binding (native JS to achieve vUE bidirectional binding)

<! DOCTYPEhtml>
<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></title>
</head>

<body>
    <input type="text" value="" id="ipt" oninput="iptChange(this.value)">
    <h3 id="title" ></h3>
</body>

</html>
<script>
    // Get the element
    var ipt = document.getElementById('ipt')
    var title = document.getElementById('title')

    // Declare a data object for storing data
    var data = {};

    // Add attributes to the object.
    // object.defineProperty (Object name, attribute name, configuration item)
    Object.defineProperty(data, 'msg', {
        // get method: the data to assign when defining this MSG
        get: function () {
            return Hello world
        },
        // Set method: represents what you need to do when you get the latest value
        set: function (newVal) {
            title.innerHTML = newVal
            ipt.value = newVal
            console.log(newVal); }})// console.log(data.msg);
    // Initial style
    title.innerHTML = data.msg
    ipt.value = data.msg

    // Input value changed
    function iptChange(val) {
        data.msg = val  // Modifying the data source automatically triggers the set method
    }
</script>
Copy the code

Effect drawing: the effect of vUE is the same as that of vUE

4. MVVM in Vue

1.) the View layer:

The view layer, in the front end, is often referred to as the DOM layer, which is mainly used to present various information to the user;Copy the code

2). The Model layer:

Data layer (logical layer), the data may be our custom data, or the data from the network request;Copy the code

3). The ViewModel layer:

View Model layer is the bridge between View layer and Model layer. On the one hand, it implements Data Binding, which reflects Model changes to View in real time. On the other hand, it implements DOM listening. When the DOM changes, it can change Data accordingly.Copy the code

5. v-pre

Concept: Skip compilation of this element and its children. You can use it to display the original Mustache tag. Skipping a large number of nodes without instructions speeds up compilation.

In plain English: disabling the mustache syntax shows what the {{}} should be

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <div id="app">
        <! -- V-pre: Disables the mustache syntax to show what {{}} should be -->
        <p>When you enter<span v-pre>{{msg}}</span>You can see {{MSG}}</p>
    </div>
</body>

</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    new Vue({
        el: "#app".data: {
            msg : Hello world.}})</script>
Copy the code

Effect:

6. V – HTML and v – text

Concept: The mustache syntax is the same as v-text syntax, it does not parse HTML tags, v-HTML is more powerful and can parse HTML tags

V-html can not only render data, but also parse tags

V-text and {{}} expressions render data without parsing labels

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <! The syntax of v-text is the same as that of v-text, it can't parse HTML tags.
    <div id="app">
        <ul>
            <li>{{msg}}</li>
            <li v-html="msg"></li>
            <li v-text="msg"></li>
            <div>------------</div>
            <li>{{msg}}</li>
            <li v-html="content"></li>
            <li v-text="content"></li>
        </ul> 
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app".data: {
            msg:Hello world..content:"<b>hello world</b>"}})</script>
Copy the code

Effect:

7. v-cloak

Concept: The V-cloak directive is used to hide the tag until the data is rendered so the user can’t see the mustache syntax

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <! The v-cloak command is used to cloak the tag until the data is rendered so that the user can't see the beard syntax.
    <div id="app">
        <ul>
            <li>{{msg1}}</li>
            <li v-cloak>{{msg2}}</li>
        </ul>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app".data: {
            msg1:Hello World 1.msg2:Hello World 2}})</script>
Copy the code

8. V – show and v – the if

Difference between V-show and V-if:

1). Show and hide:

V-show's display hiding controls the display property of CSS. V-if's display hiding is realized by creating and destroying DOM elements. In terms of performance, V-show has better performance, while V-IF causes performance wasteCopy the code

2). Usage Scenarios:

When you need to switch the show hide of an element frequently, use v-show when rendering the element once and never modifying it again, then both will workCopy the code

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .box{width: 100px;height: 100px;background-color: red; }</style>
</head>

<body>
    <div id="app">
        <div class="box" v-show="flag"></div>
        <div class="box" v-if="flag2"></div>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app".data: {
            flag : true.flag2 : false}})</script>
Copy the code

We can see from the console that the V-if element is destroyed and the V-show element is just style

9. v-on

Binding events to elements can be v-on directly on the element :click=” method name ()”, or simply @click=” method name ()”.

The corresponding method should be written in the methods in the Vue object. If you want to access the data in the data attribute in the instruction, you can add the attribute name of your own definition by this, this. Custom attribute name

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .box{width: 100px;height: 100px;background-color: red; }</style>
</head>

<body>
    <div id="app">
        <div>
            <button @click='btnClick'>button</button>
            <div class="box" v-show='flag'></div>
        </div> 
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app".// Data is a place where data is stored
        data: {
            flag : true
        },
        // Methods are places where methods are stored
        methods: {btnClick(){
                // Controls the display and hiding of boxes, essentially controls the true and false of boxes
                console.log(this);
                this.flag = !this.flag
            }
        }
    })
</script>
Copy the code

Effect:

Two. Common instructions

1. v-bind

V-bind: SRC =”” v-bind: SRC =””

1.1 Attribute Binding

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <div id="app">
        <a :href="link" v-text="msg"></a>
        <button @click="gobili">Switch to station B</button>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app".data: {
            link : "http://baidu.com".msg:'Do a search.'
        },
        methods: {gobili(){
                this.link = "http://bilibili.com"
                this.msg = 'Billie Billie'}}})</script>
Copy the code

Effect:

1.2 Class name binding

There are two ways to bind classes: object syntax and array syntax.

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .green{
            color: green;
        }
        .italic{
            font-style: italic;
        }
    </style>
</head>

<body>
    <div id="app">
        <p class="green">green</p>
        <p v-bind:class="{'green':isgreen}">green</p>
        <p :class="{'green':isgreen,'italic':isItalic}">green</p>
        <h3 :class="greenplay ? 'green italic' : '' ">Green -- Important</h3>
        <p :class="['green','italic']">green</p>
        <p :class="setItalic()">green</p> <! -- parentheses for immediate execution -->
        <button v-text='msg' @click="huan"></button>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app".data: {
            greenplay:true.isgreen:true.isItalic:true.msg : Switch 'false'.flag : true
        },
        methods: {setItalic(){
                return ['green'.'italic']},huan(){
                if(this.flag){
                    this.greenplay = false
                    this.msg = 'Switch to true'
                }else{
                    this.greenplay = true
                    this.msg = 'Switch to false'
                }
                this.flag = !this.flag
            }
        }
    })
</script>
Copy the code

Effect:

1.3 style binding

Note:

We can use hump syntax: for examplefont-size —> fontSize
Or a short linefont-size

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <div id="app">
        <ul>
            <li style="background-color: pink; color:orange;">Background powder, text orange</li>
            <li :style="{'background-color':bgColor,color:fontColor}">Background powder, text orange</li>
            <li :style="colorObj">Background powder, text orange</li>
            <li :style="[colorObj,fontStyle]">Background powder, text orange</li>
            <li :style="getStyle()">Background powder, text orange</li>
            <! The key value of the object is the string background-color.
            <! Add '' to string hump -->
        </ul>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app".data: {
            bgColor:'pink'.fontColor:'orange'.colorObj: {background:'pink'.color:'orange'},
            fontStyle: {fontSize:'20px'}},methods: {getStyle(){
                return [this.colorObj,this.fontStyle]
            }
        }
    })
</script>
Copy the code

Effect:

2. Loop through the use of v-for and key

V-for: v-for=”(item,index) in array name”

Item corresponds to each item in the array

Index Index (subscript)

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <! If the key is used as a unique identifier, it will lose its uniqueness if the index is used as a unique identifier. If the index is used as a unique identifier, it will change when the array changes. When the array does not change (one-time render), the key can be index or ID. When the array changes, this will cause the HTML rearrangement.
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr" :key="item.id">{{item.name}} <input type="checkbox"></li>
        </ul>
        <button @click="unshiftOne">Additional elements</button>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app".data: {
            arr: [{id:1.name: 'Joe' },
                { id:2.name: 'bill' },
                { id:3.name: 'Cathy'}},],methods: {unshiftOne(){
                this.arr.unshift({ id: 4.name: 'the dog egg'}}}})</script>
Copy the code

Renderings: Create an effect that adds elements in front of it

3. Calculate attributes

Write functions that need to be computed in computed

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <div id="app">
        <ul>
            <li>Name: {{xing}}</li>
            <li>Name: {{Ming}}</li>
            <li>Name:<input type="text" v-model="username"></li>
        </ul>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app".data: {
            xing: 'Michael'.ming: 'Jackson'.// There is no way to call data in data
            // username : xing + ming
        },
        computed: {
            username: {
                get() {
                    return this.xing + ' ' + this.ming
                },
                set(newVal) {
                    // Setters are automatically triggered when the value of username changes
                    console.log(newVal);    // String; 'Michael Jack'
                    let arr = newVal.split(' ')     // ['Michael','Jack']
                    this.xing = arr[0]
                    if (this.ming === undefined) {
                        this.ming = ' '
                        return
                    } else {
                        this.ming = arr[1]}}}}})</script>
Copy the code

Effect:

The difference between computed and methods

Computed: Execute once because computed has a cache

Methods: Execute as many times as you call them, because methods have no cache

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <div id="app">
        <ul>
            <li>Name: {{xing}}</li>
            <li>Name: {{Ming}}</li>
            <li>Name: [computed] {{username}}</li>
            <li>Name: [computed] {{username}}</li>
            <li>[methods] name: {{with username1 is ()}}</li>
            <li>[methods] name: {{with username1 is ()}}</li>
            <li>[methods] name: {{with username1 is ()}}</li>
        </ul>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app".data: {
            xing: 'Michael'.ming: 'Jackson',},computed: {
            username() {
                console.log('computed');
                return this.xing + ' ' + this.ming
            }
        },
        methods: {
            username1() {
                console.log('methods');
                return this.xing + ' ' + this.ming
            }
        }
    })
</script>
Copy the code

Effect:

4. V – model principle

The V-Model is a syntactic sugar that essentially contains two operations:

v-bindBind the value attribute of the input element
v-onThe directive binds the input event of the input element

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <div id="app">
        <! -- <input type="text" v-model="msg"> -->
        <! -- <input type="text" v-bind:value="msg" v-on:input="iptChange"> -->
        <! -- $event replaces e -->
        <input type="text" :value="msg" @input="msg=$event.target.value">   
        <h3>{{msg}}</h3>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app".data: {
            msg : Hello world
        },
        methods: {iptChange(e){   // e event object element DOM object
                / / modify MSG
                this.msg = e.target.value
            }
        }
    })
</script>
Copy the code

Effect:

5. Array operations

Array operation from just began to learn JS has been used again, do not write renderings and code, simple summary of a few commonly used…

Push: Adds from the end of the array and returns the deleted data

Pop: Deletes from the back of the array

Unshift: Adds from the front of the array, returns the deleted data

Shift: Deletes from the front of the array

-Leonard: Splice

ForEach: loop (no return value)

Map: loop (with return value)

Filter: filter

Superposition of the reduce:

6. Customize filters

Global filter

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <div id="app">
        <! < H3 > </h3> -->
        <h3>{{price | filterMoney}}</h3>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    / / filter
    // Vue. Filter (filter name, callback function)
    Vue.filter('filterMoney'.val= > {
        // toFixed number method goes after the decimal point (digit)
        // toFixed is not function
        return A '$' + Number(val).toFixed(2) + '元'
    })

    new Vue({
        el: "#app".data: {
            price: 21.8}})</script>
Copy the code

Effect:

Local filter

There is little difference between local filters and global filters, the only difference being that global filters can all be shared

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>

<body>
    <div id="app">
        <! < H3 > </h3> -->
        <h3>{{price | filterMoney}}</h3>
    </div>
</body>

</html>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app".data: {
            price: 21.8 
        },
        filters: {
            filterMoney(val) {
                return A '$' + val.toFixed(2) + '元'}}})</script>
Copy the code

Effect:

7. Local storage

LocalStorage Permanent storage

// Add data; The value of setItem is string data
localStorage.setItem('name'.'Joe');// Get data
localStorage.getItem('name'); / / zhang SAN
// Delete data
localStorage.removeItem('name');
/ / to empty
localStorage.clear();
Copy the code

SessionStorage temporary sessionStorage

// Add data; The value of setItem is string data
sessionStorage.setItem('name'.'Joe');// Get data
sessionStorage.getItem('name'); / / zhang SAN
// Delete data
sessionStorage.removeItem('name');
/ / to empty
sessionStorage.clear();
Copy the code

cookie

You need to open it with live Server

Document. cookie = 'username '

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Basic grammar

1. Object format of data

2. Bidirectional binding

3. Easy implementation of bidirectional data binding (native JS to achieve vUE bidirectional binding)

4. MVVM in Vue

5. v-pre

6. V – HTML and v – text

7. v-cloak

8. V – show and v – the if

9. v-on

Two. Common instructions

1. v-bind

2. Loop through the use of v-for and key

3. Calculate attributes

4. V – model principle

5. Array operations

6. Customize filters

7. Local storage

Instruction and value transfer

4. Webpack and scaffolding

V. Todolist [micro project]

Summary of Vue Basics

Basic grammar

1. Object format of data

2. Bidirectional binding

3. Easy implementation of bidirectional data binding (native JS to achieve vUE bidirectional binding)

4. MVVM in Vue

5. v-pre

6. V – HTML and v – text

7. v-cloak

8. V – show and v – the if

9. v-on

Two. Common instructions

1. v-bind

2. Loop through the use of v-for and key

3. Calculate attributes

4. V – model principle

5. Array operations

6. Customize filters

7. Local storage

Instruction and value transfer

4. Webpack and scaffolding

V. Todolist [micro project]

Related Posts

【 Algorithm series 】 Eight sorting algorithms (Java version)

Take a look at API design specifications

Learn about EventLoop quickly