Vue.js: data、v | Vue input
14Apr2017如何利用data與v-model實現雙向綁定?原理、語法與表單元件範例。datavueinstance可傳入選項物件,其中可設定data(資料)。data是用來儲存元件內部狀態或資料和v-model合作實現雙向綁定資料型別data可以是object或function,但元件(component)的data只能是function,這是因為元件內各自擁有自己的data,而非共用的關係。原理在observer中,data透過Object.defineProperty()為元件內屬性重新定義getter和settermethod。當data被修改時,會透過setter通知變化,觸發watcher重新計算、更新與渲染DOMelement。語法設定data,...
14 Apr 2017如何利用 data 與 v-model 實現雙向綁定?原理、語法與表單元件範例。
datavue instance 可傳入選項物件,其中可設定 data(資料)。
data 是用來
儲存元件內部狀態或資料 和 v-model 合作實現雙向綁定 資料型別data 可以是 object 或 function,但元件(component)的 data 只能是 function,這是因為元件內各自擁有自己的 data,而非共用的關係。
原理在 observer 中,data 透過Object.defineProperty()為元件內屬性重新定義getter和setter method。當 data 被修改時,會透過setter通知變化,觸發 watcher 重新計算、更新與渲染 DOM element。
語法設定 data,如下所示。
<div id="app"> ${ message } </div> var vm = new Vue({ el: #app, delimiters: [${, }], data: { message: Hello World!, }, }); // 由於部落格會把使用雙花括號的內容吃掉,所以設定 delimiters 以顯示完整程式碼。元件的 data 只能是 function。
var Component = Vue.extend({ data: function() { return { msg: Hello World!, }; }, });打開瀏覽器會看到
由於 vue instance 重新設定了getter和setter方法,因此 vm.$data.message 完全等於 vm.message。
vm.$data.message === vm.message; // true 注意 自訂屬性名稱不要使用$或_開頭,以免和 vue 所定義的屬性或 API 衝突。因此,對於使用$...