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

Vue.js作為目前最熱門最具前景的前端框架之一拟烫,其提供了一種幫助我們快速構(gòu)建并開(kāi)發(fā)前端項(xiàng)目的新的思維模式。本文旨在幫助大家認(rèn)識(shí)Vue.js,了解Vue.js的開(kāi)發(fā)流程,并進(jìn)一步理解如何通過(guò)Vue.js來(lái)構(gòu)建一個(gè)中大型的前端項(xiàng)目听皿,同時(shí)做好相應(yīng)的部署與優(yōu)化工作。
文章將以PPT圖片附加文字介紹的形式展開(kāi)宽档,不會(huì)涉及知識(shí)點(diǎn)的具體代碼尉姨,點(diǎn)到為止。有興趣的同學(xué)可以查看相應(yīng)的文檔進(jìn)行了解雌贱。
Vue.js簡(jiǎn)介


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

Vue.js主要負(fù)責(zé)的是上圖綠色正方體ViewModel的部分馋没,其在View層(即DOM層)與Model層(即JS邏輯層)之間通過(guò)ViewModel綁定了DOM Listeners與Data Bingings兩個(gè)相當(dāng)于監(jiān)聽(tīng)器的東西。
當(dāng)View層的視圖發(fā)生改變時(shí)降传,Vue會(huì)通過(guò)DOM Listeners來(lái)監(jiān)聽(tīng)并改變Model層的數(shù)據(jù)篷朵。相反,當(dāng)Model層的數(shù)據(jù)發(fā)生改變時(shí)婆排,其也會(huì)通過(guò)Data Bingings來(lái)監(jiān)聽(tīng)并改變View層的展示声旺。這樣便實(shí)現(xiàn)了一個(gè)雙向數(shù)據(jù)綁定的功能,也是Vue.js數(shù)據(jù)驅(qū)動(dòng)的原理所在段只。
Vue實(shí)例

在一個(gè)html文件中腮猖,我們直接可以通過(guò)script標(biāo)簽引入Vue.js,然后就可以在頁(yè)面里寫(xiě)Vue.js代碼了赞枕。上圖中我們通過(guò)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項(xiàng)目的開(kāi)發(fā)中,我們使用的最多的應(yīng)該就屬Vue的指令了傻谁。通過(guò)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ù)棧

以上我們講到可以直接在一個(gè)html頁(yè)面里通過(guò)引入Vue.js來(lái)直接寫(xiě)Vue代碼泉懦,但是這樣的方式并不常用稿黍。因?yàn)槿绻覀兊捻?xiàng)目比較大,項(xiàng)目中會(huì)存在很多頁(yè)面崩哩,一旦每個(gè)頁(yè)面都引入一個(gè)Vue.js或者聲明一個(gè)Vue實(shí)例巡球,這樣非常不利于后期的維護(hù)和代碼的公用,也會(huì)存在實(shí)例名沖突的情況邓嘹,所以我們需要用到Vue提供的技術(shù)棧來(lái)構(gòu)建強(qiáng)大的前端項(xiàng)目酣栈。
除了Vue.js我們還需要用到:
(1)vue-cli:Vue的腳手架工具,用于自動(dòng)生成Vue項(xiàng)目的目錄及文件汹押。
(2)vue-router: Vue提供的前端路由工具矿筝,利用其我們實(shí)現(xiàn)頁(yè)面的路由控制,局部刷新及按需加載棚贾,構(gòu)建單頁(yè)應(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)大功能來(lái)快速實(shí)現(xiàn)JS邏輯震贵。
(5)NPM:node.js的包管理工具,用于同一管理我們前端項(xiàng)目中需要用到的包水评、插件猩系、工具、命令等中燥,便于開(kāi)發(fā)和維護(hù)寇甸。
(6)webpack:一款強(qiáng)大的文件打包工具,可以將我們的前端項(xiàng)目文件同一打包壓縮至js中,并且可以通過(guò)vue-loader等加載器實(shí)現(xiàn)語(yǔ)法轉(zhuǎn)化與加載拿霉。
(7)Babel:一款將ES6代碼轉(zhuǎn)化為瀏覽器兼容的ES5代碼的插件
利用以上等技術(shù)吟秩,我們便可以開(kāi)始構(gòu)建我們的Vue項(xiàng)目了。
?構(gòu)建大型應(yīng)用

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

