Vue基礎(chǔ)培訓(xùn)（課堂PPT）

1、12目錄1.VUE簡(jiǎn)介2.MVVM模式3.數(shù)據(jù)驅(qū)動(dòng)和組件式編程4.Vue之Hello World！5.生命周期6.從Vue到頁(yè)面7.Vue組件的重要選項(xiàng)8.Vue常用指令3 VUE 尤雨溪談Vue.js：“我在 Google 的工作需要在瀏覽器上進(jìn)行大量原型設(shè)計(jì)，于是我想要盡快獲得有形的東西。當(dāng)時(shí)有些項(xiàng)目使用了 Angular。Angular 提供了一些用數(shù)據(jù)綁定和數(shù)據(jù)驅(qū)動(dòng)來(lái)處理 DOM 的方法，所以你不必自己碰 DOM。它也有一些副作用，就是按照它規(guī)定的方式來(lái)構(gòu)建代碼。對(duì)于當(dāng)時(shí)的場(chǎng)景而言實(shí)在是太重了。 我想，我可以只把我喜歡的部分從 Angular 中提出來(lái)，建立一個(gè)非常輕巧的庫(kù)，不需要那些

2、額外的邏輯。我也很好奇 Angular 的源碼到底是怎么設(shè)計(jì)的。我最開(kāi)始只是想著手提取 Angular 里面很小的功能，如聲明式數(shù)據(jù)綁定。Vue 大概就是這么開(kāi)始的。 用過(guò)一段時(shí)間之后，我感覺(jué)我做的東西還有點(diǎn)前途，因?yàn)槲易约壕秃芟矚g用。于是我花了更多的時(shí)間把它封裝好，取了一個(gè)名字叫做 Vue.js。 2014 年 2 月，我第一次將它作為實(shí)際的項(xiàng)目發(fā)布在 Github 上，并把鏈接發(fā)送到了 Hacker News 上，它就被頂?shù)搅耸醉?yè)，然后它在首頁(yè)待了好幾個(gè)小時(shí)。后來(lái)，我寫(xiě)了一篇文章，分享了 Vue 第一周的使用數(shù)據(jù)以及我的感受。 那是我第一次看見(jiàn)這么多人在 Github 上為一個(gè)項(xiàng)目打星星。

3、我當(dāng)時(shí)一個(gè)星期收獲了好幾百個(gè)星星，整個(gè)人都激動(dòng)壞了。 原文鏈接原文鏈接：https:/ 所有通信都是單向的。5MVVM模式 MVVM模式采用雙向綁定（data-binding）：View的變動(dòng)，自動(dòng)反映在 ViewModel，反之亦然。Vue、Angular 和 Ember 都采用這種模式，相比于Angular，Vue.js提供了更加簡(jiǎn)潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。6數(shù)據(jù)驅(qū)動(dòng)和組件式編程數(shù)據(jù)驅(qū)動(dòng)數(shù)據(jù)驅(qū)動(dòng)：7 程序=數(shù)據(jù)結(jié)構(gòu)+算法，這是每個(gè)程序都耳熟能詳?shù)囊痪湓?可在前端這里并不純粹,因?yàn)榍岸诵枰缑娲蚪坏?html+css并沒(méi)用被抽象成某種在js中使用的數(shù)

4、據(jù)結(jié)構(gòu),充當(dāng)?shù)母嗍墙缑娴囊环N配置,jquery程序員看待他的方式就一塊塊的ui,用到的時(shí)候再$一下,獲取之后修改.整個(gè)程序?qū)懴聛?lái)是零零散散的節(jié)點(diǎn)操作。一個(gè)比較實(shí)際的情況就是,在ui控件有聯(lián)動(dòng)的時(shí)候,如果沒(méi)有一種機(jī)制來(lái)管理這些ui之間的修改,那么依賴程序員自己去手動(dòng)管理這些ui的狀態(tài),會(huì)讓人煩不勝煩,且容易出現(xiàn)bug。 總結(jié)一下基于操作dom的前端開(kāi)發(fā)方式： 拼界面-找到dom節(jié)點(diǎn)-修改屬性-檢測(cè)是否有其他影響的節(jié)點(diǎn)-根據(jù)剛剛修改的dom節(jié)點(diǎn)更新自己的狀態(tài) 那么上面的那句話就變成了 ：前端程序 = 拼界面+操作ui+算法 vue或者angular這些mvvm框架給了前端另一種思路,完全基于數(shù)據(jù)

