Vue基礎(chǔ)培訓-課件

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

歷史由來

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

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

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

原文鏈接：Vue基礎(chǔ)培訓歷史由來Vue基礎(chǔ)培訓4歷史由來Vue基礎(chǔ)培訓歷史由來Vue基礎(chǔ)培訓4MVVM模式 MVC模式的意思是，軟件可以分成三個部分。各部分之間的通信方式如下。

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

和Ember

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

Vue基礎(chǔ)培訓數(shù)據(jù)驅(qū)動和組件式編程數(shù)據(jù)驅(qū)動：Vue基礎(chǔ)培訓8數(shù)據(jù)驅(qū)動和組件式編程數(shù)據(jù)驅(qū)動：Vue基礎(chǔ)培訓數(shù)據(jù)驅(qū)動和組件式

程序=數(shù)據(jù)結(jié)構(gòu)+算法，這是每個程序都耳熟能詳?shù)囊痪湓?可在前端這里并不純粹,因為前端需要跟界面打交道,html+css并沒用被抽象成某種在js中使用的數(shù)據(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ù)驅(qū)動的編程。如果你之前已經(jīng)習慣了用jQuery操作DOM，學習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框架最大的思路上的突破。Vue基礎(chǔ)培訓程序=數(shù)據(jù)結(jié)構(gòu)+算法，這是每個程序都耳熟能詳?shù)?程序=數(shù)據(jù)結(jié)構(gòu)+算法，這是每個程序都耳熟能詳?shù)慕M件式編程

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

Vue之HelloWorld！

Vue基礎(chǔ)培訓

Vue之HelloWorld！

Vue基礎(chǔ)培訓12

Vue之HelloWorld！

Vue基礎(chǔ)培訓

VueVue之HelloWorld！

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

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

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

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

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

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

它可以總共分為8個階段：1.beforeCreate:在實例初始化之后，數(shù)據(jù)觀測(dataobserver)和event/watcher事件配置之前被調(diào)用。2.created:實例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測(dataobserver)，屬性和方法的運算，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替換，并掛載到實例上去之后調(diào)用該鉤子。如果root實例掛載了一個文檔內(nèi)元素，當mounted被調(diào)用時vm.$el也在文檔內(nèi)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。Vue基礎(chǔ)培訓生命周期 每個Vue實例在被創(chuàng)建之前都要經(jīng)過一系15生命周期 每個Vue實例在被創(chuàng)建之前都要經(jīng)過一系 5.beforeUpdate:數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬DOM重新渲染和打補丁之前。

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

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

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

Vue組件的重要選項

data:Vue基礎(chǔ)培訓

Vue組件的重要選項

data:Vue基礎(chǔ)培訓19

Vue組件的重要選項

data:Vue基礎(chǔ)培訓

Vue組Vue組件的重要選項 props:

methods:

watch:

computed:

Vue基礎(chǔ)培訓Vue組件的重要選項 props:Vue基礎(chǔ)培訓20Vue組件的重要選項 props:Vue基礎(chǔ)培訓Vue組件的Vue常用指令Vue基礎(chǔ)培訓Vue常用指令Vue基礎(chǔ)培訓21Vue常用指令Vue基礎(chǔ)培訓Vue常用指令Vue基礎(chǔ)培訓21Vue基礎(chǔ)培訓Vue基礎(chǔ)培訓22Vue基礎(chǔ)培訓Vue基礎(chǔ)培訓22Vue基礎(chǔ)培訓Vue基礎(chǔ)培訓23Vue基礎(chǔ)培訓Vue基礎(chǔ)培訓23目錄1.歷史由來2.MVVM模式3.數(shù)據(jù)驅(qū)動和組件式編程4.Vue之HelloWorld！5.生命周期6.從Vue到頁面7.Vue組件的重要選項8.Vue常用指令Vue基礎(chǔ)培訓目錄1.歷史由來Vue基礎(chǔ)培訓24目錄1.歷史由來Vue基礎(chǔ)培訓目錄1.歷史由來Vue基礎(chǔ)培訓

歷史由來

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

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

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

原文鏈接：Vue基礎(chǔ)培訓歷史由來Vue基礎(chǔ)培訓25歷史由來Vue基礎(chǔ)培訓歷史由來Vue基礎(chǔ)培訓25MVVM模式 MVC模式的意思是，軟件可以分成三個部分。各部分之間的通信方式如下。

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

和Ember

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

Vue基礎(chǔ)培訓數(shù)據(jù)驅(qū)動和組件式編程數(shù)據(jù)驅(qū)動：Vue基礎(chǔ)培訓29數(shù)據(jù)驅(qū)動和組件式編程數(shù)據(jù)驅(qū)動：Vue基礎(chǔ)培訓數(shù)據(jù)驅(qū)動和組件式

程序=數(shù)據(jù)結(jié)構(gòu)+算法，這是每個程序都耳熟能詳?shù)囊痪湓?可在前端這里并不純粹,因為前端需要跟界面打交道,html+css并沒用被抽象成某種在js中使用的數(shù)據(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ù)驅(qū)動的編程。如果你之前已經(jīng)習慣了用jQuery操作DOM，學習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框架最大的思路上的突破。Vue基礎(chǔ)培訓程序=數(shù)據(jù)結(jié)構(gòu)+算法，這是每個程序都耳熟能詳?shù)?0程序=數(shù)據(jù)結(jié)構(gòu)+算法，這是每個程序都耳熟能詳?shù)慕M件式編程

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

Vue之HelloWorld！

Vue基礎(chǔ)培訓

Vue之HelloWorld！

Vue基礎(chǔ)培訓33

Vue之HelloWorld！

Vue基礎(chǔ)培訓

VueVue之HelloWorld！

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

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

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

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

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

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

它可以總共分為8個階段：1.beforeCreate:在實例初始化之后，數(shù)據(jù)觀測(dataobserver)和event/watcher事件配置之前被調(diào)用。2.created:實例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測(dataobserver)，屬性和方法的運算，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替換，并掛載到實例上去之后調(diào)用該鉤子。如果root實例掛載了一個文檔內(nèi)元素，當mounted被調(diào)用時vm.$el也在文檔內(nèi)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。Vue基礎(chǔ)培訓生命周期 每個Vue實例在被創(chuàng)建之前都要經(jīng)過一系36生命周期 每個V