DAY 9 - v-bind 綁定樣式與 v-on 監聽事件

v-bind

• 綁定你的 attributes(屬性)
• v-bind 簡寫、縮寫
• 常見運用 -Button 加一個 disabled
• 試著綁定多個 attribute (屬性)

v-on

• 綁定你的 event 事件
• v-on 簡寫、縮寫
• v-on 常用修飾符

v-bind

綁定你的 attributes (屬性)

一般我們綁定會使用 {{ 文字、資料 }}，但是呢在HTML裡他認不得雙大括號，因此要綁定屬性我們會用 Vue指令v-bind

v-bind 綁定一個 id
<div v-bind:id="dynamicId"></div>

v-bind 簡寫、縮寫

v-bind 簡寫:
v-bind 在實戰上十分常運用到，因此產生了縮寫語法:，我們只要在前方加入: 即可
<div :id="dynamicId"></div>
這樣就成功綁定屬性id了，是不是沒有很難呢，嘗試看看吧!

常見運用 v-bind 綁定屬性加入 disabled

<button :disabled="isButtonDisabled">Button</button>

綁定多個 attribute (屬性)

先用 JavaScript 寫一個 Object 將他放入然後綁定

運用 v-bind 綁定屬性，此時id 、class都綁定成功

在 F12 可以看見我成功將Id、Class 一同綁定至 HTML 上

v-on

綁定你的 event 事件

v-on 是用來綁定事件用的，使用者在使用網站時會出發很多行為 - 我們稱作 event (事件) ， 可以在Mdn這邊查看所有事件，而 v-on 指令 就是綁定事件觸發行為。

來看下方範例 :
我們寫了一個 Button ，將他綁定事件 click (點擊) ，使用者當點擊時就會觸發登入

v-on 簡寫、縮寫

v-on 可以縮寫為 @

v-on 常用修飾符

我們一樣可以在後方加入修飾符，來看看下方範例 :
<button v-on:click.prevent="login()"> 登入 </button>

• v-on:click 綁定事件
• .prevent 後方加入修飾符
• login() 觸發函式

常見的修飾符運用 :

• .prevent 取消預設行為 = event.preventDefault()
• .stop 取消事件冒泡 = event.stopPropagation()