1 | Vue input
接下來的幾篇內容,會開始解說Vue.js模板裡的黑魔法——「指令」(directive)。為什麼稱它做黑魔法呢?相信跟著此系列看到這裡的讀者,或多或少都發現Vue.js提供了一些特殊的語法,沒錯,就是那些v-開頭的屬性們,像是最早出現的v-model、後來用來處理事件處理的v-on等等。先前沒有特別解說的疑惑,從這一篇開始詳細來說明。這些帶有v-開頭的屬性們,在Vue.js裡面就被稱為「指令」(directive),當與指令搭配運算式(expression)的值被改變時,對應的標籤(包括節點、元件等)也會隨之影響。換句話說,透過指令的作用與狀態的變化,我們也就...
接下來的幾篇內容,會開始解說 Vue.js 模板裡的黑魔法 —— 「指令」(directive)。
為什麼稱它做黑魔法呢? 相信跟著此系列看到這裡的讀者,或多或少都發現 Vue.js 提供了一些特殊的語法, 沒錯,就是那些 v- 開頭的屬性們,像是最早出現的 v-model 、後來用來處理事件處理的 v-on 等等。
先前沒有特別解說的疑惑,從這一篇開始詳細來說明。
這些帶有 v- 開頭的屬性們,在 Vue.js 裡面就被稱為 「指令」(directive) ,
當與指令搭配運算式 (expression) 的值被改變時,對應的標籤 (包括節點、元件等) 也會隨之影響。 換句話說,透過指令的作用與狀態的變化,我們也就可以透過改變狀態 (資料) 來操作整個網頁系統了。
屬性綁定 - v-bind我發現有不少朋友在剛開始學習 Vue.js 的時候,很可能都做過類似的事,就是覺得既然可以利用 {{ }} 將資料輸出至網頁模版上,那麼網頁標籤內的「屬性」是不是也能這樣呢:
const vm = Vue.createApp({ data () { return { customId: item-id-1 } } }).mount(#app);1234567
<div id="app"> <p id="{{ customId }}">...</p> </div>123
像上面程式的執行結果,標籤 <p> 的 id 並不會如我們所預期地出現 item-id-1, 因為像 {{ }} 的模板語法並沒有辦法被套用在 HTML 標籤的「屬性」上, 如果我們需要由 Vue.js 來控制標籤的「屬性」,則可以使用 v-bind 的指令。
v-bind 指令的用法很簡單,我們只要再標籤上面加上 v-bind:屬性名稱, 以剛剛的範例來說,我們希望由 Vue 的實體來輸出 id,就可以這樣做:
<p v-bind:id="customId">...</p>1
實際在瀏覽器渲染時會變成:
<...