前端開發(fā)之Vue

Vue.js作為目前最熱門最具前景的前端框架之一赌渣,其提供了一種幫助我們快速構建并開發(fā)前端項目的新的思維模式徊件。本文旨在幫助大家認識Vue.js,了解Vue.js的開發(fā)流程准潭,并進一步理解如何通過Vue.js來構建一個中大型的前端項目者铜,同時做好相應的部署與優(yōu)化工作腔丧。

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

01-

Vue.js簡介

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


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

當View層的視圖發(fā)生改變時,Vue會通過DOM Listeners來監(jiān)聽并改變Model層的數(shù)據(jù)探赫。相反型宙,當Model層的數(shù)據(jù)發(fā)生改變時,其也會通過Data Bingings來監(jiān)聽并改變View層的展示伦吠。這樣便實現(xiàn)了一個雙向數(shù)據(jù)綁定的功能妆兑,也是Vue.js數(shù)據(jù)驅動的原理所在魂拦。

02-

Vue實例

在一個html文件中,我們直接可以通過script標簽引入Vue.js箭跳,然后就可以在頁面里寫Vue.js代碼了晨另。上圖中我們通過new Vue()構建了一個Vue的實例,在實例中谱姓,可以包含掛在元素(el),數(shù)據(jù)(data)刨晴,模板(template)屉来,方法(methods)與生命周期鉤子(created等)等選項。不同的實例選項擁有不同的功能狈癞,如:

  1. el表明我們的Vue需要操作哪一個元素下的區(qū)域茄靠,'#demo'表示操作id為demo的元素下區(qū)域。
  2. data表示Vue 實例的數(shù)據(jù)對象蝶桶,data 的屬性能夠響應數(shù)據(jù)的變化慨绳。
  3. created表示實例生命周期中創(chuàng)建完成的那一步,當實例已經(jīng)創(chuàng)建完成之后將調用其方法真竖。

03-

Vue常用指令

在Vue項目的開發(fā)中脐雪,我們使用的最多的應該就屬Vue的指令了。通過Vue提供的常用指令恢共,我們可以淋漓盡致地發(fā)揮Vue數(shù)據(jù)驅動的強大功能战秋。以下便是圖中常用指令的簡單介紹:

  1. v-text: 用于更新綁定元素中的內容,類似于jQuery的text()方法
  2. v-html: 用于更新綁定元素中的html內容讨韭,類似于jQuery的html()方法
  3. v-if: 用于根據(jù)表達式的值的真假條件渲染元素脂信,如果上圖P3為false則不會渲染P標簽
  4. v-show: 用于根據(jù)表達式的值的真假條件顯示隱藏元素,切換元素的 display CSS 屬性
  5. v-for: 用于遍歷數(shù)據(jù)渲染元素或模板透硝,如圖中P6為[1,2,3]則會渲染3個P標簽狰闪,內容依次為1,2濒生,3
  6. v-on: 用于在元素上綁定事件埋泵,圖中在P標簽上綁定了showP3的點擊事件

關于更多的Vue指令可以查看Vue2.0文檔,地址:https://vuefe.cn/api/#指令

04-

Vue.js技術棧

以上我們講到可以直接在一個html頁面里通過引入Vue.js來直接寫Vue代碼甜攀,但是這樣的方式并不常用秋泄。因為如果我們的項目比較大,項目中會存在很多頁面规阀,一旦每個頁面都引入一個Vue.js或者聲明一個Vue實例恒序,這樣非常不利于后期的維護和代碼的公用,也會存在實例名沖突的情況谁撼,所以我們需要用到Vue提供的技術棧來構建強大的前端項目歧胁。

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

  1. vue-cli:Vue的腳手架工具滋饲,用于自動生成Vue項目的目錄及文件。
  2. vue-router: Vue提供的前端路由工具喊巍,利用其我們實現(xiàn)頁面的路由控制屠缭,局部刷新及按需加載,構建單頁應用崭参,實現(xiàn)前后端分離呵曹。
  3. vuex:Vue提供的狀態(tài)管理工具,用于同一管理我們項目中各種數(shù)據(jù)的交互和重用何暮,存儲我們需要用到數(shù)據(jù)對象奄喂。
  4. ES6:Javascript的新版本,ECMAScript6的簡稱海洼。利用ES6我們可以簡化我們的JS代碼跨新,同時利用其提供的強大功能來快速實現(xiàn)JS邏輯。
  5. NPM:node.js的包管理工具坏逢,用于同一管理我們前端項目中需要用到的包域帐、插件、工具是整、命令等肖揣,便于開發(fā)和維護。
  6. webpack:一款強大的文件打包工具贰盗,可以將我們的前端項目文件同一打包壓縮至js中许饿,并且可以通過vue-loader等加載器實現(xiàn)語法轉化與加載。
  7. Babel:一款將ES6代碼轉化為瀏覽器兼容的ES5代碼的插件

