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

1、.1，2，目錄，1。歷史由來2。MVVM模式3。數(shù)據(jù)驅(qū)動程序和基于組件的編程4。Vue的hello world！5.生命周期6。Vue第7頁。至Vue組件的重要選項8。Vue通用說明，3，歷史的由來劉雨界談?wù)揤ue.js。“我想盡快獲得類型化的東西，因為在谷歌的工作需要在瀏覽器中進行大量的原型設(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月，我第一次在Github上作為實際項目發(fā)布到Hacker News上，鏈接上了主頁，之后在主頁上停留了幾個小時。(David aser，Northern Exposure，Northern Exposure)后來我寫了一篇文章，分享了Vue第一周的使用數(shù)據(jù)和我的感情。這是第一次看到這么多人在Gith

3、ub為項目打星星。我當時一周收獲了數(shù)百顆星星，整個人興奮壞了。原始鏈接：4、MVVM模式和MVC模式意味著軟件可以分為三部分。各部分之間的通信方式如下。所有通信都是單向的。5、MVVM模式和MVP模式將控制器重命名為Presenter，從而更改了通信方向。1.各部分之間的通信都是雙向的。2.View通過“Presenter”傳遞，而不與Model聯(lián)系。3.View很薄。不部署業(yè)務(wù)邏輯。這稱為“被動視圖”(Passive View)。也就是說，沒有預防，“Presenter”非常厚，所有邏輯都被放置。6、MVVM模式和MVVM模式使用雙向綁定。view中的更改將自動反映在ViewModel中，反

4、之亦然。Vue、Angular和Ember都采用此模型，Vue.js提供了比Angular更簡潔、更易于理解的API，使我們能夠快速地把手放在地板上使用Vue.js。7、數(shù)據(jù)驅(qū)動程序和組件編程、數(shù)據(jù)驅(qū)動程序：8，程序=數(shù)據(jù)結(jié)構(gòu)算法，這是每個程序熟悉的句子。前端需要處理接口，因此前端不純。html CSS不會抽象為js使用的數(shù)據(jù)結(jié)構(gòu)。相對現(xiàn)實的情況是，如果在ui控件相關(guān)聯(lián)的情況下沒有管理這些ui之間的更改的機制，程序員自己手動管理這些ui的狀態(tài)會很麻煩，而且很容易產(chǎn)生bug。(約翰f肯尼迪、Northern Exposure美國電視劇、程序員、程序員、程序員、程序員、程序員)工作基于DOM的前端

5、開發(fā)方法摘要：拼寫接口-查找DOM節(jié)點-修改屬性-檢測其他受影響的節(jié)點前端程序=拼寫接口操作ui算法vue或angular這些mvvm框架為前端提供了另一種思路。如果在完全基于數(shù)據(jù)的編程之前，您習慣使用jQuery操作DOM，那么在學習Vue.js時，您必須放棄手動操作DOM的想法。Vue.js是數(shù)據(jù)驅(qū)動的，無需手動操作DOM。Vue使用數(shù)據(jù)綁定方法自動綁定DOM節(jié)點的屬性。這將消除DOM節(jié)點操作的繁瑣過程。只要專注于數(shù)據(jù)狀態(tài)，就不必關(guān)注ui更新。無論是樣式、內(nèi)容還是可見性，切換類都有助于將焦點從現(xiàn)有DOM操作轉(zhuǎn)移到數(shù)據(jù)，并返回到編程。9，組件編程，此概念不是來自vue，而擴大web組件開發(fā)必

6、須是react。組件開發(fā)是簡單的開發(fā)理念。分割、治療、大型系統(tǒng)分成一個小模塊小組件，然后分配給其他人。額外的優(yōu)點是可以重復使用這個零件。10，理解組件的想法可以比喻函數(shù)。函數(shù)包含什么？1.格式參數(shù)2。局部變量3 .函數(shù)名稱4。返回值vue對應(yīng)什么？11，Vue的hello world！12，Vue的hello world！使用Vue的過程是定義MVVM組件的過程。1.View定義2。Model定義3。創(chuàng)建Vue實例或ViewModel。用于連接view和model。創(chuàng)建Vue實例時，必須傳遞可包含數(shù)據(jù)、安裝元素、方法、模具生命周期掛鉤等的可選對象。在此示例中，可選對象的El屬性指向View，e

7、l: #app指向?qū)⒀b載Vue實例的位置.表示此元素。Data屬性指向Model，data: exampleData表示Model是exampleData對象。Vue.js具有多種數(shù)據(jù)綁定語法。最基本的格式是文本插值。使用大括號語法對將在運行時使用數(shù)據(jù)對象的message屬性替換message，因此在頁面上顯示Hello World！即可從workspace頁面中移除物件。13、生命周期、14、生命周期、每個Vue實例在生成前都要經(jīng)歷一系列初始化進程。例如，實例必須配置數(shù)據(jù)觀察(數(shù)據(jù)觀察程序)、編譯模板、將實例裝載到DOM中，并在數(shù)據(jù)更改時更新DOM。在此過程中，實例調(diào)用某些生命周期掛接，從而

8、提供執(zhí)行定制邏輯的機會?？偣部梢苑譃?個階段。1.beforeCreate:在實例初始化后數(shù)據(jù)觀察(data observer)和事件/watcher事件配置之前調(diào)用。2.created:實例創(chuàng)建后調(diào)用。在此階段，實例完成了數(shù)據(jù)觀察、屬性和方法計算以及watch/event事件回調(diào)等配置。但是，裝載步驟尚未啟動，$el屬性當前不可見。3.beforeMount:在裝載開始之前調(diào)用。第一次調(diào)用相關(guān)的render函數(shù)。在服務(wù)器端渲染期間不調(diào)用此掛接。4.mounted: El是新創(chuàng)建的虛擬機。替換為$el并裝載到實例中后調(diào)用掛接。如果根實例裝載文檔中的元素，則調(diào)用mounted時vm。$el也在文

9、檔中。在服務(wù)器端渲染期間不調(diào)用此掛接。在更新、15，5.beforeUpdate:數(shù)據(jù)時調(diào)用，并在重新渲染虛擬DOM和應(yīng)用修補之前發(fā)生。您可以在此鉤上進一步變更狀態(tài)。這樣可以避免觸發(fā)其他重新渲染進程。在服務(wù)器端渲染期間不調(diào)用此掛接。6.updated:數(shù)據(jù)更改導致的虛擬DOM重新渲染和修補后調(diào)用掛鉤。調(diào)用此掛接時，組件DOM已更新，現(xiàn)在可以執(zhí)行依賴于DOM的任務(wù)。但是在大多數(shù)情況下，你應(yīng)該避免在此期間改變狀態(tài)。要相應(yīng)地更改狀態(tài)，通常建議使用計算的屬性或watcher替換。在服務(wù)器端渲染期間不調(diào)用此掛接。7.在刪除beforedestroy3360實例之前調(diào)用。在此步驟中，實例完全可用。在服務(wù)器端渲染期間不調(diào)用此掛接。8.