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

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

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

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

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

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

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

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