Vue基礎(chǔ)培訓(xùn)教學(xué)課件

11目錄1.歷史由來2.MVVM模式3.數(shù)據(jù)驅(qū)動(dòng)和組件式編程4.Vue之HelloWorld！5.生命周期6.從Vue到頁面7.Vue組件的重要選項(xiàng)8.Vue常用指令2目錄1.歷史由來2

歷史由來

尤雨溪談Vue.js：“我在Google的工作需要在瀏覽器上進(jìn)行大量原型設(shè)計(jì)，于是我想要盡快獲得有形的東西。當(dāng)時(shí)有些項(xiàng)目使用了Angular。Angular提供了一些用數(shù)據(jù)綁定和數(shù)據(jù)驅(qū)動(dòng)來處理DOM的方法，所以你不必自己碰DOM。它也有一些副作用，就是按照它規(guī)定的方式來構(gòu)建代碼。對于當(dāng)時(shí)的場景而言實(shí)在是太重了。

我想，我可以只把我喜歡的部分從Angular中提出來，建立一個(gè)非常輕巧的庫，不需要那些額外的邏輯。我也很好奇Angular的源碼到底是怎么設(shè)計(jì)的。我最開始只是想著手提取Angular里面很小的功能，如聲明式數(shù)據(jù)綁定。Vue大概就是這么開始的。

用過一段時(shí)間之后，我感覺我做的東西還有點(diǎn)前途，因?yàn)槲易约壕秃芟矚g用。于是我花了更多的時(shí)間把它封裝好，取了一個(gè)名字叫做Vue.js。2014年2月，我第一次將它作為實(shí)際的項(xiàng)目發(fā)布在Github上，并把鏈接發(fā)送到了HackerNews上，它就被頂?shù)搅耸醉?，然后它在首頁待了好幾個(gè)小時(shí)。后來，我寫了一篇文章，分享了Vue第一周的使用數(shù)據(jù)以及我的感受。那是我第一次看見這么多人在Github上為一個(gè)項(xiàng)目打星星。我當(dāng)時(shí)一個(gè)星期收獲了好幾百個(gè)星星，整個(gè)人都激動(dòng)壞了。

原文鏈接：/s?__biz=MzA4NjE3MDg4OQ%3D%3D&mid=2650964658&idx=1&sn=20bffec66f8b45002addb417a51ea92d&chksm=843aeed4b34d67c216f167bef8a1fdf85cc9bc5059007666869909d31ab86a8bd9d005614e4e&mpshare=1&scene=1&srcid=06137IzUoM84mpRfbUu7tDb03歷史由來3MVVM模式 MVC模式的意思是，軟件可以分成三個(gè)部分。各部分之間的通信方式如下。

所有通信都是單向的。4MVVM模式 MVC模式的意思是，軟件可以分成三個(gè)部分。各部MVVM模式 MVP模式將Controller改名為Presenter，同時(shí)改變了通信方向。1.各部分之間的通信，都是雙向的。2.View與Model不發(fā)生聯(lián)系，都通過Presenter傳遞。3.View非常薄，不部署任何業(yè)務(wù)邏輯，稱為"被動(dòng)視圖"（PassiveView），即沒有任何主動(dòng)性，而Presenter非常厚，所有邏輯都部署在那里。5MVVM模式 MVP模式將Controller改名為MVVM模式 MVVM模式采用雙向綁定（data-binding）：View的變動(dòng)，自動(dòng)反映在ViewModel，反之亦然。Vue、Angular

和Ember

都采用這種模式，相比于Angular，Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。6MVVM模式6數(shù)據(jù)驅(qū)動(dòng)和組件式編程數(shù)據(jù)驅(qū)動(dòng)：

7數(shù)據(jù)驅(qū)動(dòng)和組件式編程數(shù)據(jù)驅(qū)動(dòng)：7

