[ Vue.js ] 指令 Directives

11th鐵人賽 javascript vue.js d3.js

ShawnL

2019-09-06 13:54:54

5933 瀏覽

學習完 Vue 之後，想要透過單元測試守護你的專案，但又不知道從何起手？
別擔心，快來訂閱作者最新系列文《小白也能輕鬆瞭解的 Vue3 單元測試！》
讓你的 Vue 專案更上一層樓！

在上一集，我們已經建立好基本的環境並使用樣板語法將資料內容顯示出來，接下來我們將學習更進階一點方法來顯示資料內容。

指令（Directives）

在 Vue.js 中有提供一些帶有前綴v-的指令，指令主要放在 HTML 標籤當中，如同 HTML 屬性一樣，而我們可以透過指令去命令那些元素做事情，只要指令條件符合時，就會執行該指令的動作。而透過這些指令與上一回的樣板語法，我們可以直接在 HTML 上去綁定我們需要做的事情，以下列出幾個常用到的指令與用法：

v-if

透過v-if指令，當v-if後的條件為true時，該元素就會顯示在 DOM 上，若false則該元素不會顯示在 DOM 的結構上。

範例：

<div id='app'>
  <div v-if='text1'>最後這段文字會顯示</div>
  <div v-if='text2'>最後這段文字不會顯示</div>
</div>
<script>
let vm = new Vue({
  el:'#app',
  data:{
    text1:true,
    text2:false
  } 
})
</script>

v-show

和上面的v-if很像，但v-show在false時的消失，實際觀察 DOM 會發現該元素只是被加上了行內樣式 style="display:none"而已，並沒有從DOM上消失。

v-for

接下來介紹的這個指令非常的好用，透過v-for，我們可以將data中的某筆資料遍歷輸出，用法就有如原生 JavaScript 中的 for...of迴圈一樣，取一個變數名稱去拿到資料物件裡面的值，可以用來快速製作一個樣板。

範例：

<div id='app'>
  <ul>
    <li v-for="(person,index) in class001" :key="person.id">
      第{{ index }}筆資料，姓名：{{ person.name }}，年齡：{{ person.age }}
    </li>
  </ul>
</div>
<script>
let vm = new Vue({
  el:'#app',
  data:{
    class001:[
      {
        id:'001',
        name:'小明',
        age:12
      },
      {
        id:'002',
        name:'小美',
        age:10
      },
      {
        id:'003',
        name:'小華',
        age:11
      },
    ]
  } 
})
</script>

需要注意的地方，在使用v-for指令輸出時，官網強烈建議需要給予一個 key 來作為可識別的資料，有點類似於身分證的概念；而當我們需要對資料操作時，Vue.js 也才能依靠身分證去找到對的人，如果我們是使用門牌（如index）來檢驗的話，哪天裡面的租客搬走換人了就會找錯人了！

另外一個須注意的地方是，需要避免v-for與v-if在同一個地方上使用，因為有可能會渲染到本來應該會隱藏的欄位，而官方也做了詳細解釋，簡單來說你叫貓咪要趴下，又要他站起來，那牠到底是要趴下還是站起來呢？

橘橘：我選擇趴下好了

v-model

透過v-model指令綁定在元素上，可以創造一個雙向綁定資料的概念，例如我們讓資料雙向綁定在一個input元素上，input的值就會顯示出他對應的'我會顯示在input中'，如果我們更改input的值，最後 data 裡面的值也會被我們更改。

範例：

<div id='app'>
  <input type="text" v-model="message">
</div>
<script>
let vm = new Vue({
  el:'#app',
  data:{
    message:'我會顯示在input中'
  } 
})
</script>

v-on

v-on指令使用方法類似於使用 HTML 原生屬性on一樣。例如要使用點擊觸發的行為，我們只要在元素上寫上v-on:click="yourFunction"即可，而寫函式的位置則是在 Vue.js 實體中的 methods 裡頭。範例如下：

HTML部分

<div id="app">
  <button type="button" v-on:click="handleOnClick">Click Me!</button>
</div>

JavaScript部分

let vm = new Vue({
  el:'#app',
  methods:{
    handleOnClick : function(){
      alert('Hello Vue!')
    }
  }
})

除此之外，v-on也可以縮寫為@，將上面的範例改寫後會變成：

<div id="app">
  <button type="button" @click="handleOnClick">Click Me!</button>
</div>

這樣的效果會跟上方一模一樣。

v-bind

v-bind主要可以用來綁定元素中的屬性，並且將屬性的值交由 Vue.js 中的 data 來控管，達到動態控制，使該元素變成是可控制的元素，這個觀念在 React.js 中也常常用到，例如常用到的一個做法就是控制元素的class屬性。下方範例將示範一個由按鈕去驅動資料讓元素的 class 能動態變化：

CSS部分，這裡簡單定義了box與rotate的樣式

.box{
    width:100px;
    height:100px;
    background-color:lightblue;
}
.rotate{
    transform:rotate(45deg);
}

HTML部分，這裡透過v-on的點擊事件讓isRotate的值可以反轉布林值，而 v-bind:class 的意思則是當isRotate為true該元素加上rotate的 class名稱，若false則不添加。

<div id="app">
  <div class="box" v-bind:class="{'rotate':isRotate}"><div>
  <button type="button" v-on:click="isRotate = !isRotate"> Rotate the box</button>
</div>

JavaScript部分

let vm = new Vue({
  el:'#app',
  data:{
    isRotate: false,
  } 
})

如此一來我們便可以使用按鈕來驅動元素樣式。而這個指令也有縮寫的寫法，用法省略v-bind只留下:的部分，範例修改上面後的如下：

<div id="app">
  <div class="box" :class="{'rotate':isRotate}"><div>
  <button type="button" @click="isRotate = !isRotate"> Rotate the box</button>
</div>

以上是一些常用到的指令與用法，關於其他更多深入的用法，可到官網上有更多詳細範例說明可以參考，而明天的章節將會介紹到修飾符的內容，我們將會知道怎麼用簡單的修飾符讓指令的變化更加豐富！我們明天見囉～