在 Vue 中,一個組件可以定義自己的數據屬性,稱為組件的數據對象。數據對象作為 Vue 組件的基本數據源,可以在組件的模板中使用。數據對象的設置方法是通過 Vue 實例的 data 選項來完成。
Vue.component('my-component', { data: function () { return { count: 0 } } })
上面的代碼展示了如何在 Vue 組件中設置數據對象。一個組件可以有任意數量的數據屬性。在這個例子中,我們只有一個數據屬性 count,它的初始值為 0。
在組件中可以訪問數據屬性,和在 Vue 實例中訪問屬性類似:
Vue.component('my-component', { data: function () { return { count: 0 } }, template: '{{ count }}' })
上面的代碼定義了一個組件模板,用于顯示組件的 count 屬性值。通過 {{ count }} 部分使用了 Vue 模板系統,它會在組件中動態地顯示 count 的值。
在 Vue 中,數據屬性是響應式的。這意味著當數據屬性的值發生變化時,相關的 DOM 元素會自動更新:
Vue.component('my-component', { data: function () { return { count: 0 } }, template: '', methods: { increment: function () { this.count++ } } })
上面的代碼定義了一個帶有按鈕的組件模板,點擊按鈕會遞增 count 的值。這個例子展示了如何在方法中訪問數據屬性,以及如何響應式地更新 DOM 元素。
總之,Vue 組件的數據對象是組件的基本數據源,可以在組件的模板中使用。數據對象的設置方法是通過 Vue 實例的 data 選項來完成。組件中的數據屬性是響應式的,當其值發生變化時會自動更新相關的 DOM 元素。
上一篇es6 json規范
下一篇vue datepick