Vue.js（讀音 /vju/，類似於 view） 是一套構建用戶界面的漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也完全能夠爲複雜的單頁應用程序提供驅動。
vue中兩個核心點：
響應的數據綁定：
當數據發生改變->自動更新界面
利用Object.definedProperty中的setter/getter代理數據，監控數據的操作
組合的視圖組件：
ui頁面映射爲組件樹
劃分組件可維護，可重用，可測試
虛擬DOM：
1.運行js的速度是很快的，但大量的操作DOM就會很慢。市場在更新數據後重新渲染頁面，這樣照成在沒有改變數據的地方也重新渲染DOM節點，造成很大程度上的資源浪費。
2.利用在內存中生成與真實DOM與之對應的數據結構，這個在內存中生成的結構均稱之爲虛擬DOM。
3.當數據發生改變是，能夠智能計算出重新渲染組件的最小代價並應用到DOM操作上。
MVVM模式：
M：Model數據結構
V：View視圖模板
vm：view-Model視圖模型
1)安裝
直接安裝vue，從官方下載vue.js。開發使用開發版本，項目上線切換生成版本
引入vue.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/vue.js"></script>
</head>
<!-- 模板 -->
<div id="demo">
{{ message }}
</div>
<script>
// 數據
let data = {
message:"Hellow,Vue!"
}
// Vm實例
var vm = new Vue({
el:"#demo", // 掛載元素:html的掛載點
data:data
});
</script>
<body>
</body>
</html>
本地測試：
nmp方式安裝vue:
全局安裝 vue-cli：
# npm install --global vue-cli
安裝好以後進入nodejs的模塊目錄下把vue全名添加到全局：
找到vue執行文件所在位置：
添加全局（路徑根據實際情況）：
創建一個基於 webpack 模板的新項目：
# vue init webpack my-project
安裝依賴，走你（安裝速度相當慢，可以嘗試換成阿里的cnpm提速）：
# cd my-project # npm install # npm run dev
vue響應式數據綁定，數據發生改變，界面發生改變：
類似響應式佈局，瀏覽器尺寸大小發生改變，界面發生改變。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/vue.js"></script>
</head>
<!-- 模板 -->
<div id="demo">
<input type="text" v-model="message" />
<p>`message`</p>
</div>
<script>
// 數據
let data = {
message:"Hellow,Vue!"
}
// Vm實例
var vm = new Vue({
el:"#demo", // 掛載元素:html的掛載點
data:data
});
</script>
<body>
</body>
</html>指令會通過輸入框的特點，會把vm中的值放進value裏面，同時監聽value的變化，當value發送改變，vm會通知頁面重新渲染：
