Vue.js

Introduction

Vue (pronounced /vju?/, similar to view) is a progressive framework for building user interfaces.

JavaScript framework: Compared with libraries, frameworks are more powerful, but using frameworks must abide by its rules.
Simplify DOM operations: Vue has special grammatical modifications for DOM elements, which can be used directly.
Responsive data-driven: Data changes and pages are updated synchronously.

Official Documentation

The author of Vue is Chinese, and the document support for Chinese is good:

v2.x
v3.x

Vue Basics

Get started

Import the development version of Vue

Development environment version, including helpful command line warnings
```

<script src="//i2.wp.com/cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script src="../vue.js"></script>
```
- It should be noted that using this address will cause cross-domain problems, you can replace the CDN source without this problem or import locally

Production version, optimized for size and speed

<!-- production version, optimized for size and speed -->
<script src="//i2.wp.com/cdn.jsdelivr.net/npm/vue@2"></script>
<!-- or quote local -->
<script src="../vue.min.js"></script>

Create a Vue instance object
Use template syntax to render data to the page
- Declarative rendering
- interpolation expression

The first Vue program

<!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">
        {<!-- -->{message}}
    </div>
    <!-- Development environment version, including helpful command line warnings -->
    <script src="//i2.wp.com/cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({<!-- -->
            el: '#app',
            data: {<!-- -->
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

Interpolation expression

The most common form of data binding is text interpolation using the “Mustache” syntax (double braces):

{<!-- -->{data name}}

el mount point

Set the elements managed by the Vue example through the CSS selector, and the part decorated by two curly braces inside the hit element will be replaced by the data of the same name in the Vue instance.

Scope of action

The scope of action only takes effect inside the element hit by the Vue instance, and it can take effect for multiple mount points, and the mount points in nested elements also take effect.

<body>
    {<!-- -->{message}}
    <div id="app">
        {<!-- -->{message}}<br>
        {<!-- -->{message}}
        <div>{<!-- -->{message}}</div>
    </div>
</body>

var app = new Vue({<!-- -->
    el: '#app',
    data: {<!-- -->
        message: 'Hello Vue!'
    }
})

Available selectors

The id selector, class selector, and tag selector can all be used. It should be noted that if there are multiple identical tags when using the tag selector, only the first one will be matched. It is recommended to use the id selector.

<body>
    <div id="app" class="app">
        {<!-- -->{message}}
    </div>
    <div>
        {<!-- -->{message}}
    </div>
</body>

var app = new Vue({<!-- -->
    // el: '#app', // id selector can be used
    // el:".app", // class selector can be used
    el:"div",
    data: {<!-- -->
        message: 'Hello Vue!'
    }
})

Settable DOM elements

Only double labels are supported (that is, labels with a beginning and an end), and single labels are not supported (the mount point is not written at all). Note that html tags and body tags are not supported

<body id="app">
    <div id="app" class="app">
        {<!-- -->{message}}
    </div>
</body>

var app = new Vue({<!-- -->
    el: '#app',
    data: {<!-- -->
        message: 'Hello Vue!'
    }
})

data data object

The data used in Vue is defined in data, which not only supports strings, but also supports other complex data types, just follow the js syntax.

<body>
    <div id="app" class="app">
        {<!-- -->{message}}
        <h1>{<!-- -->{map.a}} &nbsp;{<!-- -->{map.b}}</h1>
        <ul>
            <li>{<!-- -->{array[0]}}</li>
            <li>{<!-- -->{array[1]}}</li>
            <li>{<!-- -->{array[2]}}</li>
        </ul>
    </div>
</body>

var app = new Vue({<!-- -->
    el: '#app',
    data: {<!-- -->
        message: 'Hello Vue!',
        map:{<!-- -->
            a:"a_value",
            b:"b_value"
        },
        array:["1","2","3"]
    }
})

Vue directive

Directives are special attributes prefixed with v-. The value of a directive attribute is expected to be a single JavaScript expression (v-for is an exception, which we discuss later). The responsibility of the directive is to react to the DOM with its associated effects when the value of the expression changes.

v-text

Used to populate data into labels, but replace them as a whole.

<body>
    <div id="app" class="app">
        <h1 v-text="message1 + '!'">Original content</h1>
        <h1 v-text="message2 + '!'">Original content</h1>
        <h1>{<!-- -->{message1 + '!'}}Original content</h1>
    </div>
</body>

var app = new Vue({<!-- -->
    el: '#app',
    data: {<!-- -->
        message1: 'Hello Vue!',
        message2: 'Hello World!'
    }
})

v-html

The v-text function can also be implemented, but HTML code can also be inserted and parsed

<body>
    <div id="app" class="app">
        <p v-html="content1">Original content</p>
        <p v-html="content2">Original content</p>
        <p>{<!-- -->{content2}}Original content</p>
    </div>
</body>

var app = new Vue({<!-- -->
    el: '#app',
    data: {<!-- -->
        content1: 'Hello Vue!',
        content2: '<a href="http://www.baidu.com">Baidu, you will know</a>'
    }
})

v-on

Insert an event, and the binding method is written in methods, which can realize data modification.

<body>
    <div id="app" class="app">
        <input type="button" value="v-on command" v-on:click="fun1">
        <input type="button" value="v-on abbreviation" @click="fun2"> <!-- abbreviation -->
        <h3 @dblclick="change('is your father')">{<!-- -->{message}}</h3>
    </div>
</body>

var app = new Vue({<!-- -->
    el: '#app',
    data:{<!-- -->
        message:"I"
    },
    methods: {<!-- -->
        fun1:function(){<!-- -->
            alert("Hello");
        },
        fun2:function(){<!-- -->
            alert("World!");
        },
        change:function(p1){<!-- -->
            this.message += p1;
        }
    }
})

v-show

Switches the display and hiding of elements according to the true or false of the expression, and manipulates the style.

<body>
    <div id="app" class="app">
        <input type="button" value="LED switch" @click="LED">
        <input type="button" value="age + + " @click="AgeUp"><br>
        <img v-show="open" src="../images/LED_OPEN.jpg" alt=""><br>
        <img v-show="close" src="../images/LED_OFF.jpg" alt=""><br>
        <img v-if="age>=18" src="../images/FBI_Warning.jpg" alt="" height="100">
    </div>
</body>

var app = new Vue({<!-- -->
    el: '#app',
    data:{<!-- -->
        open: false,
        close: true,
        age: 17
    },
    methods: {<!-- -->
        LED: function(){<!-- -->
            this.open=!this.open;
            this.close=!this.close;
        },
        AgeUp: function(){<!-- -->
            this.age++;
        }
    }
})

——》

v-if

Switches the display and hiding of elements according to the true and false expressions, and manipulates DOM elements.

As in the above example, the implementation effect is the same, but the implementation method is different:

———》

v-bind

Used to bind element attributes

<body>
    <div id="app" class="app">
        <img v-bind:src="imgSrc" alt="" height="150"><br>
        <img :src="imgSrc" alt="" height="150" > <!-- short form -->
    </div>
</body>

var app = new Vue({<!-- -->
    el: '#app',
    data:{<!-- -->
        imgSrc:"../images/FBI_Warning.jpg"
    }
})

v-for

The for-each loop in the Vue world.

<body>
    <div id="app" class="app">
        <ul>
            <li v-for="(item, index) in array">
                {<!-- -->{index + 1}}array:{<!-- -->{item}}
            </li>
        </ul>
    </div>
</body>

var app = new Vue({<!-- -->
    el: '#app',
    data:{<!-- -->
        array:["a","b","c"]
    }
})

v-model

Get and set the value of form elements (two-way data binding)

<body>
    <div id="app" class="app">
        <input type="text" v-model="message" @keyup.enter="GetMessage">
        <h3>{<!-- -->{message}}</h3>
    </div>
</body>

var app = new Vue({<!-- -->
    el: '#app',
    data: {<!-- -->
        message: "I"
    },
    methods: {<!-- -->
        GetMessage: function () {<!-- -->
            alert(this. message);
        }
    }
})

——》

axios

Common network request library

Import

<script src="//i2.wp.com/unpkg.com/axios/dist/axios.min.js"></script>

Basic Grammar

get

axios.get(address? query character) //The query character format is key=value & amp;key2=value2 & amp;key·······

post

axios.post(address, parameter object) //The parameter object format is {key=value, key2=value2, key·····}

then

axios.get(address? query character).then(function(response){<!-- -->}, function(err){<!-- -->});
axios.post(address, parameter object).then(function(response){<!-- -->}, function(err){<!-- -->});

Example:

<body>
    <input type="button" value="get" class="get">
    <input type="button" value="post" class="post">
</body>

/*
Interface 1: Random Jokes
Request address: https://autumnfish.cn/api/joke/list
Request method: get
Request parameter: num (number of jokes, number)
Response content: random joke
*/
document.querySelector(".get").onclick = function(){<!-- -->
    axios.get("https://autumnfish.cn/api/joke/list?num=2")
        .then(function(response){<!-- -->
        console. log(response);
    }, function(err){<!-- -->
        console. log(err);
    })
}
/*
Interface 2: User Registration
Request address: https://autumnfish.cn/api/user/reg
Request method: post
Request parameter: username (username, string)
Response content: registration success or failure
*/
document.querySelector(".post").onclick = function(){<!-- -->
    axios.post("https://autumnfish.cn/api/user/reg",{<!-- -->username:"Kiang"})
        .then(function(response){<!-- -->
        console. log(response);
    }, function(err){<!-- -->
        console. log(err);
    })
}

Vue + axios

Using Vue combined with axios is easier to remember and easier than using native syntax.

<body>
    <div id="app">
        <input type="button" value="Get Joke" @click='getJoke'>
        <p>{<!-- -->{joke}}</p>
    </div>
</body>

var app = new Vue({<!-- -->
    el:"#app",
    data:{<!-- -->
        joke:"Random joke"
    },
    methods: {<!-- -->
        getJoke:function(){<!-- -->
            var that = this;
            axios.get("https://autumnfish.cn/api/joke")
                .then(function(response){<!-- -->
                that.joke = response.data;
            }, function(err){<!-- -->
                console. log(err);
            })
        }
    }
})

-》

Vue component

Not a single-file component

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

<body>
    <div id="root">
        <!-- Step 3: Write component tags -->
        <school></school>
        
        <!-- Step 3: Write component tags -->
        <student></student>
    </div>
</body>
<script src="//i2.wp.com/cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    //Step 1: Create the school component
    const school = Vue. extend({<!-- -->
        template:`
            <div class="demo">
                <h2>School name: {<!-- -->{schoolName}}</h2>
                <h2>School Address: {<!-- -->{address}}</h2>
                <button @click="showName">Click me to prompt the school name</button>
            </div>
        `,
        data() {<!-- -->
            return {<!-- -->
                schoolName: 'testSchool',
                address: 'testAddress'
            }
        },
        methods: {<!-- -->
            showName() {<!-- -->
                alert(this. schoolName)
            }
        },
    })

    //Step 1: Create a student component
    const student = Vue. extend({<!-- -->
        template:`
            <div>
                <h2>Student Name: {<!-- -->{studentName}}</h2>
                <h2>Student age: {<!-- -->{age}}</h2>
            </div>
        `,
        data() {<!-- -->
            return {<!-- -->
                studentName: 'Zhang San',
                age: 18
            }
        }
    })

    new Vue({<!-- -->
        el: '#root',
        //Step 2: Register component (partial registration)
        components: {<!-- -->
            school,
            student
        }
    })
</script>
</html>

Vue CLI

Introduction

Vue CLI is a complete system for rapid development based on Vue.js. After using Vue scaffolding, the pages we develop will be a complete system, which provides:

The interactive project scaffolding implemented by vue-cli can download related dependencies by executing commands
Zero configuration prototyping via @vue/cli + @vue/cli-service-global.
A runtime dependency ( @vue/cli-service ) that:
- can be upgraded;
- Built on webpack with sensible default configuration;
- It can be configured through the configuration file in the project;
- Can be extended with plugins.
A rich collection of official plugins that integrates the best tools in the front-end ecosystem.
A fully graphical user interface for creating and managing Vue.js projects.

Install

Environment preparation: need to install and configure node.js

Configure Taobao Mirror

npm config set registry https://registry.npm.taobao.org

verify

npm config get registry

Configure download location

npm config set cache "D:\\
pm\cache"
npm config set prefix "D:\\
pm\global"

verify

npm config ls

Execute the installation command
```
npm install -g vue-cli
```
Create your first Vue scaffolding project