Vue基礎(chǔ)培訓(xùn)課件

1、1、學(xué)習(xí)交流PPT、目錄、1 .歷史由來(lái)2.MVVM模式3 .數(shù)據(jù)驅(qū)動(dòng)和組件式編程4.Vue的Hello World！ 5 .從生命周期6.vue到頁(yè)面7.Vue組件的重要選項(xiàng)8.Vue常用指令，2 .學(xué)習(xí)交流PPT，歷史是尤雨溪談Vue.js :“我在Google的工作中需要在瀏覽器中進(jìn)行大量的原型設(shè)定修訂，所以當(dāng)時(shí)，有些項(xiàng)目使用了Angular。 Angular提供了多種方法來(lái)處理數(shù)據(jù)綁定和數(shù)據(jù)驅(qū)動(dòng)的DOM，因此您不需要親自觸摸DOM。 此外，還有按照該規(guī)定構(gòu)建代碼的副作用。 對(duì)當(dāng)時(shí)的場(chǎng)景來(lái)說(shuō)很重。 我想，可以把我喜歡的部分從Angular中提取出來(lái)，制作出非常輕量的庫(kù)。 你不需要那些追加

2、的邏輯。 我很感興趣Angular的源代碼是如何修改的。 開(kāi)始時(shí)，我只是想著手提取Angular的小功能，如聲明的數(shù)據(jù)綁定。 Vue大概是這樣開(kāi)始的。 過(guò)了一會(huì)兒，我覺(jué)得我做的東西還是有前途的。 因?yàn)槲易约汉芟矚g用。 所以我花了更多的時(shí)間來(lái)封裝它，取名為Vue.js。 2014年2月，我第一次將其作為實(shí)際項(xiàng)目發(fā)表在Github上，并向Hacker News發(fā)送了鏈接。 那個(gè)刊登在主頁(yè)上，之后在主頁(yè)上待了幾個(gè)小時(shí)。 然后寫了一篇文章，分享Vue第一周的使用數(shù)據(jù)和我的心情。 那是我第一次看到這么多人在Github為項(xiàng)目打星星。 我一周收獲數(shù)百顆星星，全員興奮地壞掉了。 原文鏈接：3，學(xué)習(xí)交流PPT

3、，MVVM模式，MVC模式，意味著軟件分為三個(gè)部分。 各部分之間的通信方式如下所示。 所有的通訊都是單向的。 學(xué)習(xí)交流PPT、MVVM模式，MVP模式將控制器改名為Presenter，同時(shí)改變了通信方向。 1 .各部分之間的通信是雙向的。 2. View與Model不聯(lián)系，通過(guò)Presenter傳達(dá)。 3. View非常薄，不引入業(yè)務(wù)邏輯，稱為被動(dòng)視圖，沒(méi)有主動(dòng)性，Presenter非常厚，所有邏輯都放在那里。 5、學(xué)習(xí)交流PPT、MVVM模式、MVVM模式為雙向綁定：視圖的變動(dòng)自動(dòng)反映到視圖模型，反之亦然。 Vue、Angular和Ember采用了此模型，Vue.js提供了比Angular更

4、簡(jiǎn)單、更易于理解的API，以便快速獲得和使用Vue.js。 6、學(xué)習(xí)交流PPT、數(shù)據(jù)驅(qū)動(dòng)和組件式編程、數(shù)據(jù)驅(qū)動(dòng)：7、學(xué)習(xí)交流PPT、程序=數(shù)據(jù)結(jié)構(gòu)算法，這是所有程序都熟悉的語(yǔ)言，前端不純。 由于前端需要與接口交互，因此html css未抽象化為任何html css的一個(gè)相對(duì)現(xiàn)實(shí)的情形是依賴編程員本身，除非存在當(dāng)聯(lián)合ui控件的時(shí)候管理這些ui之間的修改的機(jī)制總結(jié)基于操作dom的前端開(kāi)發(fā)方法：拼寫接口-查找dom節(jié)點(diǎn)-修改屬性-檢測(cè)是否有其他影響如果習(xí)慣使用jQuery操作dom，在學(xué)習(xí)Vue.js時(shí)，請(qǐng)考慮手動(dòng)操作dom Vue.js是由數(shù)據(jù)驅(qū)動(dòng)的，因此不需要手動(dòng)操作DOM。Vue采用一種數(shù)據(jù)綁

