vue中的MVVM模式

即Model-View-ViewModel。

Vue是以數(shù)據(jù)為驅(qū)動(dòng)的，Vue自身將DOM和數(shù)據(jù)進(jìn)行綁定，一旦創(chuàng)建綁定英妓，DOM和數(shù)據(jù)將保持同步，每當(dāng)數(shù)據(jù)發(fā)生變化门驾，DOM會(huì)跟著變化。

ViewModel是Vue的核心，它是Vue的一個(gè)實(shí)例憔涉。Vue實(shí)例時(shí)作用域某個(gè)HTML元素上的，這個(gè)HTML元素可以是body析苫，也可以是某個(gè)id所指代的元素兜叨。

DOM Listeners和Data Bindings是實(shí)現(xiàn)雙向綁定的關(guān)鍵。DOM Listeners監(jiān)聽(tīng)頁(yè)面所有View層DOM元素的變化衩侥，當(dāng)發(fā)生變化国旷，Model層的數(shù)據(jù)隨之變化；Data Bindings監(jiān)聽(tīng)Model層的數(shù)據(jù)茫死，當(dāng)數(shù)據(jù)發(fā)生變化跪但，View層的DOM元素隨之變化。

2.v-show指令峦萎，v-if的區(qū)別

條件渲染指令屡久，與v-if不同的是，無(wú)論v-show的值為true或false爱榔，元素都會(huì)存在于HTML代碼中被环；而只有當(dāng)v-if的值為true，元素才會(huì)存在于HTML代碼中详幽。v-show指令只是設(shè)置了元素CSS的style值

3.如何讓css只在當(dāng)前組件中起作用

在每一個(gè)vue組件中都可以定義各自的css筛欢，js，如果希望組件內(nèi)寫(xiě)的css只對(duì)當(dāng)前組件起作用唇聘，只需要在style中寫(xiě)入scoped版姑，即：

4.指令keep-alive

在vue-router寫(xiě)著keep-alive，keep-alive的含義：

如果把切換出去的組件保留在內(nèi)存中雳灾，可以保留它的狀態(tài)或避免重新渲染漠酿。為此可以添加一個(gè)keep-alive指令

5.Vuejs組件

vuejs構(gòu)建組件使用

Vue.component('componentName',{ /*component*/ })；? 這里注意一點(diǎn)谎亩，組件要先注冊(cè)再使用

Vue.component('mine',{

? ? ? ? ? template:'#mineTpl',

? ? ? ? ? props:['name','title','city','content']

? ? ? ? });

var v=new Vue({

? ? ? el:'#vueInstance',

? ? ? data:{

? ? ? ? ? name:'zhang',

? ? ? ? ? title:'this is title',

? ? ? ? city:'Beijing',

? ? ? ? content:'these are some desc about Blog'

? ? }

});

6.路由嵌套

路由嵌套會(huì)將其他組件渲染到該組件內(nèi)炒嘲，而不是進(jìn)行整個(gè)頁(yè)面跳轉(zhuǎn)router-view本身就是將組件渲染到該位置，想要進(jìn)行頁(yè)面跳轉(zhuǎn)匈庭，就要將頁(yè)面渲染到根組件夫凸，在起始配置路由時(shí)候?qū)懙剑?/p>

var App = Vue.extend({ root });

router.start(App,'#app');

這里首先將根組件注冊(cè)進(jìn)來(lái)，用于將路由中配置好的各個(gè)頁(yè)面渲染出來(lái)阱持，然后將根組件掛載到與#app匹配的元素上夭拌。

7.指令v-el的使用

有時(shí)候我們想就像使用jquery那樣去訪問(wèn)一個(gè)元素，此時(shí)就可以使用v-el指令，去給這個(gè)元素注冊(cè)一個(gè)索引鸽扁，方便通過(guò)所屬實(shí)例的$el訪問(wèn)這個(gè)元素蒜绽。

注意

HTML不區(qū)分大小寫(xiě)，所以v-el:someEl將轉(zhuǎn)換為全小寫(xiě)桶现《阊牛可以用v-el:some-el然后設(shè)置this.$el.someEl。

示例

hello

world

this.$els.msg.textContent // -> "hello"

this.$els.otherMsg.textContent // -> "world"

this.$els.msg //->hello

8.vuejs中使用事件名

在vuejs中骡和，我們經(jīng)常要綁定一些事件相赁，有時(shí)候給DOM元素綁定，有時(shí)候給組件綁定慰于。綁定事件在HTML中用v-on:click-"event",這時(shí)evet的名字不要出現(xiàn)大寫(xiě)钮科，因?yàn)樵?.x中不區(qū)分大小寫(xiě)，所以如果我們?cè)贖TML寫(xiě)v-on:click="myEvent"而在js中寫(xiě)myEvent就出錯(cuò)誤婆赠，所以在vuejs的1.x綁定事件時(shí)候绵脯，要盡量避免使用大寫(xiě)字母。在2.0中沒(méi)有該限制页藻！

