Vue.js (5) | vue js階層
Vue.js對於表單元素,Vue.js提供一個專用的指令,可以讓你將View及資料建立雙向綁定。當雙向資料綁定建立之後,使用者輸入的內容會自動儲存到一個變數中,同時,這個變數的資料會被更新到所有和它綁定的View中,看起來就像是立即的資料同步。關於雙向綁定在表單元素中,我們要偵聽使用者的輸入,同時做出必要的資料更新,也就是同時做兩件事,雖然這麼做很容易,例如以下範例:HTML
也就是說,View (這裡的 <input> 及 {{ txt }}) 和資料 (這裡的 txt) 做了綁定,於是資料改變,View 跟著變;同時,資料 (這裡的 txt) 也和 View (這裡的 <input> ) 做了綁定(這裡透過事件的觸發),於是 View (這裡的 <input> ) 的內容改變,資料也就跟著變。
這麼做其實太複雜了,你可以想像當網站功能變多時會是什麼情況。Vue.js 提供了一個更容易使用的指令 v-model 來做這件事,使用它,你就不用寫得像前面的範例一樣複雜,當網站的功能變多時,你的程式碼仍可以保持精簡,程式碼越少,就越不容易犯錯。看看用 v-model 的範例:
HTML<div id="vm"> <input v-model="tx... 對於表單元素,Vue.js 提供一個專用的指令,可以讓你將 View 及資料建立雙向綁定。當雙向資料綁定建立之後,使用者輸入的內容會自動儲存到一個變數中,同時,這個變數的資料會被更新到所有和它綁定的 View 中,看起來就像是立即的資料同步。 關於雙向綁定 在表單元素中,我們要偵聽使用者的輸入,同時做出必要的資料更新,也就是同時做兩件事,雖然這麼做很容易,例如以下範例: HTML<div id="vm"> <input @keyup="onInput" :value="txt"> {{ txt }} </div> <script> new Vue({ el: #vm, data: { txt: }, methods: { onInput: function (event) { this.txt = event.target.value } } }) </script> 當你在輸入框中輸入任何內容,都會在放開按鍵時觸發事件,於是修改的資料 txt 會立即反應在 {{ txt }} 區塊中。當你手動修改 txt 的值,它的更動也會立即呈現在 <input> 及 {{ txt }} 中。