vuejs指令詳解

更新時(shí)間：2017年02月07日 14:10:21 作者：孟然

本文介紹了vuejs指令的相關(guān)知識，具有很好的參考價(jià)值，下面跟著小編一起來看下吧

v-if

v-if指令可以完全根據(jù)表達(dá)式的值在DOM中生成或移除一個(gè)元素。如果v-if表達(dá)式賦值為false，那么對應(yīng)的元素就會(huì)從DOM中移除；否則，對應(yīng)元素的一個(gè)克隆將被重新插入DOM中，代碼如下：

<div id="example-2">
 <p v-if="greeting">Hello!</p>
</div>
<script type="text/javascript">
 var exampleVM2 = new Vue({
 el: '#example-2',
 data: {
 greeting: true
 }
 })
</script>

由于v-if是一個(gè)指令，需要將它添加到一個(gè)元素上。但是如果想要切換多個(gè)元素，則可以把<template>元素當(dāng)做包裝元素，并在其上使用v-if，最終的渲染結(jié)果不會(huì)包含它。代碼如下：

<div id="example-2">
 <template v-if="greeting">
 <h1>Title</h1>
 <p>Paragraph 1</p>
 <p>Paragraph 1</p>
 </template>
</div>
<script type="text/javascript">
 var exampleVM2 = new Vue({
 el: '#example-2',
 data: {
 greeting: true
 }
 })
</script>

v-show

v-show指令是根據(jù)表達(dá)式的值來顯示或者隱藏HTML元素。當(dāng)v-show賦值為false時(shí)，元素被隱藏。查看DOM時(shí)，會(huì)發(fā)現(xiàn)元素上多了一個(gè)內(nèi)聯(lián)樣式style="display:none"。

如圖所示：

注：v-show不支持<template>語法。

一般來說，v-if有更高的切換消耗，而v-show有更高的初始渲染消耗。因此，如果需要頻繁的切換，則使用v-show較好；如果在運(yùn)行時(shí)條件不大可能改變，則使用v-if較好。

v-else

v-else就是JavaScript中的else的意思，它必須跟著v-if或者v-show使用。如下代碼：

<div id="example">
 <P v-if="ok">我是對的</P>
 <p v-else="ok">我是錯(cuò)的</p>
</div>
<script type="text/javascript">
 var exampleVM2 = new Vue({
 el: '#example',
 data: {
 ok: false
 }
 })
</script>

將v-show用在組件上時(shí)，因?yàn)橹噶畹膬?yōu)先級v-else會(huì)出現(xiàn)問題，所以不要這樣做。我們可用用另一個(gè)v-show替換v-else。

v-model

v-model指令用來在input、select、text、checkbox、radio等表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定的。根據(jù)控件類型v-model自動(dòng)選取正確的方法更新元素。代碼如下：

<div id="example">
 <form>
 姓名：
 <input type="text" v-model="data.name" placeholder="姓名"/>
 <br />
 性別：
 <input type="radio" id="one" value="One" v-model="data.sex"/>
 <label for="man">男</label>
 <input type="radio" id="two" value="Two" v-model="data.sex"/>
 <label for="male">女</label>
 <br />
 <input type="checkbox" id="jack" value="book" v-model="data.interest"/>
 <label for="jack">閱讀</label>
 <input type="checkbox" id="john" value="swim" v-model="data.interest"/>
 <label for="john">游泳</label>
 <input type="checkbox" id="move" value="game" v-model="data.interest"/>
 <label for="move">游戲</label>
 <input type="checkbox" id="mike" value="song" v-model="data.interest"/>
 <label for="mike">唱歌</label>
 <br />
 身份：
 <select v-model="data.identity">
 <option value="teacher" selected>教師</option>
 <option value="doctor">醫(yī)生</option>
 <option value="lawyer">律師</option>
 </select> 
 </form>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 data:{
 name:'',
 sex:'',
 interest:[],
 identity:''
 }
 }
 })
</script>

除了以上用法，在v-model指令后面還可以添加多個(gè)參數(shù)（number、lazy、debounce）。

1.number

如果想要用戶的輸入自動(dòng)轉(zhuǎn)換為Number類型（如果原值的轉(zhuǎn)換結(jié)果為NAN，則返回原值），則可以添加一個(gè)number特性。

2.lazy

在默認(rèn)情況下，v-model在input事件中同步輸入框的值與數(shù)據(jù)，我們可以添加一個(gè)lazy特性，從而將數(shù)據(jù)改到在change事件中發(fā)生。代碼如下：