在使用vue-cli之前我們需要安裝node.js份乒,利用其提供的npm命令來(lái)安裝vue-cli杀怠。安裝node.js只需去其官網(wǎng)下載軟件并安裝即可椰憋,地址為:https://nodejs.org/en/安裝完成之后我們打開(kāi)電腦的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:打開(kāi)剛剛創(chuàng)建的文件夾
(4)npm intall:安裝項(xiàng)目所依賴的包文件
(5)npm run dev:利用本地node服務(wù)器在瀏覽器中打開(kāi)并瀏覽項(xiàng)目頁(yè)面
這樣我們的一個(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)目中常見(jiàn)的單文件組件。單文件組件包含了一個(gè)功能或模塊的html离钝、js及css票编。在.vue文件中,我們可以在template標(biāo)簽中寫(xiě)html卵渴,在script標(biāo)簽中寫(xiě)js慧域,在style標(biāo)簽中寫(xiě)css。這樣一個(gè)功能或模塊就是一個(gè).vue組件浪读,對(duì)于組件公用和后期的維護(hù)也非常便捷昔榴。
?父子組件通信

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

接下來(lái)我們介紹下在基于webpack的vue項(xiàng)目中我們是如何使用插件的纺蛆,主要有兩種情況:
(一)全局使用
(1)在index.html引入:這樣的方式不推薦使用吐葵,因?yàn)榇嬖谙群蠹虞d順序的問(wèn)題,有些插件不支持這一方式桥氏。
(2)通過(guò)webpack配置文件引入:主要通過(guò)plugin配置項(xiàng)的webpack.ProvidePlugin()方法實(shí)現(xiàn)温峭,不過(guò)只適合支持CommonJs規(guī)范并提供一個(gè)全局變量的插件,如jQuery中的$字支。
(3)通過(guò)import + Vue.use()引入:這種方式需要在全局.vue文件中import需要加載的插件凤藏,然后通過(guò)Vue.use(‘插件變量名’)來(lái)實(shí)現(xiàn)奸忽,不過(guò)此方法只支持遵循Vue.js插件編寫(xiě)規(guī)范的插件使用,如vue-resourece清笨。
(二)單文件使用
(1)通過(guò)import直接引入:這種方式可以在需要調(diào)用插件的.vue文件中使用月杉,不過(guò)需要注意和實(shí)例的創(chuàng)建順序問(wèn)題,或者也可以通過(guò)require引入抠艾。
(2)import + components注冊(cè):此方式為Vue組件的使用方式苛萎,可以在一個(gè)組件中注冊(cè)并使用一個(gè)子組件。
部署及優(yōu)化

當(dāng)我們搞定整個(gè)Vue項(xiàng)目的前端編碼階段后检号,我們需要對(duì)我們的前端項(xiàng)目文件進(jìn)行部署和優(yōu)化工作腌歉,主要的幾個(gè)方式如下:
(1)使用webpack的DefinePlugin指定生產(chǎn)環(huán)境:通過(guò)plugin中的DefinePlugin配置,我們可以聲明’process.env’屬性為’development’(開(kāi)發(fā)環(huán)境)或者’production’(生產(chǎn)環(huán)境)齐苛,結(jié)合npm配置文件package.json中scripts的命令來(lái)切換環(huán)境模式十分方便翘盖。
(2)使用UglifyJs自動(dòng)刪除代碼塊內(nèi)的警告語(yǔ)句:一般在生產(chǎn)環(huán)境的webpack配置文件中使用,通過(guò)new webpack.optimize.UglifyJsPlugin()來(lái)進(jìn)行配置凹蜂,刪除警告語(yǔ)句可以縮減文件的體積馍驯。(3)使用Webpack hash處理緩存:當(dāng)我們需要對(duì)發(fā)布到線上的文件進(jìn)行修改時(shí),重新編譯的文件名如果和之前版本的相同會(huì)引起瀏覽器無(wú)法識(shí)別而加載緩存文件的問(wèn)題玛痊。這樣我們需要自動(dòng)的生成帶hash值的文件名來(lái)阻止緩存汰瘫。詳見(jiàn):https://segmentfault.com/a/1190000006178770#articleHeader7
(4)使用v-if減少不必要的組件加載:v-if指令其實(shí)很有用處,它可以讓我們項(xiàng)目中暫時(shí)不需要的組件不進(jìn)行渲染擂煞,等需要用到的時(shí)候在渲染混弥,比如某個(gè)彈窗組件等。這樣我們可以減少頁(yè)面首次加載的時(shí)間和文件量对省。
除了以上幾點(diǎn)的優(yōu)化蝗拿,還有很多優(yōu)化選擇,有興趣的童鞋可以好好地了解下webpack的API文檔蒿涎,畢竟webpack的功能十分強(qiáng)大哀托。
數(shù)據(jù)驅(qū)動(dòng)實(shí)例

