current position:Home>Human high quality Vue learning notes (I)

Human high quality Vue learning notes (I)

2021-08-27 00:15:48 A Remus

1. vue brief introduction

Official website cn.vuejs.org/

Official explanation :Vue ( pronunciation /vjuː/, Be similar to view) Is a progressive framework for building user interfaces .

characteristic :

  • Simple : be based on html、css、js
  • Efficient : The efficiency of developing front-end pages is very high
  • Response type : Real time listening for attribute changes , Update the data of the view immediately

summary : We Chinese Especially the rain creek Development of an open source 、 ordinary 、 efficient 、 Responsive front-end technology .

2. Quick start

2.1 introduce vue.js

<!--  Development environment version , Contains helpful command-line warnings  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<!--  Production version , Size and speed are optimized  -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
 Copy code 

2.2 HelloWorld

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

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

Running results :

Key points :

  • const: Indicates that this is a constant .
  • new Vue({}): That means this is one vue application .
  • el:vue Bound scope , It's bound here dom The element is id by app Of div.
  • data: Used to define some properties , The property here is msg.
  • methods: Used to define some methods .
  • {{}}: Interpolation Syntax , The value used to output the property . However, if the network speed is slow , Will appear Interpolation flicker The situation of .

Interpolation flicker : In case of slow network speed , If the page data is not loaded, the original {{}}. If the above example encounters interpolation flicker , The page will show {{msg}}.

3. Commonly used instructions

3.1 v-text

  • v-text Instructions will be data The data in is rendered as text to the specified label .
  • If you include html label , Then output .
  • Directly in v-text Write in Tags Property name , Do not write {{}}.
<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:"<p>  Ha ha ha ha  </p>"
        },
    })
</script>
 Copy code 

Running results :

3.2 v-html

  • v-html The instructions are parsed first html The label then renders the data to the specified label , similar js Of innerHTML
  • Directly in v-html Write in Tags Property name , Do not write {{}}.
<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:"<p>  Ha ha ha ha  </p>"
        },          
    })
</script>
 Copy code 

Running results :

3.3 v-if

  • adopt conditional Controls whether page elements are displayed
<div id="app">
        <p v-if="age==18"> I this year 18 year !!!</p>
        <span v-if="show">
             If  show  by  true  Is displayed , Otherwise it doesn't show !
         </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 code 

Running results :

3.4 v-show

  • Used to control whether page elements are displayed
<div id="app">
  <h2 v-show="show"> show  by  true  Show 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 code 

Running results :

v-show and v-if The difference between :

  • v-if It is dynamic to add or delete DOM Elements
  • v-show Is to set the label display by none When , The element is hidden .

3.5 v-on

  • v-on Used to bind Events
  • grammar :v-on:click=" Method ( Parameters )"
  • Abbreviation :@click=" Method name ( Parameters )"

3.5.1 v-on Basic grammar

<div id="app">
     full 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 code 

3.5.2 v-on The event function passes parameters

<div id="app">
         full name :{{name}}
        <hr>
         Age :{{age}}
        <br>
        <!-- vue Event biography  -->
<input type="button" value=" Change the age to 25, Name changed to Zhou Zhiruo " @click="change(25,' Zhou Zhiruo ')">
</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 code 

summary :

  • this Point to what we created vue example .
  • There are two ways to write event functions :
    • change:function(){}
    • change(){}

3.6 v-bind

  • v-bind Used to bind html attribute , Dynamic update html Property value
  • grammar :v-bind: Property name , for example v-bind:href=""
  • Abbreviation :: Property name , for example :href=""

3.6.1 Basic grammar

<div id="app">
    <a v-bind:href="url" > use Baidu Search </a>
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            url: "https://www.baidu.com",
        },
    });
</script>
 Copy code 

3.6.2 Bound object

v-bind:class="active:isUse", We bound the element here class Selectors , The property value is an object . When inside the object isUse by true when , 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}"> use Baidu Search </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 code 

3.7 v-for

Used to loop through the array , The data in the array can be ordinary elements , It could be an object

<div id="app">
     <span> full name :{{user.name}}</span>
     <br>
     <span> Age :{{user.age}}</span>
     <hr>
     <!--  adopt v-for  Traversing objects  -->
     <span v-for="(user, index) in users" :key="user.id">
          {{user.name}} {{user.age}} <br>
     </span>
     <hr>
     <!--  adopt v-for Traversal array  -->
     <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 San ",age:21},{name:" Li Si ",age:26}],
            address:[" Beijing "," guangdong "," Shenzhen "]
        },
    });
</script>
 Copy code 

Running results :

Be careful

  • Be sure to use :key ,key Give each node a unique identification , Traversal speed is more efficient .
  • It is not recommended to use v-if and v-for, because v-for Ratio v-if Higher priority .

3.8 v-model

  • Use v-model It can realize the two-way binding of data .
  • Two way binding :vue In the example data Data changes cause data changes in the form , Data changes in the form result in vue In the example data Data changes .
  • MVVM framework , Two way binding mechanism
    • Model:vue In the instance data data
    • 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 Modify msg Value " @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 ha ha ha !";
        }
    }
 });
</script>
 Copy code 

Running results :

4. Modifier

  • Modifier : Use with Events , You can modify the trigger mechanism of the event
  • Common event modifiers :
    • stop
    • prevent
    • once

4.1 Event modifier

4.1.1 stop Event modifier

Used to stop the event bubbling , for instance : Click child div , Father div Events will also be clicked .

<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 By clicking the ');
          },
          divClick(){
              alert(' Father div By clicking the ');
          }
      }
  });
</script>
 Copy code 

4.1.2 prevent Event modifier

To prevent the default behavior of tags

<a href="http://www.baidu.com/" @click.prevent="btnClick"> use Baidu Search </a>
 Copy code 

4.1.3 once Event modifier

Let the specified event trigger only once

<a href="http://www.baidu.com/" @click.prevent.once="btnClick"> use Baidu Search </a>
 Copy code 

4.2 Key modifier

  • Bound to events in the keyboard
  • Common key modifiers
    • enter
    • tab

4.2.1 enter 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 code 

4.2.2 tab Key modifier

tab Key trigger 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 code 

copyright notice
author[A Remus],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827001543401p.html

Random recommended