1. v-text 指令

<strong>v-text ：</strong>用于更新標(biāo)簽包含的文本卷扮，它的作用跟雙大括號(hào)的效果一樣;

<div id="app">
    <p v-text="msg"></p>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"hiddensmile"
        }
    })
</script>

<p></p>標(biāo)簽加上了指令 v-text ，它的值就是data數(shù)據(jù)中的msg谨读，渲染結(jié)果：

渲染成功

<p v-text="msg"></p>
===
<p>{{msg}}</p>

2. v-html 指令

<strong>用法：</strong>綁定一些包含html代碼的數(shù)據(jù)在視圖上盐须，比如：“< em >hello，Vue!< /em >”，這個(gè)字符串包含了< em >標(biāo)簽贼邓，要想< em >不被當(dāng)作普通的字符串渲染出來阶冈，就得用 v-html 指令;

<div id="app">
    <p v-text="msg"></p>
    <b v-html="main"></b>
</div>
<script>
new Vue({
el:"#app",
  data:{
     msg:"hiddensmile",
     main:"<em>hello，Vue!</em>"
  }
})
</script>

渲染成功

< em >標(biāo)簽被成功解析并渲染出來塑径，視圖上的文本也有了加粗 斜體的效果女坑，這就是v-html發(fā)揮了作用，bingo统舀！

3. v-show 指令

<strong>v-show 指令：</strong>用來控制元素的display css屬性的匆骗，取值為true/false;

<div id="app">
    <p v-show="display">我是false</p>
    <p v-show="show">我是true</p>
</div>
<script>
new Vue({
  el:"#app",
  data:{
    display:false,
    show:true,
  }
})
</script>

用了兩個(gè)< p >標(biāo)簽，都加上了 v-show 指令誉简，取值分別為true和fasle碉就，直接看效果

渲染成功

<strong>釋：</strong>第二個(gè)p標(biāo)簽的v-show設(shè)置為true，元素正常顯示闷串；第一個(gè)p標(biāo)簽的v-show設(shè)置為false瓮钥，元素解析成：

<p style="display:none">我是false</p>

所以它不會(huì)顯示在視圖上。這就是 v-show 指令的用法烹吵，簡單明了碉熄。

4. v-if 指令

<strong> v-if </strong>指令的取值也是為true或false，它控制元素是否需要被渲染出來肋拔，拿兩個(gè)元素設(shè)置不用的值锈津，對比一下看效果就知道了。

<div id="app">
    <p v-if="if_true">我是true</p>
    <p v-if="if_false">我是false</p>
</div>
<script>
new Vue({
  el:"#app",
  data:{
    if_true:true,
    if_false:false,
  }
 })
</script>

把 v-show 指令換成了 v-if 凉蜂，同樣是兩個(gè)< p >標(biāo)簽琼梆，同樣是不同的取值：true和false×裕看效果:

v-if true渲染成功

<strong>釋：</strong>設(shè)置為true的< p >標(biāo)簽茎杂，成功渲染出來，而設(shè)置為false的< p >標(biāo)簽爆存，直接被一行注釋代替了蛉顽，并沒有被解析渲染出來。

v-show 和 v-if 都能控制元素顯示或者隱藏先较，區(qū)別:如果需要頻繁切換顯示/隱藏的携冤，就用 v-show；如果運(yùn)行后不太可能切換顯示/隱藏的闲勺，就用 v-if 曾棕。

5. v-else 指令

<strong>v-else 指令：</strong>要求前一個(gè)兄弟節(jié)點(diǎn)必須要使用 v-if 指令;

<div id="app">
    <p v-if="if_1">我是if_1</p>
    <p v-else>我是else_1</p>
    <p v-if="if_2">我是if_2</p>
    <p v-else>我是else_2</p>
</div>
<script>
new Vue({
    el:"#app",
    data:{
        if_1:false,
        if_2:true,
    }
})
</script>

渲染成功

<strong>釋：</strong>只有第二個(gè)< p >標(biāo)簽被渲染出來，第一個(gè)< p >標(biāo)簽由于 v-if 指令的值為false菜循，直接被忽視了翘地，不渲染。直接渲染第二個(gè)< p >
一旦第一個(gè)標(biāo)簽的 v-if 指令的值為true，被忽視的就是第二個(gè)< p >標(biāo)簽了衙耕。 v-if 和 v-else 只有一個(gè)會(huì)被渲染出來昧穿。

6. v-for 指令

<strong>v-for 指令：</strong>data中的存放的數(shù)據(jù)不是個(gè)簡單的數(shù)字或者字符串，而是數(shù)組Array類型橙喘，這時(shí)时鸵，要把數(shù)組的元素展示在視圖上，就需要用到vue提供的 v-for 指令厅瞎，來實(shí)現(xiàn)列表的渲染饰潜。

<ul id="app">
    <li v-for="list in items">我是{{list}}</li>
</ul>
<script>
new Vue({
    el:"#app",
    data:{
        items:['list01','list02','list03']
    }
})

