vue指令系統介紹

所謂指令系統，你們能夠聯想我們的cmd命令行工具，只要我輸入一條正確的指令，系統就開始幹活了。

在vue中，指令系統，設置一些命令以後，來操做咱們的數據屬性，並展現到咱們的DOM上。

OK，接下來咱們一一介紹咱們的指令系統的用法。

一、條件渲染

1、v-if

表示條件渲染

在vue中，咱們使用v-if指令，將當前的dom元素設置

<p v-if = 'show'>顯示</p>

注意：show變量，是數據屬性中存儲的值。要麼真(true)要麼假(false)。該屬性值爲true的時候，p標籤顯示，反之則不顯示。

 

也能夠添加一個v-else塊。

<div v-if = 'show'>顯示</div>
<div v-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、v-if與v-for一塊兒使用

v-for指令，後面立刻介紹到。

當v-if與v-for一塊兒使用時，v-for具備比v-if更高的優先級。

 

 

二、class與style綁定

1、v-bind

操做元素的 class 列表和內聯樣式是數據綁定的一個常見需求。由於它們都是屬性。因此咱們能夠用 v-bind 處理它們：只須要經過表達式計算出字符串結果便可。不過，字符串拼接麻煩且易錯。所以，在將 v-bind 用於 class 和 style 時，Vue.js 作了專門的加強。表達式結果的類型除了字符串以外，還能夠是對象或數組。

好比咱們能夠

綁定字符串

<span v-bind:title='time'>鼠標懸停幾秒後當前時間</span>

data:{
    time: `頁面加載於${new Date().toLocaleString()}`,
}

當鼠標懸停在span標籤幾秒以後，會顯示time的值。

綁定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 代碼。

<div id='app'>
    <button v-on:click = 'count+=1'>加{{count}}</button>
    <p>點了{{count}}次</p>
</div>

var app = new Vue({
    el:'#app',
    data:{
    count:0 
    } 
})

結果爲：當我點擊的按鈕的時候，下面p標籤的數據也會發生變化，同時button的文字也會發生變化。

事件處理方法

然而許多事件處理邏輯會更爲複雜，因此直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。所以 v-on 還能夠接收一個須要調用的方法名稱

 <div id='app'>
    <button v-on:click = 'countClick'>加{{count}}</button>
    <p>點了{{count}}次</p>
</div>

var app = new Vue({
   el:'#app',
    data:{
       count:0 
    },
    methods:{
       countClick(){
           this.count+=1;
       }
    }
 })        

爲何在HTML中監聽事件？

你可能注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但沒必要擔憂，由於全部的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會致使任何維護上的困難。實際上，使用 v-on 有幾個好處：

1. 掃一眼 HTML 模板便能輕鬆定位在 JavaScript 代碼裏對應的方法。

2. 由於你無須在 JavaScript 裏手動綁定事件，你的 ViewModel 代碼能夠是很是純粹的邏輯，和 DOM 徹底解耦，更易於測試。

3. 當一個 ViewModel 被銷燬時，全部的事件處理器都會自動被刪除。你無須擔憂如何本身清理它們。

 

在這裏多補充一點：v-bind能夠簡寫爲':'、v-on: 能夠簡寫'@'

 

列表渲染

一個數組列表的v-for

用v-for把一個數組對應爲一組的元素。

咱們用 v-for 指令根據一組數組的選項列表進行渲染。v-for 指令須要使用 item in items 形式的特殊語法，items 是源數據數組而且 item 是數組元素迭代的別名。

另外：v-for 還支持一個可選的第二個參數爲當前項的索引。

 

 

一個對象的v-for

你也能夠用 v-for 經過一個對象的屬性來迭代。