<div id="example">
 <input v-model="msg" lazy style="width:500px;"/><br/>
 {{msg}}
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 msg:'內(nèi)容是在change事件后才改變的~'
 },
 watch:{
 
 }
 })
</script>

3.debounce

設(shè)置一個(gè)最小的延時(shí)，在每次敲擊之后延時(shí)同步輸入框的值與數(shù)據(jù)。如果每次更新都要進(jìn)行高耗操作（例如，在input中輸入內(nèi)容時(shí)要隨時(shí)發(fā)送ajax請求），那么它較為有用。

<input v-model="msg" debounce="5000"/>

v-repeat

v-repeat（已經(jīng)廢除）指令基于源數(shù)據(jù)重復(fù)渲染元素?？梢允褂?index來呈現(xiàn)相對應(yīng)的數(shù)組索引。不細(xì)講。

數(shù)組變動(dòng)檢測

Vue.js 包裝了被觀察數(shù)組的變異方法，故它們能觸發(fā)視圖更新。被包裝的方法有：push(), pop(), shift(), unshift(), splice(), sort(), reverse()

example1.items.push({ message: 'Baz' });
example1.items = example1.items.filter(function (item) {
 return item.message.match(/Foo/);
});

vue.js還增加了兩個(gè)方法來觀測變化：$set、$remove。

我們應(yīng)該盡量避免直接設(shè)置數(shù)據(jù)綁定的數(shù)組元素，因?yàn)檫@些變化不會(huì)被vue.js檢測到，因而也不會(huì)更新視圖渲染。可以使用$set方法：

demo.items.$set(0,{childMsg:'Changed!'})

$remove是$splice的語法糖，用于從目標(biāo)數(shù)組中查找并刪除元素：

demo.items.$remove(0);

注：ECMAScript5無法檢測到新屬性添加到一個(gè)對象上或者在對象上刪除。要處理這種情況，Vue.js增加了三種方法：$add(key,value)、$set(key,value)、$delete(key,value)，這些方法可以用來添加和刪除屬性，同時(shí)觸發(fā)視圖更新。

內(nèi)置過濾器

1.filterBy(0.12版本)

實(shí)現(xiàn)如圖所示：

<div id="example">
 <input v-model="searchText"/>
 <ul>
 <li v-for="user in users | filterBy searchText in 'name' ">{{user.name}}</li>
 </ul>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 users:[
 {
 name:'快車',
 tag:'1'
 },
 {
 name:'出租車',
 tag:'2'
 },
 {
 name:'順風(fēng)車',
 tag:'3'
 },
 {
 name:'專車',
 tag:'4'
 }
 ]
 }
 })
</script>

在輸入框中輸入'專車'，得到如圖所示的結(jié)果：

2.orderBy(0.12版本)

實(shí)現(xiàn)降序排列，例：

<div id="example">
 <ul>
 <li v-for="user in users | orderBy field reverse">{{user.name}}</li>
 </ul>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 field:'tag',
 reverse:-1,
 users:[
 {
 name:'出租車',
 tag:'2'
 },
 {
 name:'快車',
 tag:'1'
 },
 {
 name:'順風(fēng)車',
 tag:'3'
 },
 {
 name:'專車',
 tag:'4'
 }
 ]
 }
 })
</script>

v-for

使用$index來獲得相應(yīng)的數(shù)組索引。

<div id="example">
 <ul>
 <li v-for="item of items" class="item-{{$index}}">
 {{$index}} - {{parentMessage}} - {{item.msg}}
 </li>
 </ul>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 parentMessage:'滴滴',
 items:[
 {msg:'順風(fēng)車'},
 {msg:'專車'}
 ]
 }
 })
</script>

注：vuejs1.0.17及以后低版本支持of分隔符，更接近JavaScript遍歷器語法。

有時(shí)我們可能想重復(fù)一個(gè)包含多個(gè)DOM元素的塊，可以使用<template>,如：

<ul>
 <template v-for="item in items">
 <li>{{ item.msg }}</li>
 <li class="divider"></li>
 </template>
</ul>

v-for也支持整數(shù)

代碼如下：

<div>
 <span v-for="n in 10">{{ n }} </span>
</div>

或者

<div>
 <span v-for="n in 10">{{ $index }} </span>
</div>

v-text