5、驅(qū)動(dòng)的編程。如果你之前已經(jīng)習(xí)慣了用jQuery操作DOM，學(xué)習(xí)Vue.js時(shí)請(qǐng)先拋開(kāi)手動(dòng)操作DOM的思維，因?yàn)閂ue.js是數(shù)據(jù)驅(qū)動(dòng)的，你無(wú)需手動(dòng)操作DOM。Vue采用一種數(shù)據(jù)綁定的方式,自動(dòng)綁定dom節(jié)點(diǎn)的屬性.這樣就把你從操作dom節(jié)點(diǎn)的繁瑣過(guò)程中解脫出來(lái)了,你只要專(zhuān)注于數(shù)據(jù)的狀態(tài),ui更新的事情你不需要去管了,不管是樣式還是內(nèi)容,可見(jiàn)性還是切換class,框架幫你把關(guān)注點(diǎn)從傳統(tǒng)的dom操作轉(zhuǎn)移到了數(shù)據(jù),回歸編程的本質(zhì):程序=數(shù)據(jù)結(jié)構(gòu)+算法. 這也是mvvm框架最大的思路上的突破。8組件式編程 這個(gè)理念不是來(lái)源于vue, 把web組件式開(kāi)發(fā)發(fā)揚(yáng)光大的應(yīng)該是react了,組件開(kāi)發(fā)是一種樸素的

6、開(kāi)發(fā)思想,分而治之,大型系統(tǒng)拆分成一個(gè)個(gè)的小模塊小組件,分配給不同的人。額外的好處是順便能復(fù)用這個(gè)組件。9理解組件的思想可以類(lèi)比函數(shù)。一個(gè)函數(shù)包含哪些東西呢？1.形參2.局部變量3.函數(shù)名4.返回值那對(duì)應(yīng)到vue中又是什么呢?10Vue之Hello World！11Vue之Hello World！使用Vue的過(guò)程就是定義MVVM各個(gè)組成部分的過(guò)程的過(guò)程。1.定義View2.定義Model3.創(chuàng)建一個(gè)Vue實(shí)例或ViewModel，它用于連接View和Model 在創(chuàng)建Vue實(shí)例時(shí)，需要傳入一個(gè)選項(xiàng)對(duì)象，選項(xiàng)對(duì)象可以包含數(shù)據(jù)、掛載元素、方法、模生命周期鉤子等等。 在這個(gè)示例中，選項(xiàng)對(duì)象的el屬性

7、指向View，el: #app表示該Vue實(shí)例將掛載到.這個(gè)元素；data屬性指向Model，data: exampleData表示我們的Model是exampleData對(duì)象。Vue.js有多種數(shù)據(jù)綁定的語(yǔ)法，最基礎(chǔ)的形式是文本插值，使用一對(duì)大括號(hào)語(yǔ)法，在運(yùn)行時(shí) message 會(huì)被數(shù)據(jù)對(duì)象的message屬性替換，所以頁(yè)面上會(huì)輸出Hello World!。12生命周期13生命周期 每個(gè) Vue 實(shí)例在被創(chuàng)建之前都要經(jīng)過(guò)一系列的初始化過(guò)程。例如，實(shí)例需要配置數(shù)據(jù)觀測(cè)(data observer)、編譯模版、掛載實(shí)例到 DOM ，然后在數(shù)據(jù)變化時(shí)更新 DOM 。在這個(gè)過(guò)程中，實(shí)例也會(huì)調(diào)用一些

8、生命周期鉤子生命周期鉤子 ，這就給我們提供了執(zhí)行自定義邏輯的機(jī)會(huì)。 它可以總共分為8個(gè)階段：1.beforeCreate:在實(shí)例初始化之后，數(shù)據(jù)觀測(cè)(data observer) 和 event/watcher 事件配置之前被調(diào)用。2.created:實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(cè)(data observer)，屬性和方法的運(yùn)算， watch/event 事件回調(diào)。然而，掛載階段還沒(méi)開(kāi)始，$el 屬性目前不可見(jiàn)。3.beforeMount:在掛載開(kāi)始之前被調(diào)用：相關(guān)的 render 函數(shù)首次被調(diào)用。該鉤子在該鉤子在服務(wù)器端渲染期間不被調(diào)用。服務(wù)器端渲染期間