程序=數(shù)據(jù)結(jié)構(gòu)+算法，這是每個(gè)程序都耳熟能詳?shù)囊痪湓?可在前端這里并不純粹,因?yàn)榍岸诵枰缑娲蚪坏?html+css并沒用被抽象成某種在js中使用的數(shù)據(jù)結(jié)構(gòu),充當(dāng)?shù)母嗍墙缑娴囊环N配置,jquery程序員看待他的方式就一塊塊的ui,用到的時(shí)候再$一下,獲取之后修改.整個(gè)程序?qū)懴聛硎橇懔闵⑸⒌墓?jié)點(diǎn)操作。一個(gè)比較實(shí)際的情況就是,在ui控件有聯(lián)動(dòng)的時(shí)候,如果沒有一種機(jī)制來管理這些ui之間的修改,那么依賴程序員自己去手動(dòng)管理這些ui的狀態(tài),會讓人煩不勝煩,且容易出現(xiàn)bug。

總結(jié)一下基于操作dom的前端開發(fā)方式：

拼界面->找到dom節(jié)點(diǎn)->修改屬性->檢測是否有其他影響的節(jié)點(diǎn)->根據(jù)剛剛修改的dom節(jié)點(diǎn)更新自己的狀態(tài)

那么上面的那句話就變成了：前端程序=拼界面+操作ui+算法 vue或者angular這些mvvm框架給了前端另一種思路,完全基于數(shù)據(jù)驅(qū)動(dòng)的編程。如果你之前已經(jīng)習(xí)慣了用jQuery操作DOM，學(xué)習(xí)Vue.js時(shí)請先拋開手動(dòng)操作DOM的思維，因?yàn)閂ue.js是數(shù)據(jù)驅(qū)動(dòng)的，你無需手動(dòng)操作DOM。Vue采用一種數(shù)據(jù)綁定的方式,自動(dòng)綁定dom節(jié)點(diǎn)的屬性.這樣就把你從操作dom節(jié)點(diǎn)的繁瑣過程中解脫出來了,你只要專注于數(shù)據(jù)的狀態(tài),ui更新的事情你不需要去管了,不管是樣式還是內(nèi)容,可見性還是切換class,框架幫你把關(guān)注點(diǎn)從傳統(tǒng)的dom操作轉(zhuǎn)移到了數(shù)據(jù),回歸編程的本質(zhì):程序=數(shù)據(jù)結(jié)構(gòu)+算法.這也是mvvm框架最大的思路上的突破。8程序=數(shù)據(jù)結(jié)構(gòu)+算法，這是每個(gè)程序都耳熟能詳?shù)慕M件式編程

這個(gè)理念不是來源于vue,把web組件式開發(fā)發(fā)揚(yáng)光大的應(yīng)該是react了,組件開發(fā)是一種樸素的開發(fā)思想,分而治之,大型系統(tǒng)拆分成一個(gè)個(gè)的小模塊小組件,分配給不同的人。額外的好處是順便能復(fù)用這個(gè)組件。9組件式編程9理解組件的思想可以類比函數(shù)。一個(gè)函數(shù)包含哪些東西呢？1.形參2.局部變量3.函數(shù)名4.返回值那對應(yīng)到vue中又是什么呢?10理解組件的思想可以類比函數(shù)。一個(gè)函數(shù)包含哪些東西呢？10

Vue之HelloWorld！

11

Vue之HelloWorld！

11Vue之HelloWorld！

使用Vue的過程就是定義MVVM各個(gè)組成部分的過程的過程。

1.定義View 2.定義Model 3.創(chuàng)建一個(gè)Vue實(shí)例或"ViewModel"，它用于連接View和Model

在創(chuàng)建Vue實(shí)例時(shí)，需要傳入一個(gè)選項(xiàng)對象，選項(xiàng)對象可以包含數(shù)據(jù)、掛載元素、方法、模生命周期鉤子等等。

在這個(gè)示例中，選項(xiàng)對象的el屬性指向View，el:'#app'表示該Vue實(shí)例將掛載到<divid="app">...</div>這個(gè)元素；data屬性指向Model，data:exampleData表示我們的Model是exampleData對象。