v-text指令可以更新元素的textContent.

<span v-text="msg"></span><br/>
<span>{{msg}}</span>

得到的結(jié)果一樣。

v-html

v-html指令更新元素的innerHTML。

<div id="example">
 <p v-html="html"></p>
 <p>{{{html}}}</p>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 html:'<p>效果一樣</p>'
 }
 })
</script>

注：不建議在網(wǎng)站上直接動(dòng)態(tài)渲染任意HTML片段，很容易導(dǎo)致XSS攻擊。

v-bind

v-bind指令用于響應(yīng)更新HTML特性，將一個(gè)或者多個(gè)attribute，或者一個(gè)組件prop動(dòng)態(tài)綁定到表達(dá)式。v-bind可以簡寫為：

<!-- 完整語法 -->
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a>
<!-- 縮寫 -->
<a :href="url" rel="external nofollow" rel="external nofollow" ></a>
<!-- 完整語法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>
<!-- 縮寫 -->
<button :disabled="someDynamicCondition">Button</button>

在綁定class或者style時(shí)，支持其他類型的值，如數(shù)組或?qū)ο?。如?/p>

<div id="example">
 <div :class="[classA,{classB:isB,classC:isC}]"></div>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 classA:'A',
 isB:false,
 isC:true
 }
 })
</script>

結(jié)果如圖：

如果沒有參數(shù)時(shí)，可以綁定到一個(gè)對象。注意，此時(shí)class和style綁定不支持?jǐn)?shù)組和對象（對象key會(huì)轉(zhuǎn)換為小寫）。代碼如下：

<div id="example">
 <div v-bind="{id:someProp,'OTHERATTR':otherProp}"></div>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 someProp:'idName',
 otherProp:'prop'
 }
 })
</script>

結(jié)果如圖：

在綁定prop時(shí)，prop必須在子組件中聲明?？梢杂眯揎椃付ú煌慕壎愋汀Ｐ揎椃麨椋?/p>

.sync——雙向綁定，只能用于prop綁定。

.once——單次綁定，只能用于prop綁定。

.camel——將綁定的特性名字轉(zhuǎn)換回駝峰命名。只能用于普通HTML特性的綁定，通常用于綁定用駝峰命名的SVG特性，比如viewBox。

v-on

v-on指令用于綁定事件監(jiān)聽器。事件類型由參數(shù)指定。

如果訪問原始DOM事件，可以使用$event傳入方法。

<button v-on:click="doThis('hello',$event)"></button>
<!--縮寫-->
<button @click="doThis('hello',$event)"></button>

完整例子：

<div id="example">
 <button v-on:click="greet">Greet</button>
</div>
var vm = new Vue({
 el: '#example',
 data: {
 name: 'Vue.js'
 },
 // 在 methods 對象中定義方法
 methods: {
 greet: function (event) {
 // 方法內(nèi) this 指向 vm
 alert('Hello ' + this.name + '!')
 // event 是原生 DOM 事件
 alert(event.target.tagName)
 }
 }
})
// 也可以在 JavaScript 代碼中調(diào)用方法
vm.greet(); // -> 'Hello Vue.js!'

###事件修飾符

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat">
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

### 按鍵修飾符

<!-- 只有在 keyCode 是 13 時(shí)調(diào)用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">

全部的按鍵別名：enter，tab，delete，esc，space，up，down，left，right

v-ref

在父組件上注冊一個(gè)子組件的索引，便于直接訪問。不需要表達(dá)式，必須提供參數(shù)id?？梢酝ㄟ^父組件的$refs對象訪問子組件。

v-el

為DOM元素注冊一個(gè)索引，方便通過所屬實(shí)例的$els訪問這個(gè)元素?？梢杂胿-el:some-el設(shè)置this.$els.someEl。

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>

通過this.$els獲取相應(yīng)的DOM元素：

this.$els.msg.textContent //'hello'
this.$els.otherMsg.textContent //'world'

在新的vuejs中，簡單起見， v-el 和 v-ref 合并為一個(gè) ref 屬性了，可以在組件實(shí)例中通過 $refs 來調(diào)用。

v-pre

跳過這個(gè)元素和它的子元素的編譯過程?？梢杂脕盹@示原始 Mustache 標(biāo)簽。跳過大量沒有指令的節(jié)點(diǎn)會(huì)加快編譯。

<span v-pre>{{ this will not be compiled }}</span>

v-cloak

這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢。

css代碼：