利用以上等技術舵盈,我們便可以開始構建我們的Vue項目了陋率。

05-

構建大型應用

在構建我們的中大型Vue項目中,我們主要介紹如何利用vue-cli來自動生成我們項目的前端目錄及文件秽晚,了解Vue中一切皆組件的概念及父子組件的通信問題瓦糟,講解在Vue項目中我們如何使用第三方插件,最后利用webpack來打包及部署我們的項目赴蝇。

06-

vue-cli構建

在使用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在目錄地址生成一個基于webpack的名為’my-project‘的Vue項目文件及目錄
  3. cd my-project:打開剛剛創(chuàng)建的文件夾
  4. npm intall:安裝項目所依賴的包文件
  5. npm run dev:利用本地node服務器在瀏覽器中打開并瀏覽項目頁面

這樣我們的一個基于webpack的vue項目目錄就構建好了劲蜻。

07-

單文件組件

在剛剛構建好的vue項目中,我們會發(fā)現(xiàn)一個App.vue和Hello.vue的文件考余,那么像這樣的以.vue后綴結尾的文件便是我們Vue項目中常見的單文件組件先嬉。單文件組件包含了一個功能或模塊的html、js及css楚堤。在.vue文件中疫蔓,我們可以在template標簽中寫html含懊,在script標簽中寫js,在style標簽中寫css衅胀。這樣一個功能或模塊就是一個.vue組件岔乔,對于組件公用和后期的維護也非常便捷。

08-

父子組件通信

那么像這樣在以單文件組件為核心的項目開發(fā)中滚躯,我們一定會想到一個問題雏门,就是.vue父子組件之間是如何交換數(shù)據(jù)來實現(xiàn)通信的呢?在Vue2.0中提供了props來實現(xiàn)父組件向子組件傳遞數(shù)據(jù)哀九,通過$emit來實現(xiàn)子組件向父組件傳遞數(shù)據(jù)剿配。當然如果是較為復雜和普遍的數(shù)據(jù)交互,建議大家使用vuex來同一管理數(shù)據(jù)阅束。詳情請見:https://vuefe.cn/guide/components.html#使用Props傳遞數(shù)據(jù)

09-

插件使用

接下來我們介紹下在基于webpack的vue項目中我們是如何使用插件的,主要有兩種情況:
(一)全局使用
(1)在index.html引入:這樣的方式不推薦使用茄唐,因為存在先后加載順序的問題息裸,有些插件不支持這一方式。
(2)通過webpack配置文件引入:主要通過plugin配置項的webpack.ProvidePlugin()方法實現(xiàn)沪编,不過只適合支持CommonJs規(guī)范并提供一個全局變量的插件呼盆,如jQuery中的$。
(3)通過import + Vue.use()引入:這種方式需要在全局.vue文件中import需要加載的插件蚁廓,然后通過Vue.use('插件變量名')來實現(xiàn)访圃,不過此方法只支持遵循Vue.js插件編寫規(guī)范的插件使用,如vue-resourece相嵌。

