指令

指令是可以寫在DOM元素的小命令，他們以v-為前綴，Vue就能識別這是一個(gè)指令并保持語法的一致性。如果你需要對HTML進(jìn)行底層操作的話，這種方式是非常有用的。

1. v-text

v-text 更新元素的文本內(nèi)容，不解析html 相當(dāng)于更新元素的 innerText文本內(nèi)容

html 代碼

<div v-text='txt'></div>

javascript 代碼

new Vue({
  el:"#app",
  data:{
    txt:"<b>b標(biāo)簽</b>"
  } 
})

頁面渲染結(jié)果（不解析b標(biāo)簽，原格式輸出）
<b>b標(biāo)簽</b>

2. v-html

v-text 更新元素的html，解析html 相當(dāng)于更新元素的 innerHTMLhtml代碼內(nèi)容

html 代碼

<div v-text='html'></div>

javascript 代碼

new Vue({
  el:"#app",
  data:{
    html:"<b>b標(biāo)簽</b>"
  } 
})

頁面渲染結(jié)果(解析b標(biāo)簽輸出加粗的文本)
b標(biāo)簽

查看演示

3. v-show

v-show 根據(jù)表達(dá)式之真假值，切換元素的 display CSS 屬性,元素即使隱藏也存在DOM中

html 代碼

<div v-show='flag'></div> 根據(jù)flag的布爾值切換 元素的display

javascript 代碼

new Vue({
  el:"#app",
  data:{
    flage:true
  } 
})

頁面渲染結(jié)果
此時(shí) div 的display css 不做改變，v-show只會在表達(dá)式 為 false 時(shí) 改變display=none，為true不做改變

4. v-if

v-if 根據(jù)表達(dá)式的值的真假條件渲染元素,也就是說元素會被銷毀或重新創(chuàng)建

html 代碼

<div v-if='flag'></div> 根據(jù)flag的布爾值，來控制元素是否被 創(chuàng)建或銷毀，銷毀后不再存在DOM中

javascript 代碼

new Vue({
  el:"#app",
  data:{
    flage:false
  } 
})

頁面渲染結(jié)果
此時(shí) div 的將不被渲染出來，div 不存在于 DOM中

5. v-else

v-else v-if的else語句 代表表達(dá)式為false 的時(shí)候渲染元素
v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會被識別。

html 代碼

<div v-if='flag'>A</div>  如果flage為 `trun`則創(chuàng)建元素
<div v-else='flag'>B</div>  如果flage為`false`則創(chuàng)建元素

javascript 代碼

new Vue({
  el:"#app",
  data:{
    flage:false
  } 
})

頁面渲染結(jié)果
此時(shí) div B 將被創(chuàng)建

6. v-else-if

v-else-if v-if的else-if語句
v-else-if 元素必須緊跟在帶 v-if的元素的后面，否則它將不會被識別。

html 代碼

<div v-if="type === 'A'"> 如果type == A 則創(chuàng)建 divA元素 并中斷執(zhí)行
  A
</div>
<div v-else-if="type === 'B'"> 如果type == B 則創(chuàng)建 divA元素 并中斷執(zhí)行
  B
</div>
<div v-else-if="type === 'C'"> 如果type == C 則創(chuàng)建 divA元素 并中斷執(zhí)行
  C
</div>
<div v-else>  如果條件都不滿足 執(zhí)行
  Not A/B/C
</div>

javascript 代碼

new Vue({
  el:"#app",
  data:{
    type:'C'
  } 
})

頁面渲染結(jié)果
此時(shí) div c 將被創(chuàng)建

v-show與v-if 實(shí)例演示

7. v-for

v-for 基于源數(shù)據(jù)多次渲染元素或模板塊

創(chuàng)建 vue實(shí)例

new Vue({
  el:"#app",
  data:{
    arr:["張","王","李","趙"],
    arr2:["張","王","李","張"],
    obj:{'key1' : 'val1','key2' : 'val2','key3' : 'val3'}
  },
})

輸出數(shù)組arr

//輸出arr 的值
<span v-for(val in arr)>{{val}}</span >
張 王 李 趙
//輸出 arr 的下標(biāo)和值 (第一個(gè)參數(shù)是val  第二個(gè)是key)
<span v-for((val,index) in arr)>{{index}}:{{val}}</span >
0:張  1:王  2:李  3:趙

輸出對象obj

//輸出obj的值
<span v-for(val in obj)>{{val}}</span >
val1   val2   val3
//輸出 obj的key 和 val (第一個(gè)參數(shù)是val  第二個(gè)是key)
<span v-for((val,key) in obj)>{{key}}:{{val}}</span >
key1:val1   key2:val2   key3:val3

vue 2.0 可以輸出對象重復(fù)的對象 比如 arr2 有兩個(gè) 張

//輸出obj的值
<span v-for(val in arr2)>{{val}}</span >
張 王 李 張

當(dāng)我們在使用v-for進(jìn)行渲染時(shí)，盡可能使用渲染元素自身屬性的id給渲染的元素綁定一個(gè) 唯一key值，這樣在當(dāng)前渲染元素的DOM結(jié)構(gòu)發(fā)生變化時(shí)，能夠單獨(dú)響應(yīng)該元素而不觸發(fā)所有元素的渲染。提高性能

<span v-for((val,index) in arr2) :key='index'>{{val}}</span >
張 王 李 張

查看v-for實(shí)例演示

8. v-on

v-on 用來綁定事件 用法 v-on:事件="函數(shù)"；函數(shù)可傳入$event參數(shù)獲取事件對象

<div id="app">
   <button v-on:click="push($event)">點(diǎn)擊</button> //點(diǎn)擊button執(zhí)行push方法
   {{arr}} //展示數(shù)據(jù)
