vue.js學習筆記1

標籤：methods   lin   交換   開始   項目   nts   org   安裝   標籤   

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的功能十分強大。

資料驅動執行個體

這是我之前利用Vue.js資料驅動的原理寫的一個拼圖遊戲，希望能夠供大家進一步瞭解Vue資料驅動的理念。

示範地址：拼圖遊戲

代碼地址：拼圖代碼

總結

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

 

轉自：https://zhuanlan.zhihu.com/p/24040371

vue.js學習筆記1