前端框架 Vue (2) 指令觀念前導

在圖示左側的 View (html) 的部分，v 開頭為指令，指令可以區分成三大類：資料、渲染方法和事件綁定

三大分類

1. 資料

v-model 和 資料 進行雙向綁定，資料怎麼變，v-model 跟著變，反之亦然

2. 渲染方法

渲染方法不會操作資料內容，但會將資料反應在畫面上，只會讀不會寫入

3. 事件綁定

事件綁定雖然可以直接操作資料，但通常不會這樣使用。
事件綁定用來操作方法 methods，方法再去變更資料，資料再重新渲染

---

專有名詞

指令 (Directives)

v-xxx 開頭的為各式指令

修飾符 (Modifiers)

Vue Modifiers
If you want user input to be automatically typecast as a number, you can add the number modifier to your v-model managed inputs

透過修飾符讓寫法更為簡便，舉例：.number 讓 v-model 自動將值轉為數值，

縮寫 (Shorthands)

舉例 1：v-on 縮寫為符號 ＠，縮寫後用法不變

舉例 2：v-bind: 省略 v-bind

<img v-bind:src="imageSrc" />

// 縮寫
<img :src="imageSrc" />

參考資料＋圖片來源

• 六角 2022 Vue 直播班
• Vue 官網

tags: 六角學院 六角 2022 Vue 直播班 Vue