前言

昨天講到了{{}}這個Vue的雙下巴之外，也提到了一些資料綁定 (Data Binding)的部分~ 但Vue可以綁定得遠遠不只頁面上的內容，Vue也可以直接影響以及渲染DOM本身!!

Directives

而我們稱這個叫做: Directives!，根據Vue官方上面寫的介紹:

If you have not used AngularJS before, you probably don’t know what a directive is.

直接開嗆Angular哈哈哈，官方也有講到另外一個重點: Directives 只能放在元素裡面，先看個例子~

<div v-text="'I Love ' + user.name"></div>

• v 就是官方設定的一個default
• text是用來告訴Vue這個directive是甚麼
• user.name就是一個隨著vue instance做更動的東西

Argument

上面的 v-text坦白說比較少會用到~ 你也可能察覺不出來他的好處，因為畢竟data-binding也可以做到，這邊再舉一個例子

<div v-on="click : submitForm"> </div>

你可以看到 v-on 也是一個directive，他表達的意思是 當你按下button -> 就會觸發 submitForm這個method.

看看還能綁定些甚麼?

各位如果有看昨天提到的data binding，我其實有補充到一個 v-html，沒錯~他也是directive的一員，除此之外，我們還有幾個好夥伴:

1. v-for
   這是一個可以拿來重複渲染元素的工具，假設今天我們有有一個list
   如果有稍微學過HTML，list 的架構就是

   <ul or ol>
       <li> 選項 </li>
   </ul or /ol>
   

   假設今天我們要跑遍所有items (items就是我們定義的data)

   data: {
     items: [
       { text: 'Hello' },
       { text: 'Love You' }
     ]
   }
   

   除了可以一個一個寫之外我們也可以用v-for去跑一遍items這個list

   <ul>
      <li v-for="item in items" :key="item.text">
           {{ item.text }}
      </li>
    </ul>
   

綁定Style

2. v-bind
   這個東西可以讓我們拿來綁定attribute~ 因為attribute的綁定不適用雙下巴{{}}，在tag裡面的話就要使用directive

   <div v-bind:class="{ active: isActive }"></div>
   

   然後我們在data上面定義 isActive是甚麼

   data: {
       isActive: true
   }
   

   這樣就代表

   <div class='active'> </div>
   

綁定條件

3. v-if
   這個就跟你寫程式語言會碰到的假設if是一樣意思的，通常可拿來綁訂一個boolean，譬如今天 v-if='true' -> 就顯示甚麼這樣

   <div><v-if='condition'> show </div>
   

4. v-show

綁定事件

5. v-on
   剛剛稍微提到了他就是: 「當做了甚麼事情 -> 引發一個事件!!」

   <div>
     <button v-on:click="say('hi')">Say hi</button>
   </div>
   

   然後依樣記得要在script的地方定義~ 這邊不是放在data裡面了，而是要放在一個叫做 methods的地方，像是這樣

   export default {
      methods: {
       say: function (message) {
         alert(message)
       }
     }
   }
   

後記

好啦那Vue的基本概念就先講到今天為止啦~ 有了這些基本概念，最簡單的網頁開發也都可做到囉!! 至於還有其他document跟更多Vue的功能，也請各位到Vue官網自己搜尋~

明天開始我會開始進入project，然後從project中開始學習~ 畢竟所有的學習都是從問題產生的，所以我會帶各位走過你接下來開發會遇到的問題，並從中學習~
各位要繼續加油啊啊啊!!!!