前端開發(fā)之走進(jìn)Vue.js

Vue.js作為目前最熱門最具前景的前端框架之一色罚,其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項(xiàng)目的新的思維模式。本文旨在幫助大家認(rèn)識(shí)Vue.js账劲,了解Vue.js的開發(fā)流程戳护,并進(jìn)一步理解如何通過Vue.js來構(gòu)建一個(gè)中大型的前端項(xiàng)目,同時(shí)做好相應(yīng)的部署與優(yōu)化工作瀑焦。

文章將以PPT圖片附加文字介紹的形式展開腌且,不會(huì)涉及知識(shí)點(diǎn)的具體代碼,點(diǎn)到為止榛瓮。有興趣的同學(xué)可以查看相應(yīng)的文檔進(jìn)行了解铺董。

Vue.js簡(jiǎn)介

Vue.js簡(jiǎn)介

從上圖的介紹中我們不難發(fā)現(xiàn)Vue.js是一款輕量級(jí)的以數(shù)據(jù)驅(qū)動(dòng)的前端JS框架,其和jQuery最大的不同點(diǎn)在于jQuery通過操作DOM來改變頁面的顯示禀晓,而Vue通過操作數(shù)據(jù)來實(shí)現(xiàn)頁面的更新與展示精续。下面便是Vue數(shù)據(jù)驅(qū)動(dòng)的概念模型:

數(shù)據(jù)模型

Vue.js主要負(fù)責(zé)的是上圖綠色正方體ViewModel的部分,其在View層(即DOM層)與Model層(即JS邏輯層)之間通過ViewModel綁定了DOM Listeners與Data Bingings兩個(gè)相當(dāng)于監(jiān)聽器的東西粹懒。

當(dāng)View層的視圖發(fā)生改變時(shí)重付,Vue會(huì)通過DOM Listeners來監(jiān)聽并改變Model層的數(shù)據(jù)。相反凫乖,當(dāng)Model層的數(shù)據(jù)發(fā)生改變時(shí)确垫,其也會(huì)通過Data Bingings來監(jiān)聽并改變View層的展示。這樣便實(shí)現(xiàn)了一個(gè)雙向數(shù)據(jù)綁定的功能帽芽,也是Vue.js數(shù)據(jù)驅(qū)動(dòng)的原理所在删掀。

Vue實(shí)例

Vue實(shí)例

在一個(gè)html文件中,我們直接可以通過script標(biāo)簽引入Vue.js导街,然后就可以在頁面里寫Vue.js代碼了披泪。上圖中我們通過new Vue()構(gòu)建了一個(gè)Vue的實(shí)例,在實(shí)例中菊匿,可以包含掛在元素(el)付呕,數(shù)據(jù)(data),模板(template)跌捆,方法(methods)與生命周期鉤子(created等)等選項(xiàng)徽职。不同的實(shí)例選項(xiàng)擁有不同的功能,如:

(1)el表明我們的Vue需要操作哪一個(gè)元素下的區(qū)域佩厚,'#demo'表示操作id為demo的元素下區(qū)域姆钉。
(2)data表示Vue 實(shí)例的數(shù)據(jù)對(duì)象,data 的屬性能夠響應(yīng)數(shù)據(jù)的變化。
(3)created表示實(shí)例生命周期中創(chuàng)建完成的那一步潮瓶,當(dāng)實(shí)例已經(jīng)創(chuàng)建完成之后將調(diào)用其方法陶冷。

Vue常用指令

Vue常用指令

在Vue項(xiàng)目的開發(fā)中,我們使用的最多的應(yīng)該就屬Vue的指令了毯辅。通過Vue提供的常用指令埂伦,我們可以淋漓盡致地發(fā)揮Vue數(shù)據(jù)驅(qū)動(dòng)的強(qiáng)大功能。以下便是圖中常用指令的簡(jiǎn)單介紹:

(1)v-text: 用于更新綁定元素中的內(nèi)容思恐,類似于jQuery的text()方法
(2)v-html: 用于更新綁定元素中的html內(nèi)容沾谜,類似于jQuery的html()方法
(3)v-if: 用于根據(jù)表達(dá)式的值的真假條件渲染元素,如果上圖P3為false則不會(huì)渲染P標(biāo)簽
(4)v-show: 用于根據(jù)表達(dá)式的值的真假條件?顯示隱藏元素胀莹,切換元素的 display CSS 屬性
(5)v-for: 用于遍歷數(shù)據(jù)渲染元素或模板基跑,如圖中P6為[1,2,3]則會(huì)渲染3個(gè)P標(biāo)簽,內(nèi)容依次為1描焰,2媳否,3
(6)v-on: 用于在元素上綁定事件,圖中在P標(biāo)簽上綁定了showP3的點(diǎn)擊事件

關(guān)于更多的Vue指令可以查看Vue2.0文檔荆秦,地址:https://vuefe.cn/api/#指令

Vue.js技術(shù)棧

Vue.js技術(shù)棧

以上我們講到可以直接在一個(gè)html頁面里通過引入Vue.js來直接寫Vue代碼篱竭,但是這樣的方式并不常用。因?yàn)槿绻覀兊捻?xiàng)目比較大步绸,項(xiàng)目中會(huì)存在很多頁面室抽,一旦每個(gè)頁面都引入一個(gè)Vue.js或者聲明一個(gè)Vue實(shí)例,這樣非常不利于后期的維護(hù)和代碼的公用靡努,也會(huì)存在實(shí)例名沖突的情況,所以我們需要用到Vue提供的技術(shù)棧來構(gòu)建強(qiáng)大的前端項(xiàng)目晓折。

除了Vue.js我們還需要用到:

(1)vue-cli:Vue的腳手架工具惑朦,用于自動(dòng)生成Vue項(xiàng)目的目錄及文件。
(2)vue-router: Vue提供的前端路由工具漓概,利用其我們實(shí)現(xiàn)頁面的路由控制漾月,局部刷新及按需加載,構(gòu)建單頁應(yīng)用胃珍,實(shí)現(xiàn)前后端分離梁肿。
(3)vuex:Vue提供的狀態(tài)管理工具,用于同一管理我們項(xiàng)目中各種數(shù)據(jù)的交互和重用觅彰,存儲(chǔ)我們需要用到數(shù)據(jù)對(duì)象吩蔑。
(4)ES6:Javascript的新版本,ECMAScript6的簡(jiǎn)稱填抬。利用ES6我們可以簡(jiǎn)化我們的JS代碼烛芬,同時(shí)利用其提供的強(qiáng)大功能來快速實(shí)現(xiàn)JS邏輯。
(5)NPM:node.js的包管理工具,用于同一管理我們前端項(xiàng)目中需要用到的包赘娄、插件仆潮、工具、命令等遣臼,便于開發(fā)和維護(hù)性置。
(6)webpack:一款強(qiáng)大的文件打包工具,可以將我們的前端項(xiàng)目文件同一打包壓縮至js中揍堰,并且可以通過vue-loader等加載器實(shí)現(xiàn)語法轉(zhuǎn)化與加載鹏浅。
(7)Babel:一款將ES6代碼轉(zhuǎn)化為瀏覽器兼容的ES5代碼的插件

利用以上等技術(shù),我們便可以開始構(gòu)建我們的Vue項(xiàng)目了个榕。

?構(gòu)建大型應(yīng)用

?構(gòu)建大型應(yīng)用

在構(gòu)建我們的中大型Vue項(xiàng)目中篡石,我們主要介紹如何利用vue-cli來自動(dòng)生成我們項(xiàng)目的前端目錄及文件,了解Vue中一切皆組件的概念及父子組件的通信問題西采,講解在Vue項(xiàng)目中我們?nèi)绾问褂玫谌讲寮巳詈罄脀ebpack來打包及部署我們的項(xiàng)目。

vue-cli構(gòu)建

vue-cli構(gòu)建

在使用vue-cli之前我們需要安裝node.js械馆,利用其提供的npm命令來安裝vue-cli胖眷。安裝node.js只需去其官網(wǎng)下載軟件并安裝即可,地址為:https://nodejs.org/en/

安裝完成之后我們打開電腦的cmd命令行工具依次輸入上圖中的命令:

(1)npm install -g vue-cli:全局安裝vue-cli
(2)vue init webpack my-project: 利用vue-cli在目錄地址生成一個(gè)基于webpack的名為’my-project‘的Vue項(xiàng)目文件及目錄
(3)cd my-project:打開剛剛創(chuàng)建的文件夾
(4)npm intall:安裝項(xiàng)目所依賴的包文件
(5)npm run dev:利用本地node服務(wù)器在瀏覽器中打開并瀏覽項(xiàng)目頁面

這樣我們的一個(gè)基于webpack的vue項(xiàng)目目錄就構(gòu)建好了霹崎。

單文件組件

單文件組件

在剛剛構(gòu)建好的vue項(xiàng)目中珊搀,我們會(huì)發(fā)現(xiàn)一個(gè)App.vue和Hello.vue的文件,那么像這樣的以.vue后綴結(jié)尾的文件便是我們Vue項(xiàng)目中常見的單文件組件尾菇。單文件組件包含了一個(gè)功能或模塊的html境析、js及css。在.vue文件中派诬,我們可以在template標(biāo)簽中寫html劳淆,在script標(biāo)簽中寫js,在style標(biāo)簽中寫css默赂。這樣一個(gè)功能或模塊就是一個(gè).vue組件沛鸵,對(duì)于組件公用和后期的維護(hù)也非常便捷。

?父子組件通信

父子組件通信

那么像這樣在以單文件組件為核心的項(xiàng)目開發(fā)中缆八,我們一定會(huì)想到一個(gè)問題曲掰,就是.vue父子組件之間是如何交換數(shù)據(jù)來實(shí)現(xiàn)通信的呢?在Vue2.0中提供了props來實(shí)現(xiàn)父組件向子組件傳遞數(shù)據(jù)奈辰,通過$emit來實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)栏妖。當(dāng)然如果是較為復(fù)雜和普遍的數(shù)據(jù)交互,建議大家使用vuex來同一管理數(shù)據(jù)冯挎。詳情請(qǐng)見:https://vuefe.cn/guide/components.html#使用Props傳遞數(shù)據(jù)

插件使用

插件使用

接下來我們介紹下在基于webpack的vue項(xiàng)目中我們是如何使用插件的底哥,主要有兩種情況:

(一)全局使用

(1)在index.html引入:這樣的方式不推薦使用咙鞍,因?yàn)榇嬖谙群蠹虞d順序的問題,有些插件不支持這一方式趾徽。
(2)通過webpack配置文件引入:主要通過plugin配置項(xiàng)的webpack.ProvidePlugin()方法實(shí)現(xiàn)续滋,不過只適合支持CommonJs規(guī)范并提供一個(gè)全局變量的插件,如jQuery中的$孵奶。
(3)通過import + Vue.use()引入:這種方式需要在全局.vue文件中import需要加載的插件疲酌,然后通過Vue.use('插件變量名')來實(shí)現(xiàn),不過此方法只支持遵循Vue.js插件編寫規(guī)范的插件使用了袁,如vue-resourece朗恳。

(二)單文件使用

(1)通過import直接引入:這種方式可以在需要調(diào)用插件的.vue文件中使用,不過需要注意和實(shí)例的創(chuàng)建順序問題载绿,或者也可以通過require引入粥诫。

(2)import + components注冊(cè):此方式為Vue組件的使用方式,可以在一個(gè)組件中注冊(cè)并使用一個(gè)子組件崭庸。

部署及優(yōu)化

部署及優(yōu)化

當(dāng)我們搞定整個(gè)Vue項(xiàng)目的前端編碼階段后怀浆,我們需要對(duì)我們的前端項(xiàng)目文件進(jìn)行部署和優(yōu)化工作,主要的幾個(gè)方式如下:

(1)使用webpack的DefinePlugin指定生產(chǎn)環(huán)境:通過plugin中的DefinePlugin配置怕享,我們可以聲明'process.env'屬性為'development'(開發(fā)環(huán)境)或者'production'(生產(chǎn)環(huán)境)执赡,結(jié)合npm配置文件package.json中scripts的命令來切換環(huán)境模式十分方便。

(2)使用UglifyJs自動(dòng)刪除代碼塊內(nèi)的警告語句:一般在生產(chǎn)環(huán)境的webpack配置文件中使用函筋,通過new webpack.optimize.UglifyJsPlugin()來進(jìn)行配置沙合,刪除警告語句可以縮減文件的體積。

