前端開發之走進Vue.js
Vue.js做爲目前最熱門最具前景的前端框架之一，其提供了一種幫助咱們快速構建並開發前端項目的新的思惟模式。本文旨在幫助你們認識Vue.js，瞭解Vue.js的開發流程，並進一步理解如何經過Vue.js來構建一箇中大型的前端項目，同時作好相應的部署與優化工做。php
- 做者：勞卜來源： segmentfault|2016-11-01 19:10
Vue.js做爲目前最熱門最具前景的前端框架之一，其提供了一種幫助咱們快速構建並開發前端項目的新的思惟模式。本文旨在幫助你們認識Vue.js，瞭解Vue.js的開發流程，並進一步理解如何經過Vue.js來構建一箇中大型的前端項目，同時作好相應的部署與優化工做。css
文章將以PPT圖片附加文字介紹的形式展開，不會涉及知識點的具體代碼，點到爲止。有興趣的同窗能夠查看相應的文檔進行了解。html
Vue.js簡介前端
從上圖的介紹中咱們不難發現Vue.js是一款輕量級的以數據驅動的前端JS框架，其和jQuery最大的不一樣點在於jQuery經過操做DOM來改變頁面的顯示，而Vue經過操做數據來實現頁面的更新與展現。下面即是Vue數據驅動的概念模型：vue
Vue.js主要負責的是上圖綠色正方體ViewModel的部分，其在View層(即DOM層)與Model層(即JS邏輯層)之間經過ViewModel綁定了DOM Listeners與Data Bingings兩個至關於監聽器的東西。node
當View層的視圖發生改變時，Vue會經過DOM Listeners來監聽並改變Model層的數據。相反，當Model層的數據發生改變時，其也會經過Data Bingings來監聽並改變View層的展現。這樣便實現了一個雙向數據綁定的功能，也是Vue.js數據驅動的原理所在。android
Vue實例webpack
在一個html文件中，咱們直接能夠經過script標籤引入Vue.js，而後就能夠在頁面裏寫Vue.js代碼了。上圖中咱們經過new Vue()構建了一個Vue的實例，在實例中，能夠包含掛在元素(el)，數據(data)，模板(template)，方法(methods)與生命週期鉤子(created等)等選項。不一樣的實例選項擁有不一樣的功能，如：git
(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/compon...使用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/11...
(4)使用v-if減小沒必要要的組件加載：v-if指令其實頗有用處，它可讓咱們項目中暫時不須要的組件不進行渲染，等須要用到的時候在渲染，好比某個彈窗組件等。這樣咱們能夠減小頁面首次加載的時間和文件量。
除了以上幾點的優化，還有不少優化選擇，有興趣的童鞋能夠好好地瞭解下webpack的API文檔，畢竟webpack的功能十分強大。
數據驅動實例
這是我以前利用Vue.js數據驅動的原理寫的一個拼圖遊戲，但願可以供你們進一步瞭解Vue數據驅動的理念。
演示地址：拼圖遊戲
代碼地址：拼圖代碼
總結
本文以PPT圖片附加文字介紹的形式簡單介紹了Vue.js的知識點及開發流程，並將前端自動化、組件化、工程化的理念貫穿其中，由淺入深地闡述了Vue.js「簡單卻不失優雅，小巧而不發大匠」的獨特魅力。
【編輯推薦】
點贊 3
編輯推薦
- 24H熱文
- 一週話題
- 本月最贊
視頻課程+更多
-
-
2017軟考信息系統項目管理師-案例分析真題解
講師：小任老師30971人學習過
-
-
跟老譚玩轉Eclipse視頻教程
講師：譚嵐207497人學習過
-
-
[完整]ExcelVBA整合Access/SQLServer編程
講師：譚科91245人學習過
最新專題+更多
精彩評論
-
-
愛情89757評論了：【IT觀察】做爲一個DBA，如何選擇數據庫
若是是小的公司，基本的關係型數據庫足以知足大多數的業務場景。使用關係型數據構建集羣和分庫分表，讀寫分離就能夠知足系統的高可用和、高併發、高可擴的需求。可是隨着系統的業務的複雜，數據複雜，種類多樣，數據量大。關係型數據庫在存儲非結構化數據方面性能不如非關係數據好。大的公司基本都是使用多種的數據庫，以知足不一樣的業務需求。對應大數據的處理，傾向於使用MongoDB和hbase等。數據庫的選擇仍是要以業務的需求出發進行選擇比較好。最後說一下使用MongoDB的好處：mongoDB(非結構化數據庫)不只能夠處理結構化數據，並且更適合處理非結構化數據(文本、圖像、超媒體等信息)。它突破了關係型數據庫結構定義不易改變並且數據定長的限制，在處理連續信息和非結構化信息中有着關係型數據庫沒法比擬的優點。 關係型數據庫不擅長：大量數據的寫入；字段不固定，表結構變動；簡單查詢須要快速返回結果；
-
-
641553385評論了：終於找到程序員無休止加班的緣由了！
真實的狀況是,留在公司過夜也不能把給的蘋果吃完.
-
-
an7000評論了：不當心刪除了公司數據庫，是什麼樣一種體驗？
牛人，惋惜萌妹子不知道是你救了她^_^。一、數據庫密碼不能隨便給人；2 數據備份要天天確認。三、太嚇人了，檢查一下本身負責的數據庫。
-
-
simyang評論了：【IT觀察】做爲一個DBA，如何選擇數據庫
沙發，寫的好
- 精選博文
- 論壇熱帖
- 下載排行
讀 書+更多
-
-
J2EE應用開發（WebLogic+JBuilder）（第二版）
本書介紹如何將最流行的J2EE應用服務器WebLogic Server和最好的Java集成開發工具JBuilder結合起來開發J2EE應用，主要內容包括：WebLogic Se...
-
-
訂閱51CTO郵刊
點擊這裏查看樣刊
已有0條評論,0次贊
還能夠輸入500字