This time I will bring you Vue’s built-in command methods and events. What are the precautions for using Vue’s built-in command methods and events? Here is a practical case, let’s take a look.

Directives are special attributes with v- prefix. Their responsibility is to reactively apply the associated effects to the DOM when the value of the expression changes.

Built-in instructions

1. v-bind: respond to and update 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>
<!-- 縮寫(xiě) -->
<a :href="url" rel="external nofollow" rel="external nofollow" >...</a>
<p :title=&#39;title&#39;>標(biāo)題</p>
var?app?=?new?Vue({
??el:?'#app',
??data:?{?
????url:?'www.baidu.com',
　　　　title:?'bind'
??},
}）

2. v-on: used to listen to DOM events; For example: v -on:click v-on:keyup

By the way, let’s talk about methods and events

2.1 The expression of @click can directly use JavaScript statements , or it can be a function name in the methods option of the Vue instance. Parameters can be passed in the method

<!-- 完整語(yǔ)法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫(xiě) -->
<a @click="doSomething()">...</a>　　　　//是一個(gè)方法名
<p ng-if=&#39;show&#39;>一段文本</p>
<button @click="show=false">點(diǎn)擊隱藏文本</button>　　//直接是一個(gè)內(nèi)聯(lián)的語(yǔ)句
<button v-on:click="count++">Add?1</button>
var?app?=?new?Vue({
??el:?'#app',
　　data:{
　　　　show:?true，
　　　　counter：?0
　　},
??methods:?{
????doSomething:?function(){
??????console.log(this.title);
????},
??}
}）

2.2 Methods and events:

Vue provides a special variable $event, which can be used For accessing native DOM events, you can prevent event bubbling or prevent links from opening

Write an example to prevent bubbling:

??<p @click="stopClick1(&#39;stop1&#39;,$event)">
??????<p @click="stopClick2(&#39;stop2&#39;,$event)">
????????<p @click="stopClick3(&#39;stop3&#39;,$event)">阻止冒泡</p>
??????</p>
????</p>
　　</p>
methods:{
????stopClick3:?function(message,?event){
??????console.log(message);
??????event.stopPropagation();??//阻止冒泡
????},
????stopClick2:?function(message,?event){
??????console.log(message);
????},
????stopClick1:?function(message,?event){
??????console.log(message);
????}
}

2.3 Modifier:

In @binding Add a small dot "." after the event, and then follow it with a suffix to use the modifier.

The above bubbling event can be written as a direct user modifier:

<p @click.stop="stopClick3(&#39;stop3&#39;)">阻止冒泡</p>　　//不用通過(guò)$event事件再來(lái)寫(xiě)了

Some commonly used modifiers are:

? .stop

? .prevent

? .capture

? .self

? .once

＜?！一阻止單擊事件冒泡一〉
<a @click.stop=”handle "></a>
〈！一修飾符可以串聯(lián)一〉
<a @click.stop.prevent=” handle ” ></a>
〈！一添加事件偵聽(tīng)器時(shí)使用事件捕獲模式一〉
<p @click . capture=”handle ”>?...?</p>
〈！一只當(dāng)事件在該元素本身（而不是子元素）?觸發(fā)時(shí)觸發(fā)回調(diào)一〉
<p @click.self=” handle ”>?...?</p>
＜?！一只觸發(fā)一次，組件同樣適用一〉
<p @click.once=” handle ”>?...?</p>

When monitoring keyboard events on a form element, also You can use key modifiers, such as calling a method only when a specific key is pressed:

＜?！一只有在keyCode?是13?時(shí)調(diào)用vm.submit()一〉
<input @keyup.13 ＝“ submit ”〉

3. v-model: two-way binding of data; used for form input, etc.; for example: < input v-model = "message">

4. v-show: conditional rendering instruction, set the css style attribute for DOM

5. v-if: conditional rendering instruction, dynamically added in DOM Or delete DOM elements

6. v-else: conditional rendering instruction, must be used in pairs with v-if

7. v-else-if: judge multi-layer conditions, must be paired with v -if used in pairs;

8, v-text: Update the textContent of the element; for example: is equivalent to < span>{{ msg}} ;

9. v-html: Update the innerHTML of the element; the tag name will also be included.

10. v-for: loop instruction; for example:

<p id= "app ">
????<ul>
??????<li v-for="book in books">{?{?book.name?}?}</li>
????</ul>
??</p>
var?app?=new?Vue({
??el:?'#app',
??data:?{
????books:?[
??????{name:?'<vue.js實(shí)戰(zhàn)>'},
??????{name:?'<javascript語(yǔ)言精粹>'},
??????{name:?'<javascript高級(jí)程序設(shè)計(jì)>'}
????]
??}
});

10.1 v- for expression supports an optional parameter as the index of the current item when traversing the array, for example:

??<p id="app">
????<ul>
??????<li v-for="(book , index) in books ">{{?index}}?-?{{book.name?})</li>
????</ul>
??</p>

10.2 When the expression of v- for traverses the object properties, there are two optional parameters, namely key name and index:

??<p id= "app">
????<ul>
??????<li v-for="(value , key , index) in user ">
????????{?{?index?}?}?-?{?{?key?}?}?:?{?{?value?}?}
??????</li>
????</ul>
??</p>
var?app?=?new?Vue({
??el:?'#app',
??data:?{
????name:?'Aresn',
????grender:?'男',
????age:23
??}
});

10.3 The expression of v- for can also iterate integers:

?<p id="app">
????<span v-for="n in 10">{{n}}</span>
??</p>

10.4 Array update

When we modify the array, Vue will detect the data change, so the view rendered with v-for will also be updated immediately.

? push()
? pop()
? shift()
? unshit()
? splice()
? sort()
? reverse ()

These methods will change the original array called by these methods

For example, we will add an item to the data books of the previous example:

app.books.push({
??name:?'《css世界》'
});

Some methods will not Change the original array, for example:

? filter()
? concat()
? slice()

They return a new array. When using these non-mutation methods When Vue detects changes in the array, it does not directly re-render the entire list, but maximizes the reuse 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 a 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 the display through a copy of the array, you can use calculated properties to return the filtered or sorted array. ,For example:

??<p id="app">
????<ul>
??????<template v-for="book in filterBooks">
????????<li>書(shū)名：{{book.name}}</li>
????????<li>作者：{{book.author}}</li>
??????</template>
????</ul>
??</p>
var?app=?new?Vue({
??el:?'#app',
??computed:?{
????filterBooks:?function(){
??????return?this.books.filter(function?(book)?{
????????return?book.name.match(/JavaScript/);
??????})
????},
??}
});

11、v-cloak：不需要表達(dá)式，這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯； v-cloak 是一個(gè)解決初始化慢導(dǎo)致頁(yè)面閃動(dòng)的最佳實(shí)踐 ；

12、v-once：也是一個(gè)不需要表達(dá)式的指令，作用是定義它的元素或組件只渲染一次，包括元素或組件的所有子節(jié)點(diǎn)。

首次渲染后，不再隨數(shù)據(jù)的變化重新渲染，將被視為靜態(tài)內(nèi)容； v-once 在業(yè)務(wù)中也很少使用，當(dāng)你需要進(jìn)一步優(yōu)化性能時(shí)，可能會(huì)用到。

13、v-pre：不需要表達(dá)式，跳過(guò)這個(gè)元素以及子元素的編譯過(guò)程，以此來(lái)加快整個(gè)項(xiàng)目的編譯速度；例如： < span v-pre>{{ this will not be compiled }} </ span>；

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

Vue項(xiàng)目?jī)?nèi)應(yīng)用第三方驗(yàn)證碼

在項(xiàng)目中如何使用Vue filter

The above is the detailed content of Vue built-in command methods and events. For more information, please follow other related articles on the PHP Chinese website!