ViewModel to View
在 Vue App 裡,透過使用雙大括號 {{}} (Mustache) 進行資料綁定,當 Vue 在 mount 階段時,即會將 {{}}
取代為 data 中設定的資料內容,如下
<div>{{ message }}</div>
若要針對 attribute 來綁定,如下
<div v-bind:class="dynamicClass">text</div>
<div v-bind:title="message">this is message</div>
當 data 中的屬性值變更時,頁面上對應的資料也會即時重新渲染
注意:若在 mount 階段沒有綁定的 data 屬性,之後更改這些屬性值,頁面也不會即時重新渲染,因此要在 data
定義時就要加入屬性,若剛開始沒有值可以指定,可以用給定初始值的方式賦值
new Vue('example', {
data: function() {
return {
message: '',
size: 0
}
}
});