9.Vue.js是什么

Vue.js（是一套構(gòu)建用戶界面的 漸進(jìn)式框架桨嫁。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)份帐。Vue 的核心庫(kù)只關(guān)注視圖層璃吧，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合废境。另一方面畜挨，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。

Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件

10.VueJS 特性：

I: MVVM模式（數(shù)據(jù)變量（model）發(fā)生改變 視圖（view）也改變噩凹， 視圖（view）改變巴元，數(shù)據(jù)變量（model）也發(fā)生改變）

使用MVVM模式有幾大好處：

　　1. 低耦合。View可以獨(dú)立于Model變化和修改驮宴，一個(gè)ViewModel可以綁定到不同的View上逮刨，當(dāng)View變化的時(shí)候Model可以不變，當(dāng)Model變化的時(shí)候View也可以不變堵泽。

　　2. 可重用性修己。可以把一些視圖的邏輯放在ViewModel里面迎罗，讓很多View重用這段視圖邏輯睬愤。

　　3. 獨(dú)立開(kāi)發(fā)。開(kāi)發(fā)人員可以專注與業(yè)務(wù)邏輯和數(shù)據(jù)的開(kāi)發(fā)(ViewModel)纹安。設(shè)計(jì)人員可以專注于界面(View)的設(shè)計(jì)尤辱。

　　4. 可測(cè)試性砂豌。可以針對(duì)ViewModel來(lái)對(duì)界面(View)進(jìn)行測(cè)試

II: 組件化

III 指令系統(tǒng)

IIII: vue2.0開(kāi)始支持虛擬dom

vue1.0是操作的是真的dom元素而不是虛擬的

虛擬dom:可以提升頁(yè)面的刷新速度

虛擬DOM有利也有弊光督。

A：大小 - 其中之一就是更多的功能意味著代碼包中更多行的代碼阳距。幸運(yùn)的是，Vue.js 2.0 依舊比 較薪峤琛（當(dāng)前版本 21.4kb）娄涩，并

且也正在刪除很多東西。

B: 內(nèi)存 -同樣映跟，虛擬DOM需要將現(xiàn)有的DOM拷貝后保存在內(nèi)存中，這是一個(gè)在DOM更新速度和內(nèi)存使用中的權(quán)衡扬虚。

C: 并不適用所有情況 -如果虛擬DOM可以一次性進(jìn)行批量的修改是非常好的努隙。但是如果是單獨(dú)的、稀少的更新呢辜昵？這樣的任何

DOM更新都將會(huì)使虛擬DOM帶來(lái)無(wú)意義的預(yù)計(jì)算

11.Vue.js特點(diǎn)

簡(jiǎn)潔：頁(yè)面由HTML模板+Json數(shù)據(jù)+Vue實(shí)例組成

數(shù)據(jù)驅(qū)動(dòng)：自動(dòng)計(jì)算屬性和追蹤依賴的模板表達(dá)式

組件化：用可復(fù)用荸镊、解耦的組件來(lái)構(gòu)造頁(yè)面

輕量：代碼量小，不依賴其他庫(kù)

快速：精確有效批量DOM更新

模板友好：可通過(guò)npm堪置，bower等多種方式安裝躬存，很容易融入

12.Vue.js 和 AngularJS 之間的區(qū)別是什么?

下面是一些選擇 Vue 而不是 Angular 的可能原因；

Vue.js 是一個(gè)更加靈活開(kāi)放的解決方案舀锨。它允許你以希望的方式組織你的應(yīng)用程序岭洲，而不是任何時(shí)候都必須遵循 Angular 制定的規(guī)則。它僅僅是一個(gè)視圖層坎匿，所以你可以將它嵌入一個(gè)現(xiàn)有頁(yè)面而不一定要做成一個(gè)龐大的單頁(yè)應(yīng)用盾剩。在結(jié)合其他庫(kù)方面它給了你更大的的空間，但相應(yīng)替蔬，你也需要做更多的架構(gòu)決策告私。例如，Vue.js 核心默認(rèn)不包含路由和 ajax 功能承桥，并且通常假定你在用應(yīng)用中使用了一個(gè)外部的模塊構(gòu)建系統(tǒng)驻粟。這可能是最重要的區(qū)別

在 API 和內(nèi)部設(shè)計(jì)方面，Vue.js 比 Angular 簡(jiǎn)單得多, 因此你可以快速地掌握它的全部特性并投入開(kāi)發(fā)凶异。

