官網
html
Vue.js(讀音 /vju/,相似於 view) 是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是,Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層,它不只易於上手,還便於與第三方庫或既有項目整合。另外一方面,當與單文件組件和 Vue 生態系統支持的庫結合使用時,Vue 也徹底可以爲複雜的單頁應用程序提供驅動。vue
vue中兩個核心點:node
響應的數據綁定:
webpack
當數據發生改變->自動更新界面
git
利用Object.definedProperty中的setter/getter代理數據,監控數據的操做github
組合的視圖組件:web
ui頁面映射爲組件樹
vue-cli
劃分組件可維護,可重用,可測試
npm
虛擬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會通知頁面從新渲染: