1、.1，2，目錄，1。歷史由來(lái)2。MVVM模式3。數(shù)據(jù)驅(qū)動(dòng)程序和基于組件的編程4。Vue的hello world！5.生命周期6。Vue第7頁(yè)。至Vue組件的重要選項(xiàng)8。Vue通用說(shuō)明，3，歷史的由來(lái)劉雨界談?wù)揤ue.js?！拔蚁氡M快獲得類型化的東西，因?yàn)樵诠雀璧墓ぷ餍枰跒g覽器中進(jìn)行大量的原型設(shè)計(jì)。當(dāng)時(shí)有些項(xiàng)目使用了Angular。Angular提供了多種通過(guò)數(shù)據(jù)綁定和數(shù)據(jù)驅(qū)動(dòng)來(lái)處理DOM的方法，因此不需要直接觸摸DOM。它也有一些副作用，就是按照它規(guī)定的方式構(gòu)建代碼。當(dāng)時(shí)的場(chǎng)面實(shí)在太重了。我想我只能把我喜歡的部分從Angular里拿出來(lái)，做一個(gè)很輕的庫(kù)。不需要那個(gè)額外的邏輯。(阿爾伯特愛因斯

2、坦，愛因斯坦)我還想知道Angular的源代碼是如何設(shè)計(jì)的。最初，我們嘗試提取Angular的小功能，例如聲明性數(shù)據(jù)綁定。Vue似乎是這樣開始的。過(guò)了一會(huì)兒，我覺(jué)得我做的事還有點(diǎn)前途。因?yàn)槲液芟矚g自己寫的東西。(莎士比亞，泰姆派姆派姆派姆派，我花了更多的時(shí)間包裝它，取名Vue.js)。2014年2月，我第一次在Github上作為實(shí)際項(xiàng)目發(fā)布到Hacker News上，鏈接上了主頁(yè)，之后在主頁(yè)上停留了幾個(gè)小時(shí)。(David aser，Northern Exposure，Northern Exposure)后來(lái)我寫了一篇文章，分享了Vue第一周的使用數(shù)據(jù)和我的感情。這是第一次看到這么多人在Gith

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

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

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

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

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

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

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