Vue 還提供了 v-model 指令，它能輕松實現表單輸入和應用狀態之間的雙向綁定。 即修改頁面的值可導致變量修改，
單個復選框，綁定到布爾值 獲取是布爾值
多個復選框，綁定到同一個數組 獲取是數組 對應復選框的value 如果沒有設置 默認是html值
單選按鈕 選擇框 獲取對應的val
修飾符 數據處理
<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg">
<!-- 自動將用戶的輸入值轉為數值類型 -->
<input v-model.number="age" type="number">
<!-- 自動過濾用戶輸入的首尾空白字符 -->
<input v-model.trim="msg">
計算屬性：模板內的表達式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
對於任何復雜邏輯，你都應當使用計算屬性。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
計算屬性是基於它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。不希望有緩存，可以使用函數方法的形式來代替。
偵聽屬性：Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：偵聽屬性。watch
計算屬性的 setter:計算屬性默認只有 getter，不過在需要時你也可以提供一個 setter。
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter ---在全稱改變是也會引起firstName和lastName改變
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
})
偵聽器:
雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。
使用 watch 選項允許我們執行異步操作 (訪問一個 API)，限制我們執行該操作的頻率，並在我們得到最終結果前，設置中間狀態。這些都是計算屬性無法做到的。