VUE：漸進式JavaScript框架（小白自學）
阿新 • • 發佈：2018-10-31
相關 run 擴展插件 路由 htm hello 延展 rip 移動
VUE：漸進式JavaScript框架
一、官網
英文 https://vuejs.org/
中文 https://cn.vuejs.org/
二：漸進式
即有一個核心庫，在需要的時候再逐漸添加插件的一種概念
作用：動態構建界面（將後臺的數據在前臺動態顯示出來）
三：與其他框架的關聯
1）借鑒 angular 的 模板 和 數據綁定 技術
2）借鑒 react 的 組件化 和 虛擬DOM 技術
四：Vue擴展插件
1）vue-cli： vue腳手架（幫我們下載基於vue的、編寫好配置的、設定好依賴的項目）
2）vue-resource(axios)：ajax請求
3）vue-router：路由
4）vuex：狀態管理
5）vue-lazyload：圖片懶加載
6）vue-scroller：頁面滑動相關
7）mint-ui：基於vue的UI組件庫（移動端）
8）element-ui：基於vue的UI組件庫（PC端）
五：簡單實現雙向數據綁定
新建項目，之後的學習都在此項目上延展，引入vue.js
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1.引入Vue.js 2.創建Vue對象 el：指定根element（選擇器） data：初始化數據（頁面可以訪問） 3.雙向數據綁定：v-model 4.顯示數據:{{xxx}} 5.理解vue的mvvm實現 --> <!-- view --><div id="app"> <input type="text" v-model="message"/> <p>正在輸入：{{message}}</p> </div> <script type="text/javascript" src="../js/vue.js" ></script> <script> //創建vue實例，引入配置對象 const vm=new Vue({ el: ‘#app‘, //element:選擇器 //數據（model） data:{ messgae:‘Hello Vue!‘ } }) </script> </body> </html>
六：引入開發者插件
前提：先參考 前端的標配：npm 先安裝好npm和cnpm
https://github.com/vuejs/vue-devtools
解壓，然後來到安裝目錄下
cnpm install
下載依賴
過程挺慢~不過似乎npm命令更慢~
然後執行
npm run build
編譯源程序
修改shells \ chrome目錄下的mainifest.json 中的persistant為true：
選擇剛剛編譯後的工程中的shells目錄下，chrome的整個文件夾，確定
成功！
以後便可以使用這個擴展程序來調試Vue
七：model view viewModel模型
VUE：漸進式JavaScript框架（小白自學）