指令

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

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ù)表達式之真假值鸿摇，切換元素的 display CSS 屬性,元素即使隱藏也存在DOM中

html 代碼

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

javascript 代碼

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

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

4. v-if

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

html 代碼

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

javascript 代碼

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

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

5. v-else

v-else v-if的else語句 代表表達式為false 的時候渲染元素
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é)果
此時 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é)果
此時 div c 將被創(chuàng)建

v-show與v-if 實例演示

7. v-for

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

創(chuàng)建 vue實例

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)和值 (第一個參數(shù)是val  第二個是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 (第一個參數(shù)是val  第二個是key)
<span v-for((val,key) in obj)>{{key}}:{{val}}</span >
key1:val1   key2:val2   key3:val3

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

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

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

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

查看v-for實例演示

8. v-on

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

<div id="app">
   <button v-on:click="push($event)">點擊</button> //點擊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 選項中
        push:function(e){
            //輸出 event 事件對象
            console.log(e)
            //方法里的this 代表vue實例
            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

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

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

• .capture

添加事件監(jiān)聽器時使用事件捕獲模式
通俗的說陌粹，冒泡是由內(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>

點擊obj4的時候掏秩，彈出的順序為：obj1、obj2荆姆、obj4蒙幻、obj3； 由于1胆筒，2有修飾符邮破，故而先觸發(fā)事件，然后就是4本身觸發(fā)仆救，最后冒泡事件抒和。

查看事件修飾符實例演示

9. v-bind

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

創(chuàng)建vue實例

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>

添加多個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實例演示

9. v-model

v-model指令，他能輕松實現(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ù)選框
單個復(fù)選框綁定布爾值

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

多個復(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 作用在下拉框時要綁定給select 標(biāo)簽上摧莽，而不是 option，單選項是綁定字符串 多選項綁定數(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

跳過這個元素和它的子元素的編譯過程顿痪∧髟可以用來顯示原始 Mustache 標(biāo)簽。跳過大量沒有指令的節(jié)點會加快編譯员魏。

不在進行vue編譯丑蛤，直接以源格式輸出

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

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

查看v-pre實例演示

11 v-cloak

vue實例未編譯完成前 帶有 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

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

查看v-once實例演示