Vue.js的圖文詳解

這次帶給大家Vue.js的圖文詳解，使用Vue.js的的注意事項有哪些，下面就是實戰案例，一起來看一下。

Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速建立並開發前端專案的新的思維模式。本文旨在幫助大家認識Vue.js，了解Vue.js的開發流程，並進一步理解如何透過Vue.js來建構一個中大型的前端項目，同時做好對應的部署與最佳化工作。

文章將以PPT圖片附加文字介紹的形式展開，不會涉及知識點的具體程式碼，點到為止。有興趣的同學可以查看相應的文件進行了解。

Vue.js簡介

#從上圖的介紹我們不難發現Vue.js是一款輕量級的以資料驅動的前端JS框架，其和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資料驅動的原理所在。

Vue實例

#在一個html檔中，我們直接可以透過script標籤引入Vue. js，然後就可以在頁面裡寫Vue.js程式碼了。上圖中我們透過new Vue()建構了一個Vue的實例，在實例中，可以包含掛在元素（el），資料（data），模板（template），方法（methods）與生命週期鉤子（created等）等選項。不同的實例選項有不同的功能，如：

（1）el表示我們的Vue需要操作哪一個元素下的區域，'#demo'表示操作id為demo的元素下區域。
（2）data表示Vue 實例的資料對象，data 的屬性能夠回應資料的變化。
（3）created表示實例生命週期中建立完成的那一步，當實例已經建立完成之後將呼叫其方法。

Vue常用指令

#在Vue專案的開發中，我們所使用的最多的應該就屬Vue的指令了。透過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的點擊事件

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

Vue.js技術堆疊

#

以上我們講到可以直接在一個html頁面裡透過引入Vue.js來直接寫Vue程式碼，但這樣的方式並不常用。因為如果我們的專案比較大，專案中會存在很多頁面，一旦每個頁面都引入一個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專案中，我們主要介紹如何利用vue-cli自動產生我們專案的前端目錄及文件，了解Vue中一切皆組件的概念及父子組件的通訊問題，講解在Vue專案中我們如何使用第三方插件，最後利用webpack來打包及部署我們的項目。

vue-cli建置

#在使用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伺服器在瀏覽器中開啟並瀏覽專案頁面

這樣我們的一個基於webpack的vue專案目錄就建置好了。

單一檔案元件

#在剛剛建立好的vue專案中，我們會發現一個App .vue和Hello.vue的文件，那麼像這樣的以.vue後綴結尾的文件便是我們Vue專案中常見的單一文件元件。單檔案元件包含了一個功能或模組的html、js及css。在.vue檔案中，我們可以在template標籤中寫html，在script標籤中寫js，在style標籤中寫css。這樣一個功能或模組就是一個.vue元件，對於元件公用和後期的維護也非常便捷。

父子元件通訊

#那麼像這樣在以單一檔案元件為核心的專案開發中，我們一定會想到一個問題，就是.vue父子元件之間是如何交換資料來實現通訊的呢？在Vue2.0中提供了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設定檔中使用，透過new webpack.optimize.UglifyJsPlugin()來進行配置，刪除警告語句可以縮減檔案的體積。

（3）使用Webpack hash處理快取：當我們需要對發佈到線上的文件進行修改時，重新編譯的檔案名稱如果和先前版本的相同會引起瀏覽器無法識別而載入快取文件的問題。這樣我們需要自動的產生帶有hash值的檔名來阻止快取。詳見：https://segmentfault.com/a/1190000006178770#articleHeader7

（4）使用v-if減少不必要的元件載入：v-if指令其實很有用處，它可以讓我們項目中暫時不需要的元件不進行渲染，等需要用到的時候在渲染，例如某個彈跳窗元件等。這樣我們可以減少頁面首次載入的時間和檔案量。

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

資料驅動實例

總結

##本文以PPT圖片附加文字介紹的形式簡單介紹了Vue.js的知識點及開發流程，並將前端自動化、組件化、工程化的理念貫穿其中，由淺入深地闡述了Vue.js「簡單卻不失優雅，小巧而不發大匠」的獨特魅力

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

用Video.js實作H5直播介面

node.js的path模組詳解

以上是Vue.js的圖文詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！