到底什麼式Vue directives

Vue directives簡單來說就是一種可以掛在HTML上的特殊指令，常見的有以下

• v-on
• v-bind
• v-if
• v-show
• v-for
• v-model

v-on

v-on簡單來說就是當他所綁定的事件被觸發時就會去觸發methods裡的函數，這樣說好像不好理解那就用例子來說吧

我們現在body創一個buttom，用v-on這個指令去設定當按鈕被按時會觸發message這個函數，在這裡的v-on我們也可以用@來代替使用，意思是一樣的

在methods裡我們有訂一個函數，當被觸發時就會跑出"按鈕被點擊了"這個信息

最後跑出這個信息的話表示成功了

v-bind

v-bind簡單說就是在Vue中的屬性綁定，我們知道data中的屬性Mustache呈現在template裡，但是現在我們想在Vue裡去綁定HTML的屬性時就會用到v-bind這個指令，補充說一下，因為人類是很懶惰的動物所以這裡v-bind可以用:來代替，那麼現在就來做個簡單的例子吧

在這個例子裡img中的src及class的屬性不會因為被v-bind綁定而失去原本的功能，而被綁定的資料會依data裡的imgSrc和className去更動，所以在這我們只需要去更改data的資料就不用動到原本的HTML了，在被綁定的資料除了「字串」以外也可以使用「物件」或者是「陣列」喔!!!

最後我們就可以在網頁上看到vue的logo了

今天就先到這了，明天見~