9、不被調(diào)用。4.mounted: el 被新創(chuàng)建的 vm.$el 替換，并掛載到實(shí)例上去之后調(diào)用該鉤子。如果 root 實(shí)例掛載了一個(gè)文檔內(nèi)元素，當(dāng) mounted 被調(diào)用時(shí) vm.$el 也在文檔內(nèi)。該該鉤子在服務(wù)器端渲染期間不被調(diào)用。鉤子在服務(wù)器端渲染期間不被調(diào)用。14 5.beforeUpdate:數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前。你可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài)，這不會(huì)觸發(fā)附加的重渲染過(guò)程。該鉤子在服該鉤子在服務(wù)器端渲染期間不被調(diào)用。務(wù)器端渲染期間不被調(diào)用。 6.updated:由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。當(dāng)這個(gè)鉤子被

10、調(diào)用時(shí)，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變，通常最好使用計(jì)算屬性或 watcher 取而代之。該鉤子在服務(wù)器端渲染期間不被該鉤子在服務(wù)器端渲染期間不被調(diào)用。調(diào)用。 7.beforeDestroy:實(shí)例銷(xiāo)毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。該鉤子在該鉤子在服務(wù)器端渲染期間不被調(diào)用。服務(wù)器端渲染期間不被調(diào)用。 8.destroyed:Vue 實(shí)例銷(xiāo)毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽(tīng)器會(huì)被移除，所有的子實(shí)例也會(huì)被銷(xiāo)毀。該鉤子在服務(wù)器端渲染該鉤子在服務(wù)器端渲染期間不

11、被調(diào)用。期間不被調(diào)用。15從Vue到頁(yè)面16從Vue到頁(yè)面17Vue組件的重要選項(xiàng)data:18Vue組件的重要選項(xiàng)props: methods: watch: computed: 19Vue組件的使用組件 注冊(cè)一個(gè)全局組件語(yǔ)法格式如下： Vponent(tagName, options) 例子如下： / 注冊(cè) Vponent(runoob, template: 自定義組件! ) / 創(chuàng)建根實(shí)例 20使用VueX解決組件之間的通信如果你在使用 vue.js , 那么我想你可能會(huì)對(duì) vue 組件之間的通信感到崩潰 。一個(gè)頁(yè)面有很多表單 , 我試圖將表單寫(xiě)成一個(gè)單文件組件 , 但是表單 ( 子組件

12、 ) 里的數(shù)據(jù)和頁(yè)面 ( 父組件 ) 按鈕交互的時(shí)候 , 它們之間的通訊很麻煩 。之所以麻煩 , 是因?yàn)楦附M件可以通過(guò) props 給子組件傳遞參數(shù) , 但子組件內(nèi)卻不能直接修改父組件傳過(guò)來(lái)的參數(shù)。這時(shí)候 , 使用 vuex 就可以比較方便的解決這種問(wèn)題了 。https:/ 點(diǎn)擊 import dialog from ./components/dialog.vueexport default data() return show:false , components: t-dialog:dialog export default props:show, computed: currentSho

13、w: get() return this.show , set(val) this.$emit(update:show,val) 22之所以這么麻煩 , 是因?yàn)楦附M件可以通過(guò) props 給子組件傳遞參數(shù) , 但子組件內(nèi)卻不能直接修改父組件傳過(guò)來(lái)的參數(shù)。這時(shí)候 , 使用 vuex 就可以比較方便的解決這種問(wèn)題了 : 點(diǎn)擊 import dialog from ./components/dialog.vueexport default components: t-dialog:dialog export default Vuex 是一個(gè)專(zhuān)為是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它

14、采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。23安裝、使用 vuexnpm install vuex -save然后 , 在 main.js 中加入 :import vuex from vuexVue.use(vuex);var store = new vuex.Store(/store對(duì)象 state: show:false )再然后 , 在實(shí)例化 Vue對(duì)象時(shí)加入 store 對(duì)象 :new Vue( el: #app, ro

15、uter, store,/使用store template: , components: App )完成到這一步 , 上述例子中的 $store.state.show 就可以使用了。24modules這里 $store.state.show 無(wú)論哪個(gè)組件都可以使用,那組件多了之后,狀態(tài)也多了,這么多狀態(tài)都堆在 store 文件夾下的 index.js 不好維護(hù)怎么辦 ?我們可以使用 vuex 的 modules , 把 store 文件夾下的 index.js 改成 :import Vue from vueimport vuex from vuexVue.use(vuex);import di

