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

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

2、額外的邏輯。我也很好奇 Angular 的源碼到底是怎么設(shè)計的。我最開始只是想著手提取 Angular 里面很小的功能，如聲明式數(shù)據(jù)綁定。Vue 大概就是這么開始的。 用過一段時間之后，我感覺我做的東西還有點前途，因為我自己就很喜歡用。于是我花了更多的時間把它封裝好，取了一個名字叫做 Vue.js。 2014 年 2 月，我第一次將它作為實際的項目發(fā)布在 Github 上，并把鏈接發(fā)送到了 Hacker News 上，它就被頂?shù)搅耸醉摚缓笏谑醉摯撕脦讉€小時。后來，我寫了一篇文章，分享了 Vue 第一周的使用數(shù)據(jù)以及我的感受。 那是我第一次看見這么多人在 Github 上為一個項目打星星。

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

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

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

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

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

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

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

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

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

12、 ) 里的數(shù)據(jù)和頁面 ( 父組件 ) 按鈕交互的時候 , 它們之間的通訊很麻煩 。之所以麻煩 , 是因為父組件可以通過 props 給子組件傳遞參數(shù) , 但子組件內(nèi)卻不能直接修改父組件傳過來的參數(shù)。這時候 , 使用 vuex 就可以比較方便的解決這種問題了 。https:/ 點擊 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之所以這么麻煩 , 是因為父組件可以通過 props 給子組件傳遞參數(shù) , 但子組件內(nèi)卻不能直接修改父組件傳過來的參數(shù)。這時候 , 使用 vuex 就可以比較方便的解決這種問題了 : 點擊 import dialog from ./components/dialog.vueexport default components: t-dialog:dialog export default Vuex 是一個專為是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它

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

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

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

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

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

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

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

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