這是我之前利用Vue.js數(shù)據(jù)驅(qū)動(dòng)的原理寫(xiě)的一個(gè)拼圖游戲,希望能夠供大家進(jìn)一步了解Vue數(shù)據(jù)驅(qū)動(dòng)的理念劳秋。
演示地址:拼圖游戲
代碼地址:拼圖代碼
總結(jié)
本文以PPT圖片附加文字介紹的形式簡(jiǎn)單介紹了Vue.js的知識(shí)點(diǎn)及開(kāi)發(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閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件麻汰,死亡現(xiàn)場(chǎng)離奇詭異速客,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)五鲫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門溺职,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人位喂,你說(shuō)我怎么就攤上這事浪耘。” “怎么了塑崖?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵七冲,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我规婆,道長(zhǎng)澜躺,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任抒蚜,我火速辦了婚禮掘鄙,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘削锰。我一直安慰自己通铲,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布器贩。 她就那樣靜靜地躺著颅夺,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蛹稍。 梳的紋絲不亂的頭發(fā)上吧黄,一...
    開(kāi)封第一講書(shū)人閱讀 49,821評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音唆姐,去河邊找鬼拗慨。 笑死,一個(gè)胖子當(dāng)著我的面吹牛奉芦,可吹牛的內(nèi)容都是我干的赵抢。 我是一名探鬼主播,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼声功,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼烦却!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起先巴,我...
    開(kāi)封第一講書(shū)人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤其爵,失蹤者是張志新(化名)和其女友劉穎冒冬,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體摩渺,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡简烤,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了摇幻。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片横侦。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖囚企,靈堂內(nèi)的尸體忽然破棺而出丈咐,到底是詐尸還是另有隱情,我是刑警寧澤龙宏,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布棵逊,位于F島的核電站,受9級(jí)特大地震影響银酗,放射性物質(zhì)發(fā)生泄漏辆影。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一黍特、第九天 我趴在偏房一處隱蔽的房頂上張望蛙讥。 院中可真熱鬧,春花似錦灭衷、人聲如沸次慢。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)迫像。三九已至,卻和暖如春瞳遍,著一層夾襖步出監(jiān)牢的瞬間闻妓,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工掠械, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留由缆,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓猾蒂,卻偏偏與公主長(zhǎng)得像均唉,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子肚菠,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

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

  • Vue.js作為目前最熱門最具前景的前端框架之一舔箭,其提供了一種幫助我們快速構(gòu)建并開(kāi)發(fā)前端項(xiàng)目的新的思維模式。本文旨...
    勞卜閱讀 53,402評(píng)論 22 419
  • Vue.js作為目前最熱門最具前景的前端框架之一案糙,其提供了一種幫助我們快速構(gòu)建并開(kāi)發(fā)前端項(xiàng)目的新的思維模式限嫌。本文旨...
    人不中二枉少年閱讀 1,386評(píng)論 0 19
  • 是不是冥冥之中安排好的,參加第二期的死磕群就是希望我把之前制定的學(xué)習(xí)計(jì)劃完成时捌,剛好剩下了21周的學(xué)習(xí)內(nèi)容怒医!每天...
    yoga麗閱讀 199評(píng)論 3 2
  • 想為一個(gè)人變得更好,更精致奢讨,每一天都很好稚叹。
    不系乾坤系流年閱讀 169評(píng)論 0 0
  • 1.首先先用鋼筆工具勾勒一個(gè)水珠形狀 2.然后降低它的透明度,并把圖層樣式改成疊加 3.添加它的陰影和內(nèi)陰影 4....
    40d8ead41178閱讀 192評(píng)論 0 0