前端框架——Vue小驛站（1）

 

---

• Vue.js是一款輕量級的以數據驅動的前端JS MVVM框架
• 提供了一種幫助咱們快速構建並開發前端項目的新的思惟模式
• 構建用戶界面的漸進式框架
• 只關注視圖層， 採用自底向上增量開發的設計
• 儘量簡單的 API 實現響應的數據綁定和組合的視圖組件
  
• 其和jQuery最大的不一樣點在於jQuery經過操做DOM來改變頁面的顯示，
• 而Vue經過操做數據來實現頁面的更新與展現

Vue數據驅動的概念模型

• Vue.js主要負責的是上圖綠色正方體ViewModel的部分
• 其在View層（即DOM層）與Model層（即JS邏輯層）之間
• 經過ViewModel綁定了DOM Listeners與Data Bingings兩個至關於監聽器的東西
• 當View層的視圖發生改變時，Vue會經過DOM Listeners來監聽並改變Model層的數據
• 當Model層的數據發生改變時，其也會經過Data Bingings來監聽並改變View層的展現
• 實現了一個雙向數據綁定的功能，也是Vue.js數據驅動的原理所在

一個html文件中 直接能夠經過script標籤引入Vue.js

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

• 能夠在頁面裏寫Vue.js代碼
• 經過new Vue()構建了一個Vue的實例
• 實例中
  能夠包含掛在元素（el），數據（data），模板（template），方法（methods）
  生命週期鉤子（created等）等選項

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

（1）el代表咱們的Vue須要操做哪個元素下的區域，’#demo’表示操做id爲demo的元素下區域。
（2）data表示Vue 實例的數據對象，data 的屬性可以響應數據的變化。
（3）created表示實例生命週期中建立完成的那一步，當實例已經建立完成以後將調用其方法。

Vue經常使用指令 -----<<< Vue數據驅動

（1）v-text: 用於更新綁定元素中的內容，相似於jQuery的text()方法
（2）v-html: 用於更新綁定元素中的html內容，相似於jQuery的html()方法
（3）v-if: 用於根據表達式的值的真假條件渲染元素，若是上圖P3爲false則不會渲染P標籤
（4）v-show: 用於根據表達式的值的真假條件 顯示隱藏元素，切換元素的 display CSS 屬性
（5）v-for: 用於遍歷數據渲染元素或模板，如圖中P6爲[1,2,3]則會渲染3個P標籤，內容依次爲1，2，3
（6）v-on: 用於在元素上綁定事件，圖中在P標籤上綁定了showP3的點擊事件

---

• 網速慢插值 閃爍特別明顯
• 因此v-clock 搭配這個 style樣式屬性選擇器

關於更多的Vue指令能夠查看Vue2.0文檔，地址：https://vuefe.cn/api/#指令

• 在一個html頁面裏經過引入Vue.js來直接寫Vue代碼， 不經常使用。 不利於後期的維護和代碼的公用
• 須要用到Vue提供的技術棧來構建強大的前端項目。

除了Vue.js咱們還須要用到：

（1）vue-cli：Vue的腳手架工具，用於自動生成Vue項目的目錄及文件。
（2）vue-router： Vue提供的前端路由工具，利用其咱們實現頁面的路由控制，局部刷新及按需加載，構建單頁應用，實現先後端分離。
（3）vuex：Vue提供的狀態管理工具，用於同一管理咱們項目中各類數據的交互和重用，存儲咱們須要用到數據對象。
（4）ES6：Javascript的新版本，ECMAScript6的簡稱。利用ES6咱們能夠簡化咱們的JS代碼，同時利用其提供的強大功能來快速實現JS邏輯。
（5）NPM：node.js的包管理工具，用於同一管理咱們前端項目中須要用到的包、插件、工具、命令等，便於開發和維護。
（6）webpack：一款強大的文件打包工具，能夠將咱們的前端項目文件同一打包壓縮至js中，而且能夠經過vue-loader等加載器實現語法轉化與加載。
（7）Babel：一款將ES6代碼轉化爲瀏覽器兼容的ES5代碼的插件

• 中大型Vue項目 如何利用vue-cli來自動生成咱們項目的前端目錄及文件
• 瞭解Vue中一切皆組件的概念及父子組件的通訊問題
• 講解在Vue項目中咱們如何使用第三方插件，最後利用webpack來打包及部署咱們的項目。

• 使用vue-cli以前咱們須要安裝node.js，
• 利用其提供的npm命令來安裝vue-cli。
• 安裝node.js只需去其官網下載軟件並安裝便可，地址爲：https://nodejs.org/en/

