1. Introduction of vue

website:cn.vuejs.org/

Vue (pronounced vju/curliest, similar to View) is a set of progressive frameworks for building user interfaces.

Features:

  • Simple: Based on HTML, CSS, JS
  • Efficient: Very efficient in developing front-end pages
  • Responsive: Monitors property changes in real time and updates view data immediately

Summary: We Chinese specially developed an open source, simple, efficient, responsive front-end technology.

2. Quick start

2.1 introduced the vue. Js

<! -- Development environment version, including helpful command line warnings --> <script SRC ="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <! -- Production version, optimized for size and speed --> <script SRC ="https://cdn.jsdelivr.net/npm/vue@2"></script>
Copy the code

2.2 the HelloWorld

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

<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app", 
        data:{    
            msg:"hello world"
        },
        methods:{
          
        }
    });
</script>
Copy the code

Running results:

Key points:

  • Const: indicates that this is a constant.
  • New Vue({}) : indicates that this is a Vue application.
  • El: scope of the vue binding, where the bound DOM element is the div with the id app.
  • Data: Used to define some properties, in this case MSG.
  • Methods: Defines methods.
  • {{}} : Interpolation syntax for output values of attributes. However, if the network speed is slow, there will be interpolation flicker.

Interpolation flicker: in the case of slow network speed, the original {{}} will be displayed before the page data is loaded. In the example above, the page displays {{MSG}} if interpolation flickers are encountered.

3. Common commands

3.1 v – text

  • The V-text directive renders the data in data as text to the specified label.
  • If it contains an HTML tag, it is printed as well.
  • Write the attribute name directly in the V-text tag without {{}}.
<div id="app">
    <p v-text="title"></p>
    <p v-text="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",  
        data:{      
            title:"I love China!",
            content:"
 hahaha 
"
        },
    })
</script>
Copy the code

Running results:

3.2 v – HTML

  • The V-HTML directive parses the HTML tag and renders the data to the specified tag, similar to innerHTML of JS
  • Write the attribute name directly in the V-HTML tag without {{}}.
<div id="app">
    <p v-html="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",  
        data:{      
            content:"
 hahaha 
"
        },          
    })
</script>
Copy the code

Running results:

3.3 v – the if

  • Controls whether page elements are displayed by conditional judgment
<div id="app">
        <p v-if="age==18"> I'm18Years old!!!!!! </p> <span v-if="show"> if show istrueDisplay, otherwise do not display! </span> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            show: true,
            age: 18}}); </script>Copy the code

Running results:

3.4 v – show

  • Used to control whether page elements are displayed
<div id="app">
  <h2 v-show="show"> show fortrueShow the content! </h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            show: true}}); </script>Copy the code

Running results:

Difference between V-show and V-if:

  • V-if dynamically adds or removes DOM elements
  • The v-show element is hidden when the display tag is set to None.

3.5 v – on

  • V-on is used to bind events
  • Syntax: V-on :click=” method (parameter)”
  • @click=” method name (parameter)”

3.5.1 V-ON Basic Syntax

<div id="app"> Name: {{name}} <hr> Age: {{age}} <br> <input type="button" value="Click age plus 1" v-on:click="addChange">
    <br>
    <input type="button" value="Click age minus 1" @click="subChange">
    <br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            name:"Zhang Wuji",
            age:40
        },
        methods: {
            addChange(){
                this.age++;
            },
            subChange(){
                this.age--;
            },
            change(age,name){
                this.age=age;
                this.name=name; }}}); </script>Copy the code

3.5.2 V-ON Event function parameters Were passed

<div id="app"> Name: {{name}} <hr> Age: {{age}} <br> <! -- vue event pass parameter --> <input type="button" value="Age changed to 25, name changed to Zhou Zhiruo" @click="Change (25,' zhou Zhi Ruo ')">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            name:"Zhang Wuji",
            age:40
        },
        methods: {
            change(age,name){
                this.age=age;
                this.name=name; }}}); </script>Copy the code

Conclusion:

  • This points to the vue instance we created.
  • The event function can be written in two ways:
    • change:function(){}
    • change(){}

3.6 v – bind

  • V-bind is used to bind HTML attributes and dynamically update HTML attribute values
  • Syntax: v-bind: attribute name, e.g. V-bind :href=””
  • Short: : property name, for example :href=””

3.6.1 Basic Syntax

