前言
如果你之前已經習慣了用jQuery操作DOM，學習Vue.js時請先拋開手動操作DOM的思維，
因爲Vue.js是數據驅動的，你無需手動操作DOM。它通過一些特殊的HTML語法，將DOM和
數據綁定起來。一旦你創建了綁定，DOM將和數據保持同步，每當變更了數據，DOM也會相
應地更新。
一、Vue簡介
1.1 漸進式框架-Vue
vue官網說：Vue.js是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue
採用自底向上增量開發的設計。
漸進式我個人理解就是階梯式向前。vue是輕量級的，它有很多獨立的功能或庫，我們會根據
我們的項目來選用vue的一些功能。就像我們開發項目時如果只用到vue的聲明式渲染，我就
只用vue的聲明渲染，而我們要用他的組件系統，我們可以引用它的組件系統。
vue的漸進式表現爲：
聲明式渲染——組件系統——客戶端路由——-大數據狀態管理——-構建工具1.2 Vue兩個核心點
1.2.1 響應式數據綁定
- 當數據發生變化是，vue自動更新視圖。
- 它的原理是利用了 Object.definedProperty 中的setter/getter 代理數據，
監控對數據的操作。（這就是爲什麼vue不支持ie8 以及更早的ie瀏覽器的原因）
1.2.2 組合的視圖組件 ###
- ui頁面映射爲組件書
- 劃分組件可維護、可重用、可測試
![]()
1.3 虛擬Dom
js的運行速度已經很快了，然而大量的DOM 操作就會變得很慢，但是前端本身就是要通過
JS處理DOM來更新視圖數據的。這樣在更新數據後會重新渲染頁面，這樣就造成在沒有
改變數據的地方也重新渲染了DOM節點。這樣性能方面就會很受影響。
利用在內存中生成與真實DOM與之對應的數據結構，這個在內存中生成的結構稱之爲虛擬DOM。
當數據發生變化時，能夠智能的計算出重新渲染組件的最小代價並應用到DOM操作上。
vue就是利用了這一點。（vue 渲染組件的步驟圖：）
二、MVVM模式
我們可能經常聽說的有MVC模式和MVVN模式。
angularJS就是所謂的 MVC 模式的框架，model 、view、controller。
而vue 是 MVVM 模式的框架：
- M： model （數據層，也就是指數據（前端是js））
- V：view ( 也就是指DOM層 或用戶界面 )
- VM : view-model (處理數據和界面的中間層，也就是指Vue)
三、第一個Vue程序
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src='https://unpkg.com/vue'></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello world!'
}
})
</script>
</html>1)構造器
每個 Vue.js 應用都是通過構造函數 Vue 創建一個Vue的根實例啓動：
var vm = new Vue({
// 選項
})2）屬性與方法
每個 Vue 實例都會代理其 data 對象裏所有的屬性：
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 設置屬性也會影響到原始數據
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3除了 data 屬性， Vue 實例暴露了一些有用的實例屬性與方法。
這些屬性與方法都有前綴 $，以便與代理的 data 屬性區分。例如：
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一個實例方法
vm.$watch('a', function (newVal, oldVal) {
// 這個回調將在 `vm.a` 改變後調用
})3）實例生命週期
每個 Vue 實例在被創建之前都要經過一系列的初始化過程。例如，實例需要配置數據
觀測(data observer)、編譯模版、掛載實例到 DOM ，然後在數據變化時更新 DOM 。
在這個過程中，實例也會調用一些 生命週期鉤子 ，這就給我們提供了執行自定義邏輯的
機會。
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src='https://unpkg.com/vue'></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
beforeCreate: function () {
console.log("vue beforeCreate......")
},
created: function () {
console.log("vue created......")
},
beforeMount: function () {
console.log("vue beforeMount......")
},
mounted: function () {
console.log("vue mounted......")
},
beforeUpdate: function () {
console.log("vue beforeUpdate......")
},
updated: function () {
console.log("vue updated......")
},
beforeDestroy: function () {
console.log("vue beforeDestroy......")
},
destroyed: function () {
console.log("vue destroyed......")
}
})
</script>
</html>結果：
vue beforeCreate......
vue created......
vue beforeMount......
vue mounted......
谷歌瀏覽器控制檯輸入 app.message = 11111
vue beforeUpdate......
vue updated......
app.$destroy()
vue beforeDestroy......
vue destroyed......
undefined瀏覽器中顯示：
