插值是在Vue使用中最常見和最簡單的一個用法，使用兩層嵌套的大括號({{變量}})表示大括號中的內容將會被替換爲變量表示的值，主要是用來表示文本的內容。
Vue的實現過程中將會跟蹤這個變量值的變化，當這個值變化的時候對應使用插值的地方上的值也將會變化，經過我的實驗Vue跟蹤的值不只是會跟蹤Vue對象中data屬性中的值也可以跟中window環境下的值。
具體的程序如下，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.6.2/vue.min.js"></script>
</head>
<body>
<div id="test">
<div>Value1 is {{name}} </div>
<div>Value2 is {{value}}</div>
<input type="button" value="修改插值的內容" @click="changetext()">
</div>
<script>
var value=0;
var vm = new Vue({
el: '#test',
data: {
name:"0"
},
methods:{
changetext:function(){
this.name=(parseInt(this.name)+1).toString();
window.value++;
}
}
});
</script>
</body>
</html>
程序設計思路
變量value是在window作用域下的全局變量，vm也是在全局作用域下的Vue對象的實例。有兩個塊用於顯示vm實例中data屬性中的name的值和全局變量value的值。有一個button按鈕每點擊一下name的值和value的值將會做加一的操作。
結果
（1）在瀏覽器上打開此網頁，如圖顯示，顯示的是當前value和name的值都是0
（2）點擊button多次之後，看到顯示的name的值和value的值都是 9，在控制檯查看value的值也是9。可見Vue使用插值的方法不僅僅可以跟蹤Vue實例中的值的變化還可以跟蹤非此實例中的值的變化。