<div id="app">
    <a v-bind:href="url"</a> </div>const app = new Vue({
        el: '#app',
        data: {
            url: "https://www.baidu.com",}}); </script>Copy the code

3.6.2 Binding Objects

V-bind :class=”active:isUse”, we bind the element’s class selector, the attribute value is an object. When isUse in an object is true, the element has the class name.

<! DOCTYPE html> <html lang="en">
<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>v-bind</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <a v-bind:href="url" v-bind:class="{active:isUse}"</a> <hr> <input type="button" value="Click to change the color of the hyperlink" @click="changeColor">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                url: "https://www.baidu.com",
                isUse: true
            },
            methods: {
                changeColor() {
                    this.isUse = !this.isUse
                }
            }
        });
    </script>
</body>
</html>
Copy the code

3.7 v – for

Used to loop through groups of numbers, the data in the array can be ordinary elements, can also be objects

<div id="app"> < span > name: {{user. The name}} < / span > < br > < span > age: {{user. Age}} < / span > < hr > <! - through the v -forTraverse the object --> <span v-for="(user, index) in users" :key="user.id"> {{user.name}} {{user.age}} <br> </span> <hr> <! - through the v -for<span v-for="(a, index) in address" >
        {{index}}  {{a}} <br>
     </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const  app = new Vue({
        el: '#app',
        data: {
            user:{name:"Zhang Wuji",age:25},
            users:[{name:"Zhang",age:21},{name:"Bill",age:26}],
            address:["Beijing"."Guangdong"."Shenzhen"]}}); </script>Copy the code

Running results:

Note:

  • Make sure to use :key,key to make a unique identification for each node, traversal speed is more efficient.
  • Not recommended at the same timev-if 和 v-forBecause thev-forIs better thanv-ifHigher priority.

3.8 v – model

  • Two-way binding of data can be achieved using the V-Model.
  • Bidirectional binding: Data changes in the VUE instance cause data changes in the form, and data changes in the form cause data changes in the VUE instance.
  • MVVM architecture, bidirectional binding mechanism
    • Model: Data in the VUE instance
    • VM: ViewModel, data listener
    • View: Data displayed on the page
<div id ="app">
     <input type="text" v-model="msg"> 
     {{msg}}
     <hr>
     <input type="button" value="Click to modify the value of MSG" @click="change">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const app = new Vue({
    el: '#app',
    data: {
        msg:"I love China, I love this land!"
    },
    methods: {
        change(){
            this.msg="Ha ha ha ha!"; }}}); </script>Copy the code

Running results:

4. The modifier

  • Modifiers: Used with events to modify the triggering mechanism of events
  • Common event modifiers:
    • stop
    • prevent
    • once

4.1 Event modifiers

4.1.1 Stop event modifier

To prevent events from bubbling, for example, clicking on a child div will also click on the parent div event.

<div id="app">
    <div class="father" @click="divClick">
        <input type="button" value="Button" @click.stop="btnClick">
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
      el: "#app",
      data: {
      
      },
      methods: {
          btnClick(){
              alert('Button is clicked');
          },
          divClick(){
              alert('Parent div is clicked'); }}}); </script>Copy the code

4.1.2 Prevent Event modifier

Used to block the default behavior of the tag

<a href="http://www.baidu.com/" @click.prevent="btnClick"< p style = "max-width: 100%; clear: both; min-height: 1em;Copy the code

4.1.3 Once event modifier

Causes the specified event to fire only once

<a href="http://www.baidu.com/" @click.prevent.once="btnClick"< p style = "max-width: 100%; clear: both; min-height: 1em;Copy the code

4.2 Key modifier

  • Bind to events in the keyboard
  • Common key modifier
    • enter
    • tab

4.2.1 Enter Modifier

The Enter key triggers the event

<div id ="app"> 
        <input type="text" v-model="msg" @keyup.enter="keyups">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const app = new Vue({
    el: '#app',
    data: {
        msg:"I love you China"
    },
    methods: {
        keyups(){
            this.msg="I love you Communist Party of China!"; }}}); </script>Copy the code

4.2.2 TAB Modifier

The TAB key triggers the event

<div id ="app"> 
    <input type="text" v-model="msg" @keyup.tab="keyups">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 const app = new Vue({
    el: '#app',
    data: {
        msg:"I love you China"
    },
    methods: {
        keyups(){
            this.msg="I love you Communist Party of China!"; }}}); </script>Copy the code