Vue.js Combat Learning--directives and events

Note: This content excerpt from: Liang's "vue.js Combat"

1. The instruction is the most commonly used function in vue.js template, it has the prefix V, for example: V-if, v-html, V-pre and so on. The main function of a directive is to apply certain behaviors to the DOM when the value of its expression changes.

<div class= "App1" >    <p vif= "show" > Hello? </p></div>var app=New  Vue ({    el:'. App1 ',    data:{        Show: true     }});

When the value of the data show is true, the P element is inserted and false when it is removed. Data-driven DOM is the core concept of vue.js, not to be suspicious of the need to actively operate the DOM, you just have to maintain the good data, the DOM Vue will help you gracefully handle.

Vue.js has built-in instructions to help us quickly perform common DOM operations such as loop rendering, display and hide.

2.v-bind

The basic use of V-bind is to dynamically update attributes on HTML elements, such as ID, class, and so on.

<div class= "APP3" >    <p vif= "Show" > This is a text </p>    <button v-on:click= " Handleclose ">{{show?" Click Hide ":" To display "}}</button></div>var app2=New  Vue ({    el:'. App2 '),    data:{        URL:' http://baidu.com ',                                        
        Imgurl: ' Https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDroa7gpwEQ2AUYWjIIi8qo2d6gtwQ '}    });

3.v-on

V-on is used to bind the event listener so that we can do some interaction:

<div class= "App3" > <p Vif= "Show" > This is a text </p> <button v-on:click= "Handleclose" >{{show? " Click Hide ":" Click Show "}}</button></div>varapp3=NewVue ({el:'. App3 ', data:{Show:true}, methods:{handleclose:function(){            if( This. Show) {                 This. show=false; }Else{                 This. show=true; }                                }    }})

On the button, using V-on:click to bind the element to a click event, on ordinary elements, v-on can listen to native DOM events, in addition to the click, there are Dbclick, KeyUp, MouseMove and so on. The expression can be a method name, which is written in the methods property of the Vue instance, and is in the form of a function that refers to the current Vue instance itself, so you can access or modify the data directly using the This.xxx form.

Expressions can be directly an inline statement in addition to the method name: <button v-on:click= "Show=flase" > Click to hide </button>

4. Grammatical sugars

Syntactic sugar refers to the ability to add a method to achieve the same effect without affecting functionality, thus facilitating program development.

Vue.js's V-bind and v-on directives provide syntax sugars, or abbreviations, such as V-bind, which omit v-bind and write a colon ":" directly.

 can be changed to 

V-on can be abbreviated with "@" directly

<button v-on:click= "Handleclose" >{{show? " Click to hide ":" Click to show "}}</button> can be abbreviated as:<button @click =" Handleclose ">{{show?" Click Hide ":" Click Show "}}</button>

Vue.js Combat Learning--directives and events