5、定方式，自動(dòng)綁定dom節(jié)點(diǎn)的屬性。 這樣，您就可以從操作dom節(jié)點(diǎn)的繁瑣過(guò)程中解放出來(lái)，僅集中在數(shù)據(jù)的狀態(tài)上，而無(wú)需管理ui更新，并且樣式、內(nèi)容、可視性、class也一起將該關(guān)注點(diǎn)從傳統(tǒng)的dom操作轉(zhuǎn)移到數(shù)據(jù)，以進(jìn)行編程學(xué)習(xí)組件式編程的理念不應(yīng)來(lái)自于vue，發(fā)揮web組件式開(kāi)發(fā)的應(yīng)該是react，組件開(kāi)發(fā)是樸素的開(kāi)發(fā)思想，分開(kāi)治療，大型系統(tǒng)成為一個(gè)小模塊小組件額外的優(yōu)點(diǎn)是可以順便重用這個(gè)組件。 9、學(xué)習(xí)交流PPT，理解組件思想類似于函數(shù)。 函數(shù)中包含了什么呢？ 1 .波形殘奧表2 .局部變量3 .函數(shù)名稱4 .與上限值vue對(duì)應(yīng)的是什么？ 10、交流PPT，學(xué)習(xí)英雄世界！ 學(xué)習(xí)11、交流PPT

6、、歡樂(lè)世界！ 使用Vue的進(jìn)程是為MVVM的每個(gè)組件定義進(jìn)程的進(jìn)程。 1 .定義視圖2 .定義模型3 .創(chuàng)建Vue實(shí)例或視圖模型。 要連接view和Model，必須在創(chuàng)建Vue實(shí)例時(shí)傳遞可選對(duì)象，包括數(shù)據(jù)、裝載元素、方法、模型生命周期掛接等。 在此示例中，可選對(duì)象的el屬性指向View，el: #app指向Model，指示Vue實(shí)例將掛載到.此元素中，而data: exampleData指向Model Vue.js有幾種數(shù)據(jù)綁定語(yǔ)法，其中最基本的格式是文本插值，并且在頁(yè)面上使用大括號(hào)語(yǔ)法對(duì)，以便在運(yùn)行時(shí)用數(shù)據(jù)對(duì)象的message屬性替換message，因此Hello World！ 的雙曲馀弦值

7、。12、學(xué)習(xí)通信PPT、生命周期、13、學(xué)習(xí)通信PPT、生命周期，每個(gè)Vue實(shí)例在創(chuàng)建之前必須經(jīng)過(guò)一系列初始化過(guò)程。 例如，實(shí)例必須設(shè)置數(shù)據(jù)觀察器、編譯模板、將實(shí)例裝載到DOM，并在數(shù)據(jù)更改時(shí)更新DOM。 在此過(guò)程中，實(shí)例也調(diào)用一些生命周期掛接，以提供執(zhí)行自定義邏輯的機(jī)會(huì)。 1.beforeCreate:分為八個(gè)階段：實(shí)例初始化后、數(shù)據(jù)觀察器和event/watcher事件部署前調(diào)用。 2 .創(chuàng)建2.created:實(shí)例后調(diào)用。 在此步驟中，實(shí)例完成了數(shù)據(jù)觀察器、屬性和方法運(yùn)算以及watch/event事件回調(diào)的配置。 但是，裝載階段尚未開(kāi)始，$el屬性當(dāng)前尚未顯示。 3 .在開(kāi)始裝載之前調(diào)用

8、3.beforeMount: 首先調(diào)用相關(guān)的render函數(shù)。 在服務(wù)器端渲染期間不調(diào)用此掛接。 4.mounted: el將被新創(chuàng)建的vm.$el替換，并在裝載到實(shí)例后調(diào)用掛接。 如果root實(shí)例掛載了文檔中的元素，則在調(diào)用mounted時(shí)，vm.$el也在文檔中。 在服務(wù)器端渲染期間不調(diào)用此掛接。14、學(xué)習(xí)通信PPT，更新5.beforeUpdate:數(shù)據(jù)時(shí)調(diào)用，在重新渲染虛擬DOM并應(yīng)用修補(bǔ)程序之前發(fā)生。 您可以使用此掛接進(jìn)一步更改狀態(tài)。 這不會(huì)觸發(fā)附加的重新渲染過(guò)程。 在服務(wù)器端渲染期間不調(diào)用此掛接。 6 .隨后調(diào)用通過(guò)更改6.updated:數(shù)據(jù)重新渲染和修補(bǔ)虛擬DOM。 調(diào)用此掛接時(shí)，將更新組件DOM，因此現(xiàn)在可以執(zhí)行依賴于DOM的操作。 但是，在大多數(shù)情況下，請(qǐng)確保狀態(tài)在此期間不會(huì)更改。 更改狀態(tài)時(shí)，通常建議改為使用修正屬性或watcher。 在服務(wù)器端渲染期間不調(diào)用此掛接。 7 .在銷毀7.beforeDestroy:實(shí)例之前調(diào)用。 在此步驟中，實(shí)例完全可用。 在服務(wù)器端渲染期間不調(diào)用此掛接。 8.destroyed:Vue實(shí)例被銷毀后調(diào)