Vue.js有多種數(shù)據(jù)綁定的語法，最基礎(chǔ)的形式是文本插值，使用一對大括號語法，在運(yùn)行時(shí){{message}}會被數(shù)據(jù)對象的message屬性替換，所以頁面上會輸出"HelloWorld!"。12Vue之HelloWorld！ 使用Vue的過程就是定義M生命周期13生命周期13生命周期

每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。例如，實(shí)例需要配置數(shù)據(jù)觀測(dataobserver)、編譯模版、掛載實(shí)例到DOM，然后在數(shù)據(jù)變化時(shí)更新DOM。在這個(gè)過程中，實(shí)例也會調(diào)用一些生命周期鉤子，這就給我們提供了執(zhí)行自定義邏輯的機(jī)會。

它可以總共分為8個(gè)階段：1.beforeCreate:在實(shí)例初始化之后，數(shù)據(jù)觀測(dataobserver)和event/watcher事件配置之前被調(diào)用。2.created:實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(dataobserver)，屬性和方法的運(yùn)算，watch/event事件回調(diào)。然而，掛載階段還沒開始，$el屬性目前不可見。3.beforeMount:在掛載開始之前被調(diào)用：相關(guān)的render函數(shù)首次被調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(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)用。14生命周期 每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過一系 5.beforeUpdate:數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬DOM重新渲染和打補(bǔ)丁之前。

你可以在這個(gè)鉤子中進(jìn)一步地更改狀態(tài)，這不會觸發(fā)附加的重渲染過程。該鉤子在服務(wù)器端渲染期間不被調(diào)用。 6.updated:由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補(bǔ)丁，在這之后會調(diào)用該鉤子。當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件DOM已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，你應(yīng)該避免在此期間更改狀態(tài)。如果要相應(yīng)狀態(tài)改變，通常最好使用計(jì)算屬性或watcher

取而代之。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

7.beforeDestroy:實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。8.destroyed:Vue實(shí)例銷毀后調(diào)用。調(diào)用后，Vue實(shí)例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實(shí)例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。15 5.beforeUpdate:數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生從Vue到頁面16從Vue到頁面16從Vue到頁面17從Vue到頁面17

Vue組件的重要選項(xiàng)

data:18

Vue組件的重要選項(xiàng)

data:18Vue組件的重要選項(xiàng) props:

methods:

watch:

computed:

19Vue組件的重要選項(xiàng) props:19Vue常用指令20Vue常用指令20結(jié)束2121221目錄1.歷史由來2.MVVM模式3.數(shù)據(jù)驅(qū)動(dòng)和組件式編程4.Vue之HelloWorld！5.生命周期6.從Vue到頁面7.Vue組件的重要選項(xiàng)8.Vue常用指令23目錄1.歷史由來2

歷史由來

尤雨溪談Vue.js：“我在Google的工作需要在瀏覽器上進(jìn)行大量原型設(shè)計(jì)，于是我想要盡快獲得有形的東西。當(dāng)時(shí)有些項(xiàng)目使用了Angular。Angular提供了一些用數(shù)據(jù)綁定和數(shù)據(jù)驅(qū)動(dòng)來處理DOM的方法，所以你不必自己碰DOM。它也有一些副作用，就是按照它規(guī)定的方式來構(gòu)建代碼。對于當(dāng)時(shí)的場景而言實(shí)在是太重了。

我想，我可以只把我喜歡的部分從Angular中提出來，建立一個(gè)非常輕巧的庫，不需要那些額外的邏輯。我也很好奇Angular的源碼到底是怎么設(shè)計(jì)的。我最開始只是想著手提取Angular里面很小的功能，如聲明式數(shù)據(jù)綁定。Vue大概就是這么開始的。