16、alog_store from ./components/dialog_store.js;/引入某個(gè)store對(duì)象export default new vuex.Store( modules: dialog: dialog_store )這里我們引用了一個(gè) dialog_store.js , 在這個(gè) js 文件里我們就可以單獨(dú)寫(xiě) dialog 組件的狀態(tài)了 :export default state: show:false 做出這樣的修改之后 , 我們將之前我們使用的 $store.state.show 統(tǒng)統(tǒng)改為 $store.state.dialog.show 即可。如果還有其他的組件需要使

17、用 vuex , 就新建一個(gè)對(duì)應(yīng)的狀態(tài)文件 , 然后將他們加入 store 文件夾下的 index.js 文件中的 modules 中。modules: dialog: dialog_store, other: other,/其他組件25mutations我們對(duì)vuex 的依賴僅僅只有一個(gè) $store.state.dialog.show 一個(gè)狀態(tài) , 但是如果我們要進(jìn)行一個(gè)操作 , 需要依賴很多很多個(gè)狀態(tài) , 那管理起來(lái)又麻煩了 !mutations 登場(chǎng) , 問(wèn)題迎刃而解 :export default state:/state show:false , mutations: switch

18、_dialog(state) /這里的state對(duì)應(yīng)著上面這個(gè)state state.show = state.show ? false : true; / 你還可以在這里執(zhí)行其他的操作改變state 使用 $mit(switch_dialog) 來(lái)觸發(fā) mutations 中的 switch_dialog 方法。注意：注意：mutations 中的方法是不分組件的 , 假如你在 dialog_stroe.js 文件中的定義了switch_dialog 方法 , 在其他文件中的一個(gè) switch_dialog 方法 , 那么$mit(switch_dialog) 會(huì)執(zhí)行所有的 switch_d

19、ialog 方法。mutations里的操作必須是同步的。你一定好奇 , 如果在 mutations 里執(zhí)行異步操作會(huì)發(fā)生什么事情 , 實(shí)際上并不會(huì)發(fā)生什么奇怪的事情 , 只是官方推薦 , 不要在 mutationss 里執(zhí)行異步操作而已。26actions多個(gè) state 的操作 , 使用 mutations 會(huì)來(lái)觸發(fā)會(huì)比較好維護(hù) , 那么需要執(zhí)行多個(gè) mutations 就需要用 action 了:export default state:/state show:false , mutations: switch_dialog(state)/這里的state對(duì)應(yīng)著上面這個(gè)state sta

20、te.show = state.show?false:true; /你還可以在這里執(zhí)行其他的操作改變state , actions: switch_dialog(context)/這里的context和我們使用的$store擁有相同的對(duì)象和方法 mit(switch_dialog); /你還可以在這里觸發(fā)其他的mutations方法 , 那么 , 在之前的父組件中 , 我們需要做修改 , 來(lái)觸發(fā) action 里的 switch_dialog 方法:使用 $store.dispatch(switch_dialog) 來(lái)觸發(fā) action 中的 switch_dialog 方法。官方推薦 , 將

21、異步操作放在 action 中。27gettersgetters 和 vue 中的 computed 類(lèi)似 , 都是用來(lái)計(jì)算 state 然后生成新的數(shù)據(jù) ( 狀態(tài) ) 的。還是前面的例子 , 假如我們需要一個(gè)與狀態(tài) show 剛好相反的狀態(tài) , 并且我們需要寫(xiě)很多很多個(gè) not_show , 使用 getters 就可以解決這種問(wèn)題 :export default state: show:false , getters: not_show(state) /這里的state對(duì)應(yīng)著上面這個(gè)state return !state.show; , mutations: switch_dialog(state) /這里的state對(duì)應(yīng)著上面這個(gè)state state.show = state.show?false:true; /你還可以在這里執(zhí)行其他的操作改變state , actions: switch_dialog(context)/這里的context和我們使用的$store擁有相同的對(duì)象和方法 mit(switch_dialog); /你還可以在這里觸發(fā)其他的mutations方法 , 我們?cè)诮M件中使用 $store.state.dialog.show 來(lái)獲得狀態(tài) show , 類(lèi)似的 , 我們可以使用 $store.getters.not_sho