Vue.js 指令（Directives）

Saturday, September 25, 2021

Vue.js 指令（Directives）

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-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>