(3)使用Webpack hash處理緩存:當(dāng)我們需要對(duì)發(fā)布到線上的文件進(jìn)行修改時(shí)跌帐,重新編譯的文件名如果和之前版本的相同會(huì)引起瀏覽器無法識(shí)別而加載緩存文件的問題首懈。這樣我們需要自動(dòng)的生成帶hash值的文件名來阻止緩存。詳見:https://segmentfault.com/a/1190000006178770#articleHeader7

(4)使用v-if減少不必要的組件加載:v-if指令其實(shí)很有用處谨敛,它可以讓我們項(xiàng)目中暫時(shí)不需要的組件不進(jìn)行渲染猜拾,等需要用到的時(shí)候在渲染,比如某個(gè)彈窗組件等佣盒。這樣我們可以減少頁面首次加載的時(shí)間和文件量。

除了以上幾點(diǎn)的優(yōu)化顽聂,還有很多優(yōu)化選擇肥惭,有興趣的童鞋可以好好地了解下webpack的API文檔,畢竟webpack的功能十分強(qiáng)大紊搪。

數(shù)據(jù)驅(qū)動(dòng)實(shí)例##

數(shù)據(jù)驅(qū)動(dòng)實(shí)例

這是我之前利用Vue.js數(shù)據(jù)驅(qū)動(dòng)的原理寫的一個(gè)拼圖游戲蜜葱,希望能夠供大家進(jìn)一步了解Vue數(shù)據(jù)驅(qū)動(dòng)的理念。
演示地址:拼圖游戲
代碼地址:拼圖代碼

總結(jié)

本文以PPT圖片附加文字介紹的形式簡(jiǎn)單介紹了Vue.js的知識(shí)點(diǎn)及開發(fā)流程耀石,并將前端自動(dòng)化牵囤、組件化、工程化的理念貫穿其中,由淺入深地闡述了Vue.js“簡(jiǎn)單卻不失優(yōu)雅揭鳞,小巧而不發(fā)大匠”的獨(dú)特魅力炕贵。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市野崇,隨后出現(xiàn)的幾起案子称开,更是在濱河造成了極大的恐慌,老刑警劉巖乓梨,帶你破解...
    沈念sama閱讀 216,372評(píng)論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鳖轰,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡扶镀,警方通過查閱死者的電腦和手機(jī)蕴侣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來臭觉,“玉大人昆雀,你說我怎么就攤上這事‰侍福” “怎么了忆肾?”我有些...
    開封第一講書人閱讀 162,415評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)菱肖。 經(jīng)常有香客問我客冈,道長(zhǎng),這世上最難降的妖魔是什么稳强? 我笑而不...
    開封第一講書人閱讀 58,157評(píng)論 1 292
  • 正文 為了忘掉前任场仲,我火速辦了婚禮,結(jié)果婚禮上退疫,老公的妹妹穿的比我還像新娘渠缕。我一直安慰自己,他們只是感情好褒繁,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評(píng)論 6 388
  • 文/花漫 我一把揭開白布亦鳞。 她就那樣靜靜地躺著,像睡著了一般棒坏。 火紅的嫁衣襯著肌膚如雪燕差。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,125評(píng)論 1 297
  • 那天坝冕,我揣著相機(jī)與錄音徒探,去河邊找鬼。 笑死喂窟,一個(gè)胖子當(dāng)著我的面吹牛测暗,可吹牛的內(nèi)容都是我干的央串。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評(píng)論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼碗啄,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼质和!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起挫掏,我...
    開封第一講書人閱讀 38,887評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤侦另,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后尉共,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體褒傅,經(jīng)...
    沈念sama閱讀 45,310評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評(píng)論 2 332
  • 正文 我和宋清朗相戀三年袄友,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了殿托。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,690評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡剧蚣,死狀恐怖支竹,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情鸠按,我是刑警寧澤礼搁,帶...
    沈念sama閱讀 35,411評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站目尖,受9級(jí)特大地震影響馒吴,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜瑟曲,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評(píng)論 3 325
  • 文/蒙蒙 一饮戳、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧洞拨,春花似錦扯罐、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至花吟,卻和暖如春启泣,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背示辈。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評(píng)論 1 268
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留遣蚀,地道東北人矾麻。 一個(gè)月前我還...
    沈念sama閱讀 47,693評(píng)論 2 368
  • 正文 我出身青樓纱耻,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親险耀。 傳聞我的和親對(duì)象是個(gè)殘疾皇子弄喘,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容