用過一段時(shí)間之后，我感覺我做的東西還有點(diǎn)前途，因?yàn)槲易约壕秃芟矚g用。于是我花了更多的時(shí)間把它封裝好，取了一個(gè)名字叫做Vue.js。2014年2月，我第一次將它作為實(shí)際的項(xiàng)目發(fā)布在Github上，并把鏈接發(fā)送到了HackerNews上，它就被頂?shù)搅耸醉?，然后它在首頁待了好幾個(gè)小時(shí)。后來，我寫了一篇文章，分享了Vue第一周的使用數(shù)據(jù)以及我的感受。那是我第一次看見這么多人在Github上為一個(gè)項(xiàng)目打星星。我當(dāng)時(shí)一個(gè)星期收獲了好幾百個(gè)星星，整個(gè)人都激動(dòng)壞了。

原文鏈接：/s?__biz=MzA4NjE3MDg4OQ%3D%3D&mid=2650964658&idx=1&sn=20bffec66f8b45002addb417a51ea92d&chksm=843aeed4b34d67c216f167bef8a1fdf85cc9bc5059007666869909d31ab86a8bd9d005614e4e&mpshare=1&scene=1&srcid=06137IzUoM84mpRfbUu7tDb024歷史由來3MVVM模式 MVC模式的意思是，軟件可以分成三個(gè)部分。各部分之間的通信方式如下。

所有通信都是單向的。25MVVM模式 MVC模式的意思是，軟件可以分成三個(gè)部分。各部MVVM模式 MVP模式將Controller改名為Presenter，同時(shí)改變了通信方向。1.各部分之間的通信，都是雙向的。2.View與Model不發(fā)生聯(lián)系，都通過Presenter傳遞。3.View非常薄，不部署任何業(yè)務(wù)邏輯，稱為"被動(dòng)視圖"（PassiveView），即沒有任何主動(dòng)性，而Presenter非常厚，所有邏輯都部署在那里。26MVVM模式 MVP模式將Controller改名為MVVM模式 MVVM模式采用雙向綁定（data-binding）：View的變動(dòng)，自動(dòng)反映在ViewModel，反之亦然。Vue、Angular

和Ember

都采用這種模式，相比于Angular，Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。27MVVM模式6數(shù)據(jù)驅(qū)動(dòng)和組件式編程數(shù)據(jù)驅(qū)動(dòng)：

28數(shù)據(jù)驅(qū)動(dòng)和組件式編程數(shù)據(jù)驅(qū)動(dòng)：7

程序=數(shù)據(jù)結(jié)構(gòu)+算法，這是每個(gè)程序都耳熟能詳?shù)囊痪湓?可在前端這里并不純粹,因?yàn)榍岸诵枰缑娲蚪坏?html+css并沒用被抽象成某種在js中使用的數(shù)據(jù)結(jié)構(gòu),充當(dāng)?shù)母嗍墙缑娴囊环N配置,jquery程序員看待他的方式就一塊塊的ui,用到的時(shí)候再$一下,獲取之后修改.整個(gè)程序?qū)懴聛硎橇懔闵⑸⒌墓?jié)點(diǎn)操作。一個(gè)比較實(shí)際的情況就是,在ui控件有聯(lián)動(dòng)的時(shí)候,如果沒有一種機(jī)制來管理這些ui之間的修改,那么依賴程序員自己去手動(dòng)管理這些ui的狀態(tài),會讓人煩不勝煩,且容易出現(xiàn)bug。

總結(jié)一下基于操作dom的前端開發(fā)方式：

拼界面->找到dom節(jié)點(diǎn)->修改屬性->檢測是否有其他影響的節(jié)點(diǎn)->根據(jù)剛剛修改的dom節(jié)點(diǎn)更新自己的狀態(tài)