<strong>釋：</strong>data中包含數(shù)組 items，數(shù)組包含三個(gè)元素：“l(fā)ist01”和簸，“l(fā)ist02”彭雾，“l(fā)ist03”，我們通過 v-for 指令把它渲染出來锁保，其中l(wèi)ist表示數(shù)組中的每個(gè)元素薯酝。渲染結(jié)果：

渲染成功

<strong>釋：</strong>解析渲染出三個(gè)li，其中包含的值分別是數(shù)組中的元素身诺，表示解析渲染成功蜜托。

<em>循環(huán)解析：</em>不但要拿到items數(shù)組的每個(gè)元素list抄囚，我們還獲取每個(gè)元素的索引霉赡，寫法如上，循環(huán)的時(shí)候加上(list,index)幔托。

<strong>如何拿到索引穴亏？</strong>拿到每個(gè)元素的索引也很簡單，稍微改動(dòng)一下代碼重挑，把html部分的代碼修改為：

<ul id="app">
    <li v-for="(list,index) in items">{{list}}</li>
</ul>

渲染成功

<strong>注：v-for指令除了可以迭代數(shù)組嗓化，還可以迭代對象和整數(shù)。 </strong>

7. v-bind 指令

<strong> v-bind 指令</strong>的作用和用法谬哀，它用于動(dòng)態(tài)綁定DOM元素的屬性刺覆，比較常見的比如：< a >標(biāo)簽的href屬性，<img/>標(biāo)簽的src屬性史煎。

<div id="app">
    ![](src_img)
</div>
<script>
new Vue({
    el:"#app",
    data:{
        src_img:"../images/2.jpg"
    }
})
</script>

<strong>釋：</strong>用 v-bind 指令來修飾src屬性谦屑，表明它的值是一個(gè)動(dòng)態(tài)的值，對應(yīng)的則是data中的src的值：../images/2.jpg.

8. v-on 指令

<strong>v-on 指令</strong>相當(dāng)于綁定事件的監(jiān)聽器篇梭，綁定的事件觸發(fā)了氢橙，可以指定事件的處理函數(shù);

<div id="app">
    <button v-on:click="click_btn">點(diǎn)擊</button>
</div>
<script>
new Vue({
    el:"#app",
    methods:{
        click_btn(){
            console.log("hello,hiddensmile!")
        }
    }
})
</script>

通過 v-on 指令修飾click點(diǎn)擊事件，指定事件響應(yīng)后的處理函數(shù)為methods中的click_btn( )方法

渲染成功

<strong>釋：</strong>點(diǎn)擊按鈕恬偷，可以成功觸發(fā)click事件悍手，并且調(diào)用click_btn( )，想給處理程序say( )傳參數(shù)，也是可以的坦康；

<div id="app">
    <button v-on:click="click_btn('女')">點(diǎn)擊</button>
</div>
<script>
new Vue({
    el:"#app",
    methods:{
        click_btn(sex){
            console.log("hello,"+sex)
        }
    }
})
</script>

帶參數(shù)渲染成功

<strong>釋：</strong>click_btn(sex)接受一個(gè)參數(shù)sex竣付，并把sex打印出來，在調(diào)用的時(shí)候傳如實(shí)參“女”滞欠。

9. v-model 指令

<strong>v-model 指令：</strong>最重要最常用的指令卑笨，一般用在表單輸入，它幫助我們輕易地實(shí)現(xiàn)表單控件和數(shù)據(jù)的雙向綁定仑撞。

<div id="app">
    <input type="text" v-model="msg">
    <p>剛剛輸入的是：{{msg}}</p>
</div>
<script>
new Vue({
    el:"#app",
    data:{
        msg:'',
    }
})

<strong>釋：</strong>只要給input控件添加 v-model 指令赤兴，并指定關(guān)聯(lián)的數(shù)據(jù)msg，就可以把用戶輸入的內(nèi)容綁定在msg上隧哮。把msg的內(nèi)容顯示出來桶良，看是不是跟用戶輸入的內(nèi)容是同步更新的：

渲染成功

10. v-once 指令

<strong>v-once 指令：</strong>它的特點(diǎn)是只渲染一次，后面元素中的數(shù)據(jù)再更新變化沮翔，都不會(huì)重新渲染陨帆。

<div id="app">
    <input type="text" v-model="msg">
    <p v-once>你輸入的是：{{msg}}</p>
</div>
<script>
new Vue({
    el:"#app",
    data:{
        msg:"hello,大家好，我是hiddensmile采蚀！"
    }
})
</script>

<strong>釋：</strong> 修改1:< p >標(biāo)簽增加了 v-once 指令疲牵；
修改2：msg的初始值不再是空字符串∮苁螅看效果：

渲染成功

<strong>釋：</strong> 由于msg有了初始值纲爸，第一次渲染的時(shí)候，input控件和< p >標(biāo)簽都有了內(nèi)容妆够，由于< p>標(biāo)簽添加了 v-once 指令识啦，所以，后期更新msg的值的時(shí)候神妹，< p>標(biāo)簽的內(nèi)容不會(huì)發(fā)生改變颓哮；