介紹
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動，比較適用於已了解關於 HTML、CSS 和 JavaScript 中級知識的同學。
創建實例
每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例開始的，雖然沒有完全遵循 MVVM 模型，但是 Vue 的設計也受到了它的啟發。因此在文檔中經常會使用 vm (ViewModel 的縮寫) 這個變量名表示 Vue 實例。
var vm = new Vue({
// 選項
})
數據
當一個 Vue 實例被創建時，它將 data 對象中的所有的屬性加入到 Vue 的響應式系統中。當這些屬性的值發生改變時，視圖將會產生“響應”，更新為最新的值。但是要注意的是必須是在實例創建的時候就已經存在於data中的屬性才是響應式的,如果是在創建實例后追加的屬性值，那么他將得不到響應式的更新。如果你需要在創建實例后才用到某些屬性值，那么可以在創建實例的開始就為他賦值為空或者其他的一個初始值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試vue</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var data = {
message : '123',
};
var vm = new Vue({
el : '#app',
data : data,
})
data.message = '234';
</script>
</body>
</html>
1.我們用的是script標簽來引入vue，這個時候Vue會被注冊為一個全局變量
2.同時我們在實例化的時候分別傳入了el（為Vue對象綁定了根DOM元素）、data(Vue實例的數據)，data可以先在外面預定義，也可以直接在實例化的時候寫入data對象
3.我們在實例化之后改變了data對象里面的messge，這個時候頁面上會隨之從123變成456，這就是響應式變化。
對象
Vue 實例暴露了一些有用的實例屬性。它們都有前綴 $，以便與用戶定義的屬性區分開來。他們分別有
vm.$data
vm.$el
vm.$props
vm.$options
vm.$parent
vm.$root
vm.$children
vmm.$slots
vm.$scopedSlots
vm.$refs
vm.$isServer
vm.$attrs
vm.$listeners
因為初學，這里我們只測試vm.$data以及vm.$el,vm.$data就是我們在創建Vue實例的都時候傳入的data數據，而vm.$el就是創建Vue實例綁定的根DOM元素對象。
data示例代碼：
data.message = '234';//這是直接修改傳入data的方式
vm.$data.message = '456';//這是直接利用Vue示例屬性修改的方式
el示例代碼：
console.log(vm.$el);//這是Vue的根dom元素
console.log(document.getElementById('app'));//這是直接js獲取到的DOM元素
document.getElementById('app').innerHTML = '789';//利用js對象修改文本
vm.$el.innerHTML = '78912';//利用Vue的屬性來修改文本
方法
Vue 在實例化的時候還有一些方法：
數據類型方法
vm.$watch
vm.$delete
vm.$set
生命周期類方法
vm.$mount
vm.$forceUpdate
vm.nextTick
vm.$destory
事件類方法
vm.$on
vm.$once
vm.$off
vm.$emit
我們主要來看下數據類方法中的$watch，其他的后續學習
watch是主要觀測一個數據的變化，當數據發生改變時就會被執行。示例代碼：
<script type="text/javascript">
var data = {
message : '123',
};
var vm = new Vue({
el : '#app',
data : data,
})
vm.$watch('message', function(newValue, oldValue){
console.log(newValue);
console.log(oldValue);
})
vm.$data.message = '234';
</script>