Vue.js 擁有更好的性能蜀撑，因?yàn)樗皇褂门K檢查。當(dāng) watcher 越來(lái)越多時(shí), Angular 會(huì)變得越來(lái)越慢唠帝，因?yàn)樽饔糜騼?nèi)的每一次數(shù)據(jù)變更屯掖，所有的 watcher 都需要被重新求值。Vue 則根本沒(méi)有這個(gè)問(wèn)題襟衰，因?yàn)樗捎玫氖腔谝蕾囎粉櫟挠^察系統(tǒng)贴铜，所以所有的數(shù)據(jù)變更觸發(fā)都是獨(dú)立的，除非它們之間有明確的依賴關(guān)系。

Vue.js 中指令和組件的概念區(qū)分得更為清晰绍坝。指令只負(fù)責(zé)封裝 DOM 操作徘意，而組件代表一個(gè)自給自足的獨(dú)立單元 —— 它擁有自己的視圖和數(shù)據(jù)邏輯。在 Angular 中它們兩者間有不少概念上的混淆轩褐。

13.Vue.js 和 React.js 有什么區(qū)別?

React.js 和 Vue.js 確實(shí)有一些相似——它們都提供數(shù)據(jù)驅(qū)動(dòng)椎咧、可組合搭建的視圖組件。然而把介，它們的內(nèi)部實(shí)現(xiàn)是完全不同的勤讽。React 是基于 Virtual DOM——一種在內(nèi)存中描述 DOM 樹(shù)狀態(tài)的數(shù)據(jù)結(jié)構(gòu)。React 中的數(shù)據(jù)通常被看作是不可變的拗踢，而 DOM 操作則是通過(guò) Virtual DOM 的 diff 來(lái)計(jì)算的脚牍。與之相比，Vue.js 中的數(shù)據(jù)默認(rèn)是可變的巢墅，而數(shù)據(jù)的變更會(huì)直接出發(fā)對(duì)應(yīng)的 DOM 更新诸狭。相比于 Virtual DOM，Vue.js 使用實(shí)際的 DOM 作為模板君纫，并且保持對(duì)真實(shí)節(jié)點(diǎn)的引用來(lái)進(jìn)行數(shù)據(jù)綁定驯遇。

Virtual DOM 提供了一個(gè)函數(shù)式的描述視圖的方法，這很 cool蓄髓。因?yàn)樗皇褂脭?shù)據(jù)觀察機(jī)制叉庐，每次更新都會(huì)重新渲染整個(gè)應(yīng)用，因此從定義上保證了視圖通與數(shù)據(jù)的同步会喝。它也開(kāi)辟了 JavaScript 同構(gòu)應(yīng)用的可能性眨唬。

實(shí)話實(shí)說(shuō)，我自己對(duì) React 的設(shè)計(jì)理念也是十分欣賞的好乐。但 React 有一個(gè)問(wèn)題就是組件的邏輯和視圖結(jié)合得非常緊密匾竿。對(duì)于部分開(kāi)發(fā)者來(lái)說(shuō)，他們可能覺(jué)得這是個(gè)優(yōu)點(diǎn)蔚万，但對(duì)那些像我一樣兼顧設(shè)計(jì)和開(kāi)發(fā)的人來(lái)說(shuō)岭妖，還是更偏好模板，因?yàn)槟０迥茏屛覀兏玫卦谝曈X(jué)上思考設(shè)計(jì)和 CSS反璃。JSX 和 JavaScript 邏輯的混合干擾了我將代碼映射到設(shè)計(jì)的思維過(guò)程昵慌。相反，Vue.js 通過(guò)在模板中加入一個(gè)輕量級(jí)的 DSL (指令系統(tǒng))淮蜈，換來(lái)一個(gè)依舊直觀的模板斋攀，且能夠?qū)⑦壿嫹庋b進(jìn)指令和過(guò)濾器中。

React 的另一個(gè)問(wèn)題是：由于 DOM 更新完全交由 Virtual DOM 管理梧田，當(dāng)你真的想要自己控制 DOM 是就有點(diǎn)棘手了（雖然理論上你可以淳蔼，但這樣做時(shí)你本質(zhì)上在對(duì)抗 React 的設(shè)計(jì)思想）侧蘸。對(duì)于需要復(fù)雜時(shí)間控制的動(dòng)畫(huà)來(lái)說(shuō)這就變成了一項(xiàng)很討人厭的限制。在這方面鹉梨，Vue.js 允許更多的靈活性讳癌，并且有不少用 Vue.js 構(gòu)建的富交互實(shí)例