12-----指令系統介紹
所謂指令系統，大家可以聯想咱們的cmd命令行工具，只要我輸入一條正確的指令，系統就開始幹活了。
在vue中，指令系統，設置一些命令之後，來操作我們的數據屬性，並展示到我們的DOM上。
OK，接下來我們一一介紹我們的指令系統的用法。
一、條件渲染
1、v-if
表示條件渲染
在vue中，我們使用v-if指令，將當前的dom元素設置
<p v-if = ‘show‘>顯示</p>
註意：show變量，是數據屬性中存儲的值。要麽真(true)要麽假(false)。該屬性值為true的時候，p標簽顯示，反之則不顯示。
也可以添加一個v-else塊。
<divv-if = ‘show‘>顯示</div> <divv-else>隱藏</div>
另外我們發現，v-if將第一個div渲染，並沒有將第二個div渲染。
另外還有v-else-if塊，它是2.1.0新增的。
<div v-if="type === ‘thunder‘> 打雷 </div> <div v-else-if="type === ‘rain‘> 下雨 </div> <div v-else> 雷陣雨 </div>
2、v-show
另一個用於根據條件展示元素的選項是 v-show 指令。用法大致一樣：
<p v-show=‘ok‘>網站導航</p>
如果ok數據屬性值為false。那麽顯示結果如下
不同的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display
註意：v-show不支持v-else塊
3、v-if vs v-show
v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什麽也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什麽，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
4、vi-if與v-for一起使用
v-for 指令，後面馬上介紹到。
當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。
二、class與style綁定
v-bind
操作元素的 class 列表和內聯樣式是數據綁定的一個常見需求。因為它們都是屬性。所以我們可以用 v-bind 處理它們：只需要通過表達式計算出字符串結果即可。不過，字符串拼接麻煩且易錯。因此，在將 v-bind 用於 class 和 style 時，Vue.js 做了專門的增強。表達式結果的類型除了字符串之外，還可以是對象或數組。
比如我們可以
綁定字符串
<span v-bind:title=‘time‘>鼠標懸停幾秒後當前時間</span>
data:{ time: `頁面加載於${new Date().toLocaleString()}`, }
綁定HTML Class
我們在js中常用操作dom的css樣式屬性的方法有很多，在vue中可以直接使用v-bind:class來給每個標簽元素添加class。
對象語法
我們可以傳給 v-bind:class 一個對象，以動態地切換 class：
... data:{ isRed:true }
<div v-bind:class=‘{box1:isRed}‘></div>
效果如下：
如果有按鈕的話，我們可以通過點擊按鈕動態的切換class。此外，v-bind:class 指令也可以與普通的 class 屬性共存
<div class=‘a‘ v-bind:class=‘{box1:isRed,box2:isGreen}‘></div>
和如下data：
data:{ isRed:true, isGreen:fasle }
效果如下：
有這麽一個css樣式：
.box1{ width: 100px; height: 100px; background-color: red; } .box2{ width: 100px; height: 100px; background-color: green; }
那麽我們在文檔結構中可以加一個
<button v-on:click =‘clickHandler‘>切換</button>
使用v-on綁定js中所有的事件。這裏我們是綁定了點擊事件。（後面會介紹）
在實例化options參數中添加如下配置：
methods:{ clickHandler(){ this.isGreen = !this.isGreen; } }
數組語法
我們可以把一個數組傳給v-bind:class,以應用一個 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: { activeClass: ‘active‘, errorClass: ‘text-danger‘ }
渲染為：
<div class="active text-danger"></div>
如果你也想根據條件切換列表中的 class，可以用三元表達式：
<div v-bind:class="[isActive ? activeClass : ‘‘, errorClass]"></div>
這樣寫將始終添加 errorClass，但是只有在 isActive 是 true時才添加 activeClass。
不過，當有多個條件 class 時這樣寫有些繁瑣。所以在數組語法中也可以使用對象語法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
三、事件處理
監聽事件
可以用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。
1 <div id=‘app‘> 2 <button v-on:click = ‘count+=1‘>加{{count}}</button> 3 <p>點了{{count}}次</p> 4 </div>
var app = new Vue({ el:‘#app‘, data:{ count:0 } })
結果為：當我點擊的按鈕的時候，下面p標簽的數據也會發生變化，同時button的文字也會發生變化。
事件處理方法
然而許多事件處理邏輯會更為復雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要調用的方法名稱
1 <div id=‘app‘> 2 <button v-on:click = ‘countClick‘>加{{count}}</button> 3 <p>點了{{count}}次</p> 4 </div>
12-----指令系統介紹