正文：
在昨天，我們有使用雙括弧來將字串綁定到元素的 text 屬性上，今天要來講解更多對元素的操作囉

首先，我們先來介紹如何將我們在 vue 中宣告的內容綁定到 html 上

v-bind
<div v-bind:id="id"></div> //將 vue 內的 data:id 綁定到此元素的 id 屬性上
<div v-bind:title="title"></div> // 將 data:title 綁定到此元素的 title 屬性

new Vue({
    el: '',
    data: {
        id: 'divId',
        title: 'divTitle'
    }
})

而當我們需要綁定像是 class 或 style 這類有著多種值的屬性時方法較不一樣，大多是以判斷式或陣列來進行動態切換

v-bind for class or style
<div v-bind:class="{class1: isActive, class2: isActive}"></div>

vue 實體
data: {
    isActive: true,
    isActive2: false
}

產出的元素為

    <div class="class1"></div>

而我們要將事件綁定到元素上就需要透過 v-on 此指令，例如要將 click 綁定到 button 此元素，使 count 此變數為點擊次數：

<button v-on:click="count+=1">test v-on:click</button>
<p>count: {{count}}</p>

vue 實體
data:{
    count: 0
}

將事件綁定上去後，每點擊一次 count 就會加一並即時顯示在下方囉

同時，我們也可以使用縮寫來使用 v-bind 和 v-on，縮寫方式分別為：

<div v-bind:id="id"> => <div :id="id"> //直接將 v-bind 省略
<button v-on:click="!isActive"> => <button @click="!isActive" //將 v-on更改為小老鼠符號

Vue 還提供了許多修飾符來幫助開發，像是調用 preventDefault 或 stopPropagation 等等的方法，那這邊就不一一敘述了，官網傳送門
明天介紹如何在 vue 中創立函式~下回見

嘮叨一下：
許願一下這次鐵人賽有食物文章...