Vue.js是JavaScript的一個MVVM庫，M是指模型數據，V是指視圖容器，VM是指視圖模型，模型數據通過視圖模型監聽視圖容器的變化，而視圖容器通過視圖模型獲取模型數據的變化進行渲染，實現了數據的雙向綁定。
data屬性
-
data屬性是Vue實例的數據對象，可以綁定的是對象或者是函數。
-
當數據對象一旦被data綁定就會發生變化，數據對象中的屬性會擁有get和set屬性，用來監聽數據變化，實時響應。
-
Vue實例會代理data綁定對象上的所有屬性，即所有屬性直接添加到Vue實例化對象中。
-
Vue實例可以通過$data屬性訪問原始數據對象。
Vue實例是通過new Vue()創建的，{{ }}是Vue進行插值的語法，app是Vue的實例化對象，這里需要注意的是el綁定的是視圖容器，即DOM對象，data屬性綁定的是模型數據。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
obj={
msg:"hello Vue";
};
var app=new Vue({
el:'#app',
data:obj
})
</script>
</html>
在控制台查看app，可以發現app擁有很多屬性或方法，其中以 $ 與 _ 開頭的都是app內置的屬性或方法，從下圖中標紅的位置可以發現：
-
Vue實例化對象中的$el屬性綁定的是DOM對象；
-
data屬性綁定的數據對象obj中的屬性msg直接添加到了Vue實例化對象中，並且擁有了get和set屬性；
-
通過
$data屬性可以訪問原始的模型對象，原始的數據對象發生了變化，變得和Vue實例中的數據是相同的，即obj.msg===app.$data.msg。
