1. 數據綁定
數據綁定是講數據和視圖相關聯，當數據發生變化時，可以自動更新視圖。
- 插入值
文本插入值是最基本使用方式，我們在vue渲染的組件中使用{{message }} 然後將vue的data中設置messaged的值，代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template</title>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
<p>
{{message}}
</p>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let app=new Vue({
el:'#app',
data:{
message:'Trump is so stupid!'
}
})
</script>
</html>
例子中的標籤 {{message}} 將會被相應的vue中定義的數據對象message的值替換掉，當輸入框的值進行更改時候，我們發現下面P標籤的{{message}}的值也會動態變化。
- 表達式
我們可以對{{message}} 進行簡單的表達式運算，例如我們可以將頁面p標籤進行大寫轉換如下所示：
頁面展示效果如下所示：
2.計算屬性
通常我們會在模版中綁定表達式，模版是爲了描述視圖中對應的數據。我們可以對錶達式進行計算。當計算屬性對應的值發生改變時候，與之相關的視圖數據也會進行相應的變化。
首先讓我們需要知道的是Vue提供的一個computed方法，我們通過這個方法實現對數據的一些計算操作。下面我們先看一下一個案例效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
A列: <input type="text" v-model="v1"/>
{{v1}}</br>
B列: <input type="text" v-model="v2"/>
{{v2}}</br>
C列: <input type="text" v-model="v3"/>
{{v3}}</br>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
v1: 'Donald',
v2: 'Trump',
},
computed: {
v3() {
return this.v1+" "+this.v2
}
},
})
</script>
</html>
你可以看到當A列和B列的數據發生變化時候，C列的數據也發生了變化。這裏我們計算了v3的的值，v3()方法相當於model的getter方法。但是當我們對v3的輸入框輸入值時候v1和v2的值沒有任何變化，如果想要實現如下這樣的效果呢？
既然我們提供了v3的getter方法，同理我們也可以在computed中爲其設置setter方法。代碼示例如下：
computed: {
v3 : {
get: function() {
return this.v1+" "+this.v2 +" " +Date.now()
},
set:function(newval) {
let values= newval.split(' ');
this.v1=values[0];
this.v2=values[1]
}
}
},
運行後我們發現當改變v3的值時候，v1的值或v2的值也相應進行更改，每一次操作時間戳對象都在變化表示：每次getter都是獲取最新的對象值。