(二)單文件使用
(1)通過import直接引入:這種方式可以在需要調用插件的.vue文件中使用腿时,不過需要注意和實例的創(chuàng)建順序問題,或者也可以通過require引入饭宾。
(2)import + components注冊:此方式為Vue組件的使用方式批糟,可以在一個組件中注冊并使用一個子組件。

10-

部署及優(yōu)化

** 當我們搞定整個Vue項目的前端編碼階段后看铆,我們需要對我們的前端項目文件進行部署和優(yōu)化工作徽鼎,主要的幾個方式如下: **

  1. 使用webpack的DefinePlugin指定生產(chǎn)環(huán)境:通過plugin中的DefinePlugin配置,我們可以聲明'process.env'屬性為'development'(開發(fā)環(huán)境)或者'production'(生產(chǎn)環(huán)境)弹惦,結合npm配置文件package.json中scripts的命令來切換環(huán)境模式十分方便否淤。
  2. 使用UglifyJs自動刪除代碼塊內的警告語句:一般在生產(chǎn)環(huán)境的webpack配置文件中使用,通過new webpack.optimize.UglifyJsPlugin()來進行配置棠隐,刪除警告語句可以縮減文件的體積石抡。
  3. 使用Webpack hash處理緩存:當我們需要對發(fā)布到線上的文件進行修改時,重新編譯的文件名如果和之前版本的相同會引起瀏覽器無法識別而加載緩存文件的問題宵荒。這樣我們需要自動的生成帶hash值的文件名來阻止緩存汁雷。詳見:https://segmentfault.com/a/1190000006178770#articleHeader7
  4. 使用v-if減少不必要的組件加載:v-if指令其實很有用處净嘀,它可以讓我們項目中暫時不需要的組件不進行渲染,等需要用到的時候在渲染侠讯,比如某個彈窗組件等挖藏。這樣我們可以減少頁面首次加載的時間和文件量。

除了以上幾點的優(yōu)化厢漩,還有很多優(yōu)化選擇膜眠,有興趣的童鞋可以好好地了解下webpack的API文檔,畢竟webpack的功能十分強大溜嗜。

總結

vue是一個有著獨特魅力簡單卻不失優(yōu)雅宵膨,小巧而不發(fā)大匠的框架!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末炸宵,一起剝皮案震驚了整個濱河市辟躏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌土全,老刑警劉巖捎琐,帶你破解...
    沈念sama閱讀 222,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異裹匙,居然都是意外死亡瑞凑,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進店門概页,熙熙樓的掌柜王于貴愁眉苦臉地迎上來籽御,“玉大人,你說我怎么就攤上這事惰匙〖继停” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵徽曲,是天一觀的道長零截。 經(jīng)常有香客問我,道長秃臣,這世上最難降的妖魔是什么涧衙? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮奥此,結果婚禮上弧哎,老公的妹妹穿的比我還像新娘。我一直安慰自己稚虎,他們只是感情好撤嫩,可當我...
    茶點故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蠢终,像睡著了一般序攘。 火紅的嫁衣襯著肌膚如雪茴她。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天程奠,我揣著相機與錄音丈牢,去河邊找鬼。 笑死瞄沙,一個胖子當著我的面吹牛己沛,可吹牛的內容都是我干的。 我是一名探鬼主播距境,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼申尼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了垫桂?” 一聲冷哼從身側響起师幕,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎诬滩,沒想到半個月后们衙,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡碱呼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了宗侦。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片愚臀。...
    茶點故事閱讀 40,926評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖矾利,靈堂內的尸體忽然破棺而出姑裂,到底是詐尸還是另有隱情,我是刑警寧澤男旗,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布舶斧,位于F島的核電站,受9級特大地震影響察皇,放射性物質發(fā)生泄漏茴厉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一什荣、第九天 我趴在偏房一處隱蔽的房頂上張望矾缓。 院中可真熱鬧,春花似錦稻爬、人聲如沸嗜闻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽琉雳。三九已至样眠,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間翠肘,已是汗流浹背檐束。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留锯茄,地道東北人厢塘。 一個月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像肌幽,于是被迫代替她去往敵國和親晚碾。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,930評論 2 361

推薦閱讀更多精彩內容