那么上面的那句話就變成了：前端程序=拼界面+操作ui+算法 vue或者angular這些mvvm框架給了前端另一種思路,完全基于數(shù)據(jù)驅(qū)動(dòng)的編程。如果你之前已經(jīng)習(xí)慣了用jQuery操作DOM，學(xué)習(xí)Vue.js時(shí)請先拋開手動(dòng)操作DOM的思維，因?yàn)閂ue.js是數(shù)據(jù)驅(qū)動(dòng)的，你無需手動(dòng)操作DOM。Vue采用一種數(shù)據(jù)綁定的方式,自動(dòng)綁定dom節(jié)點(diǎn)的屬性.這樣就把你從操作dom節(jié)點(diǎn)的繁瑣過程中解脫出來了,你只要專注于數(shù)據(jù)的狀態(tài),ui更新的事情你不需要去管了,不管是樣式還是內(nèi)容,可見性還是切換class,框架幫你把關(guān)注點(diǎn)從傳統(tǒng)的dom操作轉(zhuǎn)移到了數(shù)據(jù),回歸編程的本質(zhì):程序=數(shù)據(jù)結(jié)構(gòu)+算法.這也是mvvm框架最大的思路上的突破。29程序=數(shù)據(jù)結(jié)構(gòu)+算法，這是每個(gè)程序都耳熟能詳?shù)慕M件式編程

這個(gè)理念不是來源于vue,把web組件式開發(fā)發(fā)揚(yáng)光大的應(yīng)該是react了,組件開發(fā)是一種樸素的開發(fā)思想,分而治之,大型系統(tǒng)拆分成一個(gè)個(gè)的小模塊小組件,分配給不同的人。額外的好處是順便能復(fù)用這個(gè)組件。30組件式編程9理解組件的思想可以類比函數(shù)。一個(gè)函數(shù)包含哪些東西呢？1.形參2.局部變量3.函數(shù)名4.返回值那對應(yīng)到vue中又是什么呢?31理解組件的思想可以類比函數(shù)。一個(gè)函數(shù)包含哪些東西呢？10

Vue之HelloWorld！

32

Vue之HelloWorld！

11Vue之HelloWorld！

使用Vue的過程就是定義MVVM各個(gè)組成部分的過程的過程。

1.定義View 2.定義Model 3.創(chuàng)建一個(gè)Vue實(shí)例或"ViewModel"，它用于連接View和Model

在創(chuàng)建Vue實(shí)例時(shí)，需要傳入一個(gè)選項(xiàng)對象，選項(xiàng)對象可以包含數(shù)據(jù)、掛載元素、方法、模生命周期鉤子等等。

在這個(gè)示例中，選項(xiàng)對象的el屬性指向View，el:'#app'表示該Vue實(shí)例將掛載到<divid="app">...</div>這個(gè)元素；data屬性指向Model，data:exampleData表示我們的Model是exampleData對象。

Vue.js有多種數(shù)據(jù)綁定的語法，最基礎(chǔ)的形式是文本插值，使用一對大括號語法，在運(yùn)行時(shí){{message}}會被數(shù)據(jù)對象的message屬性替換，所以頁面上會輸出"HelloWorld!"。33Vue之HelloWorld！ 使用Vue的過程就是定義M生命周期34生命周期13生命周期

每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過一系列的初始化過程。例如，實(shí)例需要配置數(shù)據(jù)觀測(dataobserver)、編譯模版、掛載實(shí)例到DOM，然后在數(shù)據(jù)變化時(shí)更新DOM。在這個(gè)過程中，實(shí)例也會調(diào)用一些生命周期鉤子，這就給我們提供了執(zhí)行自定義邏輯的機(jī)會。

它可以總共分為8個(gè)階段：1.beforeCreate:在實(shí)例初始化之后，數(shù)據(jù)觀測(dataobserver)和event/watcher事件配置之前被調(diào)用。2.created:實(shí)例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實(shí)例已完成以下的配置：數(shù)據(jù)觀測(dataobserver)，屬性和方法的運(yùn)算，watch/event事件回調(diào)。然而，掛載階段還沒開始，$el屬性目前不可見。3.beforeMount:在掛載開始之前被調(diào)用：相關(guān)的render函數(shù)首次被調(diào)用。該鉤子在服務(wù)器端渲染期間不被調(diào)用。4.mounted:el