Directives are special attributes with v- prefix. The responsibility is to responsively act on the DOM when the value of an expression changes.
Built-in commands
1. v-bind: Respond to and update the DOM characteristics; for example: v-bind:href v-bind:class v-bind:title etc.
The main usage is to bind attributes and dynamically update attributes on HTML elements;
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" >...</a>
<!-- abbreviation -->
<a :href="url" rel="external nofollow" rel="external nofollow" >...</a>
<div :title='title'>title</div>
var app = new Vue({
el: '#app',
data: {
url: '',
title: 'bind'
},
}）
2. v-on: used to listen for DOM events; for example: v-on:click v-on:keyup
By the way and events
2.1 @click expression can be directly used in JavaScript statements, or it can be a function name within the methods option in the Vue instance, and parameters can be passed in the method.
<!-- Complete syntax -->
<a v-on:click="doSomething">...</a>
<!-- abbreviation -->
<a @click="doSomething()">...</a>//is a method name
<p ng-if='show'>A piece of text</p>
<button @click="show=false">Click to hide text</button>// It is directly an inline statement<button v-on:click="count++">Add 1</button>
var app = new Vue({
el: '#app',
data:{
show: true，
counter： 0
},
methods: {
doSomething: function(){
();
},
}
}）
2.2 Methods and Events:
Vue provides a special variable $event to access native DOM events, which can prevent events from bubbled or links from opening.
Write an example to stop bubbles:
<div @click="stopClick1('stop1',$event)">
<div @click="stopClick2('stop2',$event)">
<div @click="stopClick3('stop3',$event)">Stop bubbles</div>
</div>
</div>
</div>
methods:{
stopClick3: function(message, event){
(message);
(); //Stop bubbles },
stopClick2: function(message, event){
(message);
},
stopClick1: function(message, event){
(message);
}
}
2.3 Modifier:
Add a small dot "." after the bound event, and then a suffix to use the modifier.
The above blocking bubbling event can be written directly as a user modifier:
<div @="stopClick3('stop3')">Stop bubbles</div>//No need to pass$eventLet's write about the incident again
Some commonly used modifiers are:
• .stop
• .prevent
• .capture
• .self
• .once
＜ ！One stops click event bubbles〉 <a @=”handle "></a> 〈！A modifier can be connected in series〉 <a @=” handle ” ></a> 〈！Use event capture mode when adding event listener〉 <div @click . capture=”handle ”> ... </div> 〈！A single event in the element itself（Not child elements） Trigger callback when triggered〉 <div @=” handle ”> ... </div> ＜ ！One triggers once，The same applies to the component〉 <div @=” handle ”> ... </div>
When monitoring keyboard events on form elements, you can also use key modifiers, such as calling the method when a specific key is pressed:
＜ ！One is only inkeyCode yes13 Called on time()one〉 <input @keyup.13 ＝“ submit ”〉
3. v-model: data bidirectional binding; used for form input, etc.; for example: <input v-model= "message">
4. v-show: conditional rendering directive, set the style attribute of css for DOM
5. v-if: conditional rendering instruction, dynamically add or delete DOM elements in the DOM
6. v-else: conditional rendering instructions must be used in pairs with v-if
7. v-else-if: To judge multi-layer conditions, you must use it in pairs with v-if;
8. v-text: update the textContent of the element; for example: <span v-text="msg"></span> is equivalent to <span>{{msg}} </ span>;
9. v-html: update the innerHTML of the element; it will also bring the tag name.
10. v-for: loop instruction; for example:
<div id= "app ">
<ul>
<li v-for="book in books">{ { } }</li>
</ul>
</div>
var app =new Vue({
el: '#app',
data: {
books: [
{name: '<Practical>'},
{name: '<javascript language essence>'},
{name: '<javascript advanced programming>'}
]
}
});
10.1 v-for expressions support an optional parameter as the index of the current item when iterating through an array, for example:
<div >
<ul>
<li v-for="(book , index) in books ">{{ index}} - {{ })</li>
</ul>
</div>
10.2 When the expression of v-for traverses object properties, there are two optional parameters, namely the key name and index:
<div id= "app">
<ul>
<li v-for="(value , key , index) in user ">
{ { index } } - { { key } } : { { value } }
</li>
</ul>
</div>
var app = new Vue({
el: '#app',
data: {
name: 'Aresn',
grender: 'male',
age:23
}
});
10.3 The expression of v-for can also iterate over integers:
<div >
<span v-for="n in 10">{{n}}</span>
</div>
10.4 Array update
When we modify the array, Vue detects data changes, so the views rendered with v-for will be updated immediately.
• push()
• pop()
• shift()
• unshit（）
• splice()
• sort（）
• reverse()
These methods change the original array called by these methods
For example, we add an item to the data books from a previous example:
({
name: '"CSS World"
});
Some methods do not change the original array, for example:
• filter()
• concat()
• slice()
They return a new array, and when using these non-mutated methods, the original array can be replaced with the new array, such as:
= (function (item) {
return item . (/JavaScript/);
});
When Vue detects array changes, it does not directly rerender the entire list, but maximizes the multiplexing of DOM elements.
In the replaced array, items containing the same elements will not be re-rendered, so you can boldly replace the old array with the new array without worrying about performance issues.
10.5 Filtering and sorting
When you do not want to change the original array and want to filter or sort through a copy of the array, you can use the calculated attribute to return the filtered or sorted array, for example:
<div >
<ul>
<template v-for="book in filterBooks">
<li>Book title：{{}}</li>
<li>author：{{}}</li>
</template>
</ul>
</div>
var app= new Vue({
el: '#app',
computed: {
filterBooks: function(){
return (function (book) {
return (/JavaScript/);
})
},
}
});
11. v-cloak: no expression is required, this directive remains on the element until the associated instance ends compilation; v-cloak is a best practice to solve the problem of slow initialization causing page flash;
12. v-once: It is also a directive that does not require an expression. Its function is to define its element or component render only once, including all child nodes of the element or component.
After the first rendering, it will no longer be re-rendered with changes in the data and will be considered static content; v-once is also rarely used in the business and may be used when you need to further optimize performance.
13. v-pre: No expression is needed. Skip the compilation process of this element and child elements to speed up the compilation speed of the entire project; for example: < span v-pre>{{ this will not be compiled }} </ span>；