vue介紹

神奇的前端框架——Vue.js

vuea1.png

• 一個(gè)框架的快速成長(zhǎng)源于它有個(gè)強(qiáng)大的、活躍度很高的社區(qū)。

vuea2.png

前言

上帝說，小碼哥的HTML5課程中得有Vue.js，于是就有了Vue.js這塊課程！

Vue的作者：尤小右，真名：尤雨溪

vuea3.jpg

• Vue.js和React、Angularjs、Knockout、AvalonJS，我該用哪一個(gè)？
  • 不用糾結(jié)，因?yàn)榍叭齻€(gè)框架我們都會(huì)講，企業(yè)里面要用哪一個(gè)，你就用哪一個(gè)；
  • Knockout：微軟出品，可以說是MVVM的模型領(lǐng)域內(nèi)的先驅(qū)，使用函數(shù)偷龍轉(zhuǎn)鳳，最短編輯長(zhǎng)度算法實(shí)現(xiàn)DOM的同步，兼容IE6，實(shí)現(xiàn)高超，但源碼極其難讀，最近幾年發(fā)展緩慢。
  • Vue：是最近幾年出來的一個(gè)開源Javascript框架，語(yǔ)法精簡(jiǎn)，實(shí)現(xiàn)精致，但對(duì)瀏覽器的支持受限，最低只能支持IE9。
  • AvalonJS：是一個(gè)簡(jiǎn)單易用迷你的MVVM框架，由大神司徒正美研發(fā)。使用簡(jiǎn)單，實(shí)現(xiàn)明快。
  • React：React并不屬于MVVM架構(gòu)，但是它帶來virtual dom的革命性概念，受限于視圖的規(guī)模。
  • Angularjs：Google出品，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。AngularJS有著諸多特性，最為核心的是：MVC、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語(yǔ)義化標(biāo)簽、依賴注入等等。入門容易上手難，大量避不開的概念也是很頭疼的。

漸進(jìn)式框架

• Angular，是強(qiáng)主張的，如果你用它，必須接受以下東西：
  • 必須使用它的模塊機(jī)制
  • 必須使用它的依賴注入
  • 必須使用它的特殊形式定義組件（這一點(diǎn)每個(gè)視圖框架都有，難以避免）
• 所以Angular是帶有比較強(qiáng)的排它性的，如果你的應(yīng)用不是從頭開始，而是要不斷考慮是否跟其他東西集成，這些主張會(huì)帶來一些困擾

• vue是漸進(jìn)的，沒有強(qiáng)主張，你可以在原有大系統(tǒng)的上面，把一兩個(gè)組件改用它實(shí)現(xiàn)，當(dāng)jQuery用；也可以整個(gè)用它全家桶開發(fā)，當(dāng)Angular用；還可以用它的視圖，搭配你自己設(shè)計(jì)的整個(gè)下層用。

  
  

一、Vue簡(jiǎn)介

• Vue.js 是一個(gè)用于創(chuàng)建 Web 交互界面的庫(kù)。它讓你通過簡(jiǎn)單而靈活的 API 創(chuàng)建由數(shù)據(jù)驅(qū)動(dòng)的 UI 組件。

• Vue.js是一款輕量級(jí)的、以數(shù)據(jù)驅(qū)動(dòng)構(gòu)建web界面的前端JS框架，它在架構(gòu)設(shè)計(jì)上采用了MVVM（Model-View-ViewModel）模式，其中ViewModel是Vue.js的核心，它是一個(gè)Vue的實(shí)例，而這個(gè)實(shí)例又作用域頁(yè)面上的某個(gè)HTML元素。

• 其核心在于通過數(shù)據(jù)驅(qū)動(dòng)界面的更新和展示而非JS中通過操作DOM來改變頁(yè)面的顯示。

vuea4.jpeg

vuea5.png

上圖的DOM Listeners和Data Bindings是數(shù)據(jù)驅(qū)動(dòng)中實(shí)現(xiàn)數(shù)據(jù)雙向綁定的關(guān)鍵，實(shí)際的 DOM 封裝和輸出格式都被抽象為了 Directives 和 Filters; 這也是Vue.js事件驅(qū)動(dòng)的原理所在。

對(duì)于View而言，ViewModel中的DOM Listeners工具會(huì)幫助我們監(jiān)聽頁(yè)面上DOM元素的變化，一旦有變化，Model中的數(shù)據(jù)也會(huì)發(fā)生改變；

對(duì)于Model而言，當(dāng)我們操縱Model中的數(shù)據(jù)時(shí)，Data Bindings工具會(huì)幫助我們更改View中的DOM元素。

vuea6.png

• 此外，頁(yè)面組件化也是Vue.js的核心，它提供了一種抽象，讓我們可以用獨(dú)立可復(fù)用的小組件來構(gòu)建大型應(yīng)用。
• 組件可以擴(kuò)展HTML元素，封裝可重用的HTML代碼，我們可以將組件看作自定義的HTML元素。
  
  

a1.png

a2.png

vuea7.png

• 所以，我們搭建的任何一個(gè)界面你可以把其抽象成為一個(gè)組件樹，充分的去復(fù)用它。