</div>
<script type="text/javascript">
var vm = new Vue({
    el:"#app",
    data:{
        arr:[1,2,3,4,5] //定義數(shù)據(jù)
    },
    methods:{  //事件方法 定義在 methods 選項(xiàng)中
        push:function(e){
            //輸出 event 事件對象
            console.log(e)
            //方法里的this 代表vue實(shí)例
            this.arr.push(6)  //向數(shù)組追加數(shù)據(jù)
        }
    }
})

v-on可以簡寫為@

<button v-on:click="test">v-on</button>
<button @click="test">@</button>

$event.target 獲取當(dāng)前dom對象

new Vue({
    el:"#app",
    methods:{
        test2:function(e){
            alert(e.target.innerHTML) //彈出當(dāng)前元素的內(nèi)容
        }
    },
})

查看v-on演示

8. 1事件修飾符

• .stop

阻止冒泡
原生阻止冒泡方式需要先獲取事件對象 然后通過 e.stop.proPagation()來阻止冒泡

//原生：
function(e){
   e.stopPropagation()
}
//Vue: @事件.stop="執(zhí)行方法"
<button @click.stop="c2"></button>

• .prevent

阻止默認(rèn)事件
原生方式，通過事件對象 e.preventDefault()

//原生：
function(e){
   e.preventDefault()
}
//Vue: @事件.prevent ="執(zhí)行方法"
<a  target="_blank" @click.prevent="d"></a>

• .capture

添加事件監(jiān)聽器時(shí)使用事件捕獲模式
通俗的說，冒泡是由內(nèi)而外，如果外面元素添加 capture 則優(yōu)先先執(zhí)行；

<div id="obj1" v-on:click.capture="doc">
    obj1
    <div id="obj2" v-on:click.capture="doc">
        obj2
        <div id="obj3" v-on:click="doc">
            obj3
            <div id="obj4" v-on:click="doc">
                obj4
            </div>
        </div>
    </div>
</div>

點(diǎn)擊obj4的時(shí)候，彈出的順序?yàn)椋簅bj1、obj2、obj4、obj3； 由于1，2有修飾符，故而先觸發(fā)事件，然后就是4本身觸發(fā)，最后冒泡事件。

查看事件修飾符實(shí)例演示

9. v-bind

v-bind 綁定DOM屬性 可以簡寫為 “ : ”

創(chuàng)建vue實(shí)例

new Vue({
    el:"#app",
    data:{
        src:"https://cn.vuejs.org/images/logo.png",
        a:"a",
        b:"b",
        c:"c",
        ble:true
    }   
})

img標(biāo)簽綁定 src

<img :src="src"/>
//執(zhí)行結(jié)果 <img src="https://cn.vuejs.org/images/logo.png"/>

綁定元素class

<p :class="a"></p>
//執(zhí)行結(jié)果 <p class="a"></p>

根據(jù)條件綁定元素class

<p :class="{a:true}">:class="{類值:真就添加類假則不添加}"</p>
//執(zhí)行結(jié)果 <p class="a"></p>
<p :class="ble?a:b">:class="ble?a:b" 如果 ble為true 則添加a 否則添加b</p>

添加多個(gè)class名綁定class數(shù)組

<p :class="[a,b]">:class="[class1,class2]"</p>
//執(zhí)行結(jié)果 <p class="a b"></p>
<p :class="[a,{b:true}]">:class="[a,{b:true}]"</p>
//執(zhí)行結(jié)果<p class="a b"></p>
<p :class="[a,ble?c:b]">:class="[a,ble?c:b]" </p>
//執(zhí)行結(jié)果<p class="a c"></p>

查看v-bind實(shí)例演示

9. v-model

v-model指令，他能輕松實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定。

input文本框

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

textarea 文本框

<textarea v-model="message" placeholder="add multiple lines"></textarea>
<p>Message is: {{ message }}</p>

復(fù)選框
單個(gè)復(fù)選框綁定布爾值

//html
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
//js
new Vue({
    el:'#app',
    data:{
        checked :false,
    }
})

多個(gè)復(fù)選框綁定數(shù)組

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
//js
new Vue({
    el:'#example-3',
    data:{
        checkedNames:[],
    }
})

綁定單選框 綁定字符串

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
//js
new Vue({
    el:'#example-3',
    data:{
        picked:'',
    }
})

下拉框
v-model 作用在下拉框時(shí)要綁定給select 標(biāo)簽上，而不是 option，單選項(xiàng)是綁定字符串 多選項(xiàng)綁定數(shù)組

<select v-model="message5" name="">
  <option value="數(shù)據(jù)1" selected="selected">數(shù)據(jù)1</option>
  <option value="數(shù)據(jù)2">數(shù)據(jù)2</option>
</select>

new Vue({
el:'#app',
data:{
    message5:"數(shù)據(jù)1"
}
})

查看v-model演示案例

10 v-pre

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

不在進(jìn)行vue編譯，直接以源格式輸出

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

輸出出來： {{ this will not be compiled }}

查看v-pre實(shí)例演示

11 v-cloak

vue實(shí)例未編譯完成前 帶有 v-cloak指令的元素都是隱藏的直到編譯結(jié)束,這樣有效的避免了 {{}} 閃爍的問題。
需要配合 css使用 先定義css [v-cloak] {display: none;}

<style type="text/css">
[v-cloak] {
  display: none;
}
</style>
<p v-cloak>{{msg}}</p>

查看v-cloak演示

12 v-once

這個(gè)指令，只渲染元素和組件一次，之后數(shù)據(jù)改變時(shí) 插值處的內(nèi)容不會改變

查看v-once實(shí)例演示