安裝完成以後咱們打開電腦的cmd命令行工具依次輸入上圖中的命令：

（1）npm install -g vue-cli：全局安裝vue-cli
（2）vue init webpack my-project: 利用vue-cli在目錄地址生成一個基於webpack的名爲’my-project‘的Vue項目文件及目錄
（3）cd my-project：打開剛剛建立的文件夾
（4）npm intall：安裝項目所依賴的包文件
（5）npm run dev：利用本地node服務器在瀏覽器中打開並瀏覽項目頁面

VUE下載

NPM 安裝方法

• NPM是隨同NodeJS一塊兒安裝的包管理工具， NodeJS代碼部署
  
  
  
  
  
  
  

命令行工具

• Vue.js 提供一個官方命令行工具，可用於快速搭建大型單頁應用。

# 全局安裝 vue-cli

# 建立一個基於 webpack 模板的新項目

• 這裏須要進行一些配置，默認回車便可
  
  
• 剛構建好的vue項目中，咱們會發現一個App.vue和Hello.vue的文件，
• 那麼像這樣的以.vue後綴結尾的文件即是咱們Vue項目中常見的單文件組件。
• 單文件組件包含了一個功能或模塊的html、js及css。
• 在.vue文件中，咱們能夠在template標籤中寫html，
• 在script標籤中寫js，
• 在style標籤中寫css。
• 這樣一個功能或模塊就是一個.vue組件，對於組件公用和後期的維護也很是便捷

父子組件通訊

• 以單文件組件爲核心的項目開發中
• • vue父子組件之間是如何交換數據來實現通訊
• 提供了props來實現父組件向子組件傳遞數據
• 經過$emit來實現子組件向父組件傳遞數據。固然若是是較爲複雜和廣泛的數據交互，建議你們使用vuex來同一管理數據。
  詳情請見：https://vuefe.cn/guide/components.html#使用Props傳遞數據
  
• 基於webpack的vue項目中咱們是如何使用插件的

（一）全局使用

（1）在index.html引入：
這樣的方式不推薦使用，由於存在前後加載順序的問題
有些插件不支持這一方式。

（2）經過webpack配置文件引入：
主要經過plugin配置webpack.ProvidePlugin()方法實現，
不過只適合支持CommonJs規範並提供一個全局變量的插件，
如jQuery中的$。

（3）經過import + Vue.use()引入：
這種方式須要在全局.vue文件中import須要加載的插件，
而後經過Vue.use(‘插件變量名’)來實現，不過此方法只支持遵循Vue.js插件編寫規範的插件使用，
如vue-resourece。

（二）單文件使用

（1）經過import直接引入：
這種方式能夠在須要調用插件的.vue文件中使用，
不過須要注意和實例的建立順序問題，或者也能夠經過require引入。

（2）import + components註冊：
此方式爲Vue組件的使用方式，
能夠在一個組件中註冊並使用一個子組件。

• 搞定整個Vue項目的前端編碼階段後，咱們須要對咱們的前端項目文件進行部署和優化工做，主要的幾個方式以下：

（1）使用webpack的DefinePlugin指定生產環境：
經過plugin中的DefinePlugin配置，咱們能夠聲明’process.env’屬性爲’development’(開發環境)或者’production’(生產環境)，
結合npm配置文件package.json中scripts的命令來切換環境模式十分方便。

（2）使用UglifyJs自動刪除代碼塊內的警告語句：
通常在生產環境的webpack配置文件中使用，
經過newwebpack.optimize.UglifyJsPlugin()來進行配置，
刪除警告語句能夠縮減文件的體積。

（3）使用Webpack hash處理緩存：
當咱們須要對發佈到線上的文件進行修改時，從新編譯的文件名若是和以前版本的相同會引發瀏覽器沒法識別而加載緩存文件的問題。
這樣咱們須要自動的生成帶hash值的文件名來阻止緩存。詳見：https://segmentfault.com/a/1190000006178770#articleHeader7

（4）使用v-if減小沒必要要的組件加載：
v-if指令其實頗有用處，
它可讓咱們項目中暫時不須要的組件不進行渲染，
等須要用到的時候在渲染，好比某個彈窗組件等。
這樣咱們能夠減小頁面首次加載的時間和文件量。

除了以上幾點的優化，還有不少優化選擇，有興趣的童鞋能夠好好地瞭解下webpack的API文檔，畢竟webpack的功能十分強大。