介教1起概數(shù)據(jù)綁定計算屬ClassStyle條件渲列表渲方法與事件處表單控件過組深入響應(yīng)式原自定義指自定義過混插構(gòu)建大型對比其它示MarkdownGitHubFirebaseSVG介教1起概數(shù)據(jù)綁定計算屬ClassStyle條件渲列表渲方法與事件處表單控件過組深入響應(yīng)式原自定義指自定義過混插構(gòu)建大型對比其它示MarkdownGitHubFirebaseSVGElasticHeader自定義指令2來源介3來源介3教 教4教 教4起 數(shù)據(jù)綁定的快速導(dǎo)覽開始。起 數(shù)據(jù)綁定的快速導(dǎo)覽開始。如果你對高級概述更感興趣，可查看這篇Vue.jsJSFiddleHelloWorld例子。在瀏覽器新標(biāo)簽頁中Hello<div{{messageVue({el:data:{message:'Hello}<div<p>{{message<inputv-Vue({data:message:'Hello}起5<div<liv-for="todoin{{todo.text<div<liv-for="todoin{{todo.textVue({el:data:{todos:[{text:{text:{text:]}JavaScript'},Vue.js'},}起6<div<p>{{message<div<p>{{messageVue({data:message:'Hellomethods:reverseMessage:function()this.message=}}<div<inputv-model="newTodo"v-<liv-for="todoin<span>{{todo.text<buttonv-起7Vue({data:{newTodo:'',todos:[{text:'AddVue({data:{newTodo:'',todos:[{text:'Addsometodos']methods:addTodo:function()vartext=this.newTodo.trim()if(text){this.todos.push({text:text})this.newTodo=''}removeTodo:function(index){this.todos.splice(index,1)}}希望上例能讓你 的工作原理有一個基礎(chǔ)概念。我知道你現(xiàn)在有許多——繼續(xù)閱讀，在后面的教程將一一解答起8概 概 的目標(biāo)是通過盡可能簡單的API實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。Vue.js自身不是一個全能框架——它只聚焦于視圖層。因此它非常容易學(xué)習(xí)，非常Vue.js也能完美地驅(qū)動復(fù)雜的單頁應(yīng)用。它框架；如果你對使用Vue.js開發(fā)大型應(yīng)用更感興趣，查看構(gòu)建大型應(yīng)用。響應(yīng)的數(shù)據(jù)Vue.js的核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，它讓數(shù)據(jù)與DOM保持同步非常簡單。jQueryDOM時，我們的代碼常常是命令式的、重復(fù)的與易錯的。DOM綁定”到底層數(shù)據(jù)。一旦創(chuàng)建了綁定，DOM將與數(shù)據(jù)保持同步。每當(dāng)修改了數(shù)據(jù)，DOM便相應(yīng)地更新。這樣我們應(yīng)用中的邏輯就幾乎都是直接修改數(shù)據(jù)了，不必與DOM更新攪在一起。這讓我們的代碼更容易撰寫、理解與可能是最簡單的例概9這是我們的View<divid="example-Hello{{name//這是我們的Modelvar這是我們的View<divid="example-Hello{{name//這是我們的ModelvarexampleDataname:}創(chuàng)建一個Vue實例或//它連接View與ModelvarexampleVMnewVue({el:'#example-1',data:DOM會自動響應(yīng)數(shù)據(jù)的變化。我們?nèi)绾沃溃看蜷_你的瀏覽器的控制臺，修改exampleD，你將看到上例相應(yīng)地更新。態(tài)的聲明式的映射，數(shù)據(jù)不過是普通JavaScript對象。我們的視圖完全由數(shù)據(jù)驅(qū)讓我們來看第二個例<divid="example-<pv-varexampleVM2=newVue({el:'#example-2',data:{greeting:true}概這里我們遇到新東西。你看到的v-if特性被稱為指令。指令帶有前綴v-，以添加響應(yīng)式的特殊行為。繼續(xù)在控制臺設(shè)置exampleVM2.greeting為false“HelloDOM這里我們遇到新東西。你看到的v-if特性被稱為指令。指令帶有前綴v-，以添加響應(yīng)式的特殊行為。繼續(xù)在控制臺設(shè)置exampleVM2.greeting為false“HelloDOMDOM數(shù)據(jù)。而且，Vue.jsVue插入/刪除元素也有一些其它指令，每個都有特殊的功能。v-for素，v-bind指令用于綁定HTML特性。我們將在后面詳細(xì)討論全部的數(shù)據(jù)綁定組件概<div<divVue.js的組件語法參考了該規(guī)范。例如VueSlotAPI與特性。但是，有幾個關(guān)鍵的不1Web組件規(guī)范仍然遠(yuǎn)未完成，并且沒有瀏覽器實現(xiàn)。相比之下，Vue.js組件不需要任何補(bǔ)丁，并且在所有支持的瀏覽器（IE9及更高版本）之下表現(xiàn)一致。必要時，Vue.js組件也可以放在原生自定義元素之內(nèi)。具與多種支持庫，它們和Vue.js一起構(gòu)成了一個更加“框架”性的系統(tǒng)。概Vue實 構(gòu)造每個Vue.js應(yīng)用的起步都是通過構(gòu)造函Vue實 構(gòu)造每個Vue.js應(yīng)用的起步都是通過構(gòu)造函VueVuevarvm=new一個Vue實例其實正是一個MVVM模式中所描述的ViewModel-因此在文檔中經(jīng) vm這個變量名。法、生命周期鉤子等選項。全部的選項可以在API文檔中查看?？梢詳U(kuò)VuevarMyComponent=所有的`MyComponent`varmyComponentInstance=new盡管可以命令式地創(chuàng)建擴(kuò)展實例，不過在多數(shù)情況下將組件構(gòu)造器注冊為一個自定義元素，然后聲明式地用在模板中。我們將在后面詳細(xì)說明組件系統(tǒng)?，F(xiàn)在你只需知道所有的s組件其實都是被擴(kuò)展的e實例。屬性與方datavardata={a:1}varvm=newVue({data:vm.a===data.a//vardata={a:1}varvm=newVue({data:vm.a===data.a//->vm.a=data.a//->//...反之亦然data.a=3vm.a>3上，它不會觸發(fā)視圖更新。我們將在后面詳細(xì)討論響應(yīng)系統(tǒng)。除了這些數(shù)據(jù)屬性實例暴露了一些有用的實例屬性與方法。這些屬性與方 $，以便與代理的數(shù)據(jù)屬性區(qū)分。例如vardata={a:1}varvm=newVue({el:'#example',data:datavm.$data===data//->vm.$el===document.getElementById('example')//->$watchvm.$watch('a',function(newVal,oldVal)//這個回調(diào)將在`vm.a`參考API文檔查看全部的實例屬性與方實例Vue實例在創(chuàng)建時有一系列初始化步驟——例如，它需要建立數(shù)據(jù)觀察，編譯模邏輯提供運行機(jī)會。createdvarvm=newVue({data:{a:created:varvm=newVue({data:{a:created:function()//`this`指向vm實例console.log('aisthis.a)}//->"ais:也有一些其它的鉤子，在實例生命周期的不同階段調(diào)用，如compiledready、destroyed。鉤子的thisVue實例。一些用戶可能生命下圖說明了實例的生命周期。你不需要立馬弄明白所有的東西，不過以后它會有幫 Vue.jsDOMVue.js模板都是可解析的有效HTML，且通過一些特殊的特性做了增強(qiáng)。Vue模板因而從根本上不同于基于字插 Vue.jsDOMVue.js模板都是可解析的有效HTML，且通過一些特殊的特性做了增強(qiáng)。Vue模板因而從根本上不同于基于字插數(shù)據(jù)綁定最基礎(chǔ)的形式是文本插值，使 語法（雙大括號<span>Message:{{msg msg你也可以只處理單次插值，今后的數(shù)據(jù)變化就不會再引起插值更新<span>Thiswillneverchange:{{*msgMustache標(biāo)簽將數(shù)據(jù)解析為純文本而不是HTMLHTML字符串，需要用三Mustache標(biāo)簽：<div>{{{raw_html用partials。在網(wǎng)站上動態(tài)渲染任意HTML是非常危險的，因為容易導(dǎo)致 XSS攻擊。記住HTMLMustache標(biāo)簽也可以用在HTML(Attributes)<divid="item-{{id數(shù)據(jù)綁定語注意在Vue.js指令和特殊特性內(nèi)不能用插值。不必?fù)?dān)心，如果Mustache注意在Vue.js指令和特殊特性內(nèi)不能用插值。不必?fù)?dān)心，如果Mustache標(biāo)簽用錯了地方Vue.js會給出警告。綁定表達(dá)個簡單的JavaScript表達(dá)式和可選的一個或多個過濾器構(gòu)成。JavaScript支持全功能的JavaScript表達(dá)式：number+1ok?'YES':'NO'這些表達(dá)式將在所屬 實例的作用域內(nèi)計算。一個限制是每個綁定只能包個表達(dá)式，因此下面的語句是無效<!--這是一個語句，不是一個表達(dá)式：{{vara=1<!--流程控制也不可以，可改用三元表達(dá)式{{if(ok){returnmessage}Vue.js允許在表達(dá)式后添加可選的“過濾器(Filter)”，以“管道符”{{message|capitalize message的值“管輸（pipe）”到內(nèi)置capitalize過濾器可以串?dāng)?shù)據(jù)綁定語{{message|filterA|filterB過濾器也可以接受參{{message|filterA'arg1'arg2過濾器函數(shù)始終以表達(dá)式的值作為第一個{{message|filterA|filterB過濾器也可以接受參{{message|filterA'arg1'arg2過濾器函數(shù)始終以表達(dá)式的值作為第一個參數(shù)。帶引號的參數(shù)視為字符串，而不引號的參數(shù)按表達(dá)式計算。這里，字符串 '將傳給過濾器作為第二個參數(shù)，表達(dá)式 2的值在計算出來之后作為第三個參數(shù)。指指令(Directives)是特殊的帶有前綴v-的特性。指令的值限定為綁定表達(dá)式，因JavaScript表達(dá)式及過濾器規(guī)則在這里也適用。指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時把某些特殊的行為應(yīng)用到DOM上。我們來回頭看下“概述”里的這v-if指令將根據(jù)表達(dá) greeting值的真假刪除/插 <p>元素有些指令可以在其名稱后面帶一個“參數(shù)(Argument)，中間放一個冒號隔開。如v-bind指令用于響應(yīng)地更新HTML這href是參數(shù)，它告 v-bind指令將元素 href特性跟表達(dá) href="{{url}}"獲得同樣的結(jié)果： v-bind綁定。另一個例子v-on指令，它用于監(jiān)聽DOM<av-Heretheargumentistheeventnametolistento.Wewilltalkabouteventhandlinginmoredetailstoo.這里參數(shù)是被監(jiān)聽的事件的名字。我們也會詳細(xì)說明數(shù)據(jù)綁定語修飾符(Modifiers)是以半角句號.開始的特殊后綴，用于表示指令應(yīng)當(dāng)以特殊 .literal修飾符告訴指令將它的值解析為一個字面字符串而不修飾符(Modifiers)是以半角句號.開始的特殊后綴，用于表示指令應(yīng)當(dāng)以特殊 .literal修飾符告訴指令將它的值解析為一個字面字符串而不<av- href="/a/b/c"而不必使用一個縮v-前綴是一種標(biāo)識模板中特定的Vue特性的視覺暗示。當(dāng)你需要在一些現(xiàn)有的HTML代碼中添加動態(tài)行為時，這些前綴可以起到很好的區(qū)分效果。但你在使用一Vue.js會管理所有的模板，此時 v-前綴也沒那么重要了。因此Vue.js為兩個最常用的指v-bind 完整語法<av-縮寫<a完整語法<buttonv-縮寫<buttonv-on完整語法<av-縮寫<a數(shù)據(jù)綁定語它們看起來跟“合法”HTML它們看起來跟“合法”HTMLVue.js支持的瀏覽器中都數(shù)據(jù)綁定語 s用計算屬性。a={{a}},b={}varvm s用計算屬性。a={{a}},b={}varvm=newVue({el:'#example',data:{a:computed://一個計算屬性的getterb:function(){`this`指向vm實例returnthis.a+1}}這里我們聲明了一個計算 vm.b的getterconsole.log(vm.b)//->2vm.a=2console.log(vm.b)//->vm.bvm.a計算屬你可以像綁定普通屬性一樣在模板中綁定計算屬性。Vue知道vm.bvm.a，因此當(dāng)vm.a發(fā)生改變時，依賴于 vm.b的綁定也會更新。而且最妙你可以像綁定普通屬性一樣在模板中綁定計算屬性。Vue知道vm.bvm.a，因此當(dāng)vm.a發(fā)生改變時，依賴于 vm.b的綁定也會更新。而且最妙vsVue.js提供了一個方法$watch，它用于觀察Vue實例上的數(shù)據(jù)變動。當(dāng)一些數(shù) $watch很誘人——特別是如果你來自uJ<divvarvm=newVue({data:{firstName:'Foo',lastName:'Bar',fullName:'Foo}vm.$watch('firstName',function(val){this.fullName=val+''+this.lastNamevm.$watch('lastName',function(val){this.fullName=this.firstName+''+val上面代碼是命令式的重復(fù)的。跟計算屬性對varvm=newVue({data:{firstName:'Foo',lastName:'Bar'computed:{fullName:functionreturn}}{+''+更好，不是嗎計算屬計算屬性默認(rèn)只 getter，不過計算屬性默認(rèn)只 getter，不過在需要時你也可以提供一//...fullName://get:function()returnthis.firstName+''+//set:function(newValue)varnames=newValue.split('')this.firstName=names[0]this.lastName=names[names.length-1]}}}//現(xiàn)在在調(diào)vm.fullName'JohnDoe'時，setter用，vm.firstName vm.lastName也會有相應(yīng)更新關(guān)于計算屬性背后的原理和技術(shù)細(xì)節(jié)詳見響應(yīng)系統(tǒng)介紹中的具體章節(jié)計算屬Class與StyleClass與Style v-bind處理它們：我們只需要計算出表達(dá)式最終的字符串。不過，字符串拼接麻煩又易錯。因此，在v-bind用于 class和 style時， HTML盡管可以用Mustache標(biāo)簽綁定class，比如class="{{className}}"，但是 v-bind:class混用。兩者只能選其一！我們可以傳v-bind:classclassv-bind:class指令可以與普通 class特性共存<divclass="static"v-bind:class="{'class-a':isA,'class-data:{isA:true,isB:}渲染為<divclass="staticclass- isA isB變化時，class列表將相應(yīng)地更新。例如，如true，class列表將變 "staticclass-aclass-b"你也可以直接綁定數(shù)據(jù)里的一個對isB<divv-ClassStyledata:{classObject:{'class-a':true,'class-b':}}我們也可以在這里綁定一個返回對象的計算屬性。這是一個常用且強(qiáng)data:{classObject:{'class-a':true,'class-b':}}我們也可以在這里綁定一個返回對象的計算屬性。這是一個常用且強(qiáng)大的模式我們可以把一個數(shù)組v-bind:classclass<divv-bind:class="[classA,data:classA:'class-a',classB:'class-b'}渲染為<divclass="class-aclass-如果你也想根據(jù)條件切換列表中class，可以用三元表達(dá)式<divv-bind:class="[classA,isB?classB:。此例始終添classA，但是只有 isB true時添綁定v-bind:style的對象語法十分直觀——CSS，其實它是一個（kebab-<divv-bind:style="{color:activeColor,fontSize:fontSizeClassStyledata:{activeColor:'red',fontSize:30}直接綁定到一個樣式對象通常更好，data:{activeColor:'red',fontSize:30}直接綁定到一個樣式對象通常更好，讓模板更清<divv-data:{styleObject:{color:'red',fontSize:'13px'}}同樣的，對象語法常常結(jié)合返回對象的計算屬性使v-bind:style<divv-bind:style="[styleObjectA, v-bind:style使用需要廠商前綴的CSS屬性時，如ClassStyle v-在字符串模板中，Handlebars，我們得像這樣寫一個條件模板<!--{{#if v-在字符串模板中，Handlebars，我們得像這樣寫一個條件模板<!--{{#if在Vue.js，我們使v-if<h1v-也可以v-else“else<h1v-<h1v-templatev-因 v-是一個指令，需要將它添加到一個元素上。但是如果我們想切換元素當(dāng)做包裝元素，并在上面 v-if，最終的渲染結(jié)果不會包含它。<templatev-<p>Paragraph<p>Paragraphv-另一個根據(jù)條件展示元素的選指令。用法大體上一樣<h1v-條件渲不同的是v-showDOM中。v-show換元素的CSS屬 display注 v-show不支 v-v-else指令 v-if v-show不同的是v-showDOM中。v-show換元素的CSS屬 display注 v-show不支 v-v-else指令 v-if v-show添加一個“else塊v-if="Math.random()><divv-else>Notsorryv-else元素必須立即跟在v-ifv-show元素的后面——v-ifvs.v-在切換v-if塊時，Vue.js有一個局部編譯/卸載過程，因為v-if之中的模板也可能包括數(shù)據(jù)綁定或子組件。v-if是真實的條件渲染，因為它會確保條件塊v-if也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一v-show簡單得多——元素始終被編譯并保留，只是簡單地基于一般來說v-if有更高的切換消耗 v-show有更高的初始渲染消耗。因此 v-show較好，如果在運行時條件不大可能改變 v-if較條件渲 v-可以使items是數(shù)據(jù)數(shù)組，item式 item v-可以使items是數(shù)據(jù)數(shù)組，item式 iteminitems<ulid="example-<liv-for="itemin{{item.messagevarexample1=newVue({el:'#example-1',data:{items:[{message:'Foo'{message:'Bar']} ，正如你猜到的，它是當(dāng)前數(shù)組元素的索<ulid="example-<liv-for="itemin{{parentMessage}}-{{$index}}-{{item.message列表渲varexample2=newVue({el:'#example-2',data:items:[{message:'Foo'{message:varexample2=newVue({el:'#example-2',data:items:[{message:'Foo'{message:'Bar']}用于一個對象，則可以為對象<divv-for="(index,item)in{{index}}{{item.messagetemplatev-類似于templatev-if，也可以 用<template><templatev-for="itemin<li>{{item.msg<li數(shù)組 包裝了被觀察數(shù)組的變異方法，故它們能觸發(fā)視圖更新。被包裝的方法列表渲 items數(shù)組。 items數(shù)組。。如：example1.items.push(message'Baz'filter(), concat()和 slice()，不會修改原始數(shù)組而是返回一個新數(shù)example1.items=example1.items.filter(function(item){returnitem.message.match(/Foo/)Vue.jsDOM并重新渲染整個列表——幸運的是并非Vue.jsDOM元素，因而用另一個數(shù)組track-有時需要用全新對象（例如通過API調(diào)用創(chuàng)建的對象）替換數(shù)組。因為v-forID的屬性，便可以使用track-by特性給Vue.js一個提示，Vue.js因而能盡可能地復(fù)用已有實例。例如，假定數(shù)據(jù)為{items:{_uid:{_uid:]}}然后可以這樣給出提列表渲<divv-for="iteminitems"track-<!--content--然后在替換數(shù)items時，如果Vue.js遇到一個包 _uid:'88f869d'的對象，它知道<divv-for="iteminitems"track-<!--content--然后在替換數(shù)items時，如果Vue.js遇到一個包 _uid:'88f869d'的對象，它知道它可以復(fù)用這個已有對象的作用域 元素track-by如果沒有唯一的鍵供追蹤，可以使用 "，它制讓 進(jìn)入原位更新模式：片斷不會被移動，而是簡單地以對應(yīng)索引的新值刷新。這種式也能處理數(shù)據(jù)數(shù)組中重復(fù)的值。這讓數(shù)據(jù)替換非常高效，但是也會付出一定的代價。因為這 節(jié)點不再映數(shù)組元素順序的改變，不能同步臨時狀態(tài)（比 私有狀態(tài)。因此，如 v-for塊包 <input>元素或子組件，要小心使因為JavaScript的限制，Vue.js不能檢測到下面數(shù)組變化1.{}vm.items[0]2.修改數(shù)據(jù)的長度， 0=為了解決問題(1)，Vue.js擴(kuò)展了觀察數(shù)組，為它添加了$set()與`example1.items[0`example1.items.$set(0,{childMsg:。$remove()。因此，不必這樣至于問 (2)，只需用一個空數(shù)組替 $set()，Vue.js也為觀察數(shù)組添加了中查找并刪除元素，在內(nèi)部它調(diào) varindex=this.items.indexOf(item)if(index!==-1){}只用這樣列表渲v-個特殊變v-for遍歷對象。除 $index之外，作用域內(nèi)還可以訪問另外$key<ulid="repeat-object"v-個特殊變v-for遍歷對象。除 $index之外，作用域內(nèi)還可以訪問另外$key<ulid="repeat-object"<liv-for="valuein{{$key}}:{{newel:'#repeat-object',data:{object:{FirstName:'John',LastName:'Doe',Age:30}}也可以給對象的鍵提供一個別<divv-{{key}}{{val) Object.keys()的結(jié)果遍歷，但是不能保證它的結(jié)果在不同的JavaScript引擎下是一致的。v-v-for列表渲<spanv-for="nin10">{{n}}顯<spanv-for="nin10">{{n}}顯示過濾/有時我們想顯示過濾/排序過的數(shù)組，同時不實際修改或重置原始數(shù)據(jù)。有兩個辦1.創(chuàng)建一個計算屬性，返回過濾/排序過的數(shù)組2.使用內(nèi)置的過filterBy orderBy器更方便，詳細(xì)見API。JavaScript。但是通常過列表渲 方法處理v-onDOM<buttonv- 方法處理v-onDOM<buttonv-Vuevarvm=newVue({el:'#example',{`methods`methods:greet:function(event)//方法內(nèi)`this`指向vmalert('H//`event`是原生DOM事件}}也可以在JavaScriptvm.greet()//->'Hello自己測試一下內(nèi)聯(lián)語句處除了直接綁定到一個方法，也可以用內(nèi)語句方法與事件處<divid="example-<buttonv-on:click="say('hi')">Say<buttonv-on:click="say('what')">Saynewel:'#example-2',methods:{say:function(msg)}}<divid="example-<buttonv-on:click="say('hi')">Say<buttonv-on:click="say('what')">Saynewel:'#example-2',methods:{say:function(msg)}}{類似于內(nèi)聯(lián)表達(dá)式，事件處理器限制為一個語<buttonv-on:click="say('hello!',//...methods:{say:function(msg,event)}}事件修飾 event.preventDefault()或event.stopPropagation()。盡管我們在方法內(nèi)可以輕松做到，不過讓方法是純粹的數(shù)據(jù)邏輯而不處理DOM事件細(xì)節(jié)會更好。為了解決這個問題，Vue.jsv-on.prevent 。你是否還記得修飾符是點號打頭的指令后方法與事件處<!--阻止單擊事件冒泡<av-<!--提交事件不再重載頁面<formv-<!--修飾符可以串聯(lián)<av-只有修飾符<formv-按鍵修飾<!--阻止單擊事件冒泡<av-<!--提交事件不再重載頁面<formv-<!--修飾符可以串聯(lián)<av-只有修飾符<formv-按鍵修飾只有在keyCode是13時調(diào)用vm.submit<inputv-記住所有的keyCode比較困難，Vue.js為最常用的按鍵提供別同上<inputv-縮寫語法<input全部的按鍵別另外1.0.8+也支持單字母按鍵別名為什么在HTML中監(jiān)聽事件方法與事件處擔(dān)心，因為所有的Vue.js事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的ViewModel上，它不會導(dǎo)致任何維護(hù)困難。實際上，使用v-on有幾個好處：掃一擔(dān)心，因為所有的Vue.js事件處理方法和表達(dá)式都嚴(yán)格綁定在當(dāng)前視圖的ViewModel上，它不會導(dǎo)致任何維護(hù)困難。實際上，使用v-on有幾個好處：掃一眼HTML模板便能輕松定位在JavaScript代碼里對應(yīng)的方法因為你無須在JavaScript里手動綁定事件，你的ViewModel代碼可以是非純粹的邏輯，DOM完全解耦，更易于測試當(dāng)一個ViewModel被銷毀時，所有的事件處理器都會自動被刪除。你無須擔(dān)心方法與事件處 基礎(chǔ)可以用v-model指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。根據(jù)控件類型它自動選取正確的方法更新元素。盡管有點神奇，v-model不過是語法糖，在用戶輸入<span>Message 基礎(chǔ)可以用v-model指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。根據(jù)控件類型它自動選取正確的方法更新元素。盡管有點神奇，v-model不過是語法糖，在用戶輸入<span>Messageis:{{message<inputtype="text"v-model="message"placeholder="edit單個勾選框，邏輯<inputtype="checkbox"id="checkbox"v-<labelfor="checkbox">{{多個勾選框，綁定到同一個數(shù)表單控件綁<span>Checkednames:{{checkedNames<span>Checkednames:{{checkedNames|jsontype="radio"id="one"value="One"type="radio"id="two"value="Two"<span>Picked:{{picked<selectv-<option<span>Selected:{{selected表單控件綁多選（綁定到一個數(shù)組<selectv-model="selected"<option<span>Selected:{{多選（綁定到一個數(shù)組<selectv-model="selected"<option<span>Selected:{{selected|動態(tài)選項，v-for<selectv-<optionv-for="optioninoptions"v-{{{{selectednewVue({el:'...',data:{selected:'A',options:[{{{]}value:'A'value:'B''Three',value:'C'表單控件綁值綁對于單選按鈕，勾選框及選擇框選項，v-model綁定的值通常是靜態(tài)字符串（對當(dāng)選中時，`picked`為字符串"a<inputtype="radio"v-model="picked"值綁對于單選按鈕，勾選框及選擇框選項，v-model綁定的值通常是靜態(tài)字符串（對當(dāng)選中時，`picked`為字符串"a<inputtype="radio"v-model="picked"`toggle`為true或false<inputtype="checkbox"v-當(dāng)選中時，`selected`為字符串"abc<selectv-<option v-bind允許綁定輸入框的值到非字符串值。vm.toggle===vm.toggle===<inputtype="radio"v-表單控件綁vm.pick===Select<selectv-對象字面量<optionv-number:123typeof//-vm.pick===Select<selectv-對象字面量<optionv-number:123typeof//-//-參數(shù)在默認(rèn)情況下，v-modelinput特 lazy，從而改到 change事件中同步在"change而不是"input事件中更新<inputv-model="msg"如果想自動將用戶的輸入保持為數(shù)字，可以添加一個number<inputv-model="age"debounce如果每次更新都要進(jìn)行高耗操作（例如在輸入提示 請求），它較為有<inputv-model="msg"表單控件綁 debounce參數(shù)不會延遲input事件：它延遲 debounce參數(shù)不會延遲input事件：它延遲“寫入”底層數(shù)據(jù)。因此在使debounce時應(yīng)當(dāng) debounce過濾器DOM表單控件綁過 Vue.jsDOM中插入或移除時自動應(yīng)用過渡效果。Vue.js會在適當(dāng)?shù)臅r機(jī)為你觸發(fā)CSS過渡或動畫，你也可以提供相應(yīng)的JavaScript鉤子函數(shù)在過渡過程中執(zhí)行自定義的DOM操作。為了應(yīng)用過渡效果，需要在目標(biāo)元素上transition<divv-if="show"過 Vue.jsDOM中插入或移除時自動應(yīng)用過渡效果。Vue.js會在適當(dāng)?shù)臅r機(jī)為你觸發(fā)CSS過渡或動畫，你也可以提供相應(yīng)的JavaScript鉤子函數(shù)在過渡過程中執(zhí)行自定義的DOM操作。為了應(yīng)用過渡效果，需要在目標(biāo)元素上transition<divv-if="show"transition="my-transitionv-for（只為插入和刪除觸發(fā)）動態(tài)組件（介紹見組件））當(dāng)插入或刪除帶有過渡的元素時將嘗試以ID "my-transition"查找JavaScript過渡鉤子對象——通過Vue.transition(id,hooks)或 transitions選項注冊。如果找到了，自動嗅探目標(biāo)元素是否有CSS過渡或動畫，并在合適時添加/刪除CSS類（插入/刪除）在下一幀中立即執(zhí)行CSS過CSS添 .expand-enter CSS規(guī)則過/*必需.expand-transitiontransition:all.3sease;height:30px;padding:10px;/*必需.expand-transitiontransition:all.3sease;height:30px;padding:10px;overflow:hidden;}/*.expand-enter/*.expand-leave.expand-enter,.expand-leaveheight:padding:0opacity:}另外，可以提供JavaScript鉤子beforeEnter:function(el){el.textContent='beforeEnter'enter:function(el){el.textContent='enter'afterEnter:function(el){el.textContent='afterEnter'enterCancelled:function(el)//handlebeforeLeave:function(el){el.textContent='beforeLeave'leave:function(el){el.textContent='leave'afterLeave:function(el){el.textContent='afterLeave'leaveCancelled:function(el)//handle}過CSS transition特性的值。比如 transition="fade"，會有三個CSS類名：.fade-transition始終保留在元素上.fade-enter.fade-leave定義離開過渡的結(jié)束狀態(tài)。在離開過渡開始時生效，在它結(jié)束如 transition特性沒有值，類名默認(rèn).v-leaveCSS transition特性的值。比如 transition="fade"，會有三個CSS類名：.fade-transition始終保留在元素上.fade-enter.fade-leave定義離開過渡的結(jié)束狀態(tài)。在離開過渡開始時生效，在它結(jié)束如 transition特性沒有值，類名默認(rèn).v-leave.v-transition .v-enter show屬性改變時，Vue.js將相應(yīng)地插入或刪除<div>元素，按照如下規(guī)則改變過渡的CSS類名：如 show變?yōu)閒alse，Vue.js將beforeLeavev-leave如調(diào)leave transitionend事件）；從DOM中刪除元素并刪除v-leave類名；調(diào)afterLeaveshowtrue，Vue.js調(diào)beforeEnter添v-enter調(diào) enter鉤子CSS布局，讓v-enter確實生效。然后刪除等待過渡結(jié)束調(diào) afterEnter鉤子v-enter另外，如果在它的進(jìn)入過渡還在進(jìn)行中時刪除元素，將enterCancelled子，以清理變動 enter創(chuàng)建的計時器。反過來對于離開過渡亦如是過上面所有的鉤子函數(shù)在調(diào)用時，它們的thisVue實例。如果元素是Vue實例的根節(jié)點，則這個實例是上下文。否則，上下文是過渡指令所屬的實最后，enter和leave可以有第二個可選的回調(diào)參數(shù)，用于顯式控制過渡如何結(jié)束。因此不必等待CSStransitionend事件，Vue.js將等待你手工調(diào)用這個enter:function(el)上面所有的鉤子函數(shù)在調(diào)用時，它們的thisVue實例。如果元素是Vue實例的根節(jié)點，則這個實例是上下文。否則，上下文是過渡指令所屬的實最后，enter和leave可以有第二個可選的回調(diào)參數(shù)，用于顯式控制過渡如何結(jié)束。因此不必等待CSStransitionend事件，Vue.js將等待你手工調(diào)用這個enter:function(el)由CSStransitionend}enter:function(el,done)//過渡只有在調(diào)用`done`}當(dāng)多個元素一起過渡時會批量處理，只強(qiáng)制一次布CSS動CSS動畫用法同CSS過渡，區(qū)別是在動畫中v-enter類名在節(jié)點插入DOM后 animationend事件觸發(fā)時刪除。示例：(省略了兼容性前綴過.bounce-enter{animation:bounce-in.5s;}.bounce-leaveanimation:bounce-out}@keyframesbounce-in{0%{50%.bounce-enter{animation:bounce-in.5s;}.bounce-leaveanimation:bounce-out}@keyframesbounce-in{0%{50%{}}@keyframesbounce-out{0%{50%{}}JavaScriptCSSJavaScript過渡時，enter和leave鉤子需要調(diào)用done回調(diào)，否則它們將被同步調(diào)用，cssfalse是個好主意，Vue.jsCSS測。這樣也會阻止無意間讓CSS規(guī)則干擾過渡過{css:enter:function(el,done)//元素已被插入//在動畫結(jié)束后調(diào)用.css('opacity',.animate({opacity:1},1000,leave:{css:enter:function(el,done)//元素已被插入//在動畫結(jié)束后調(diào)用.css('opacity',.animate({opacity:1},1000,leave:與enter}function{(el,done)opacity:0function{特性中<p漸近transitionv-forstagger enter-stagger leave-stagger<divv-transition，以更enter-stagger staggerVue.transition('stagger',{stagger:function(index){//每個過渡項目增加50ms//但是最大延時限制為returnMath.min(300,index*}過<div<inputv-<liv-for="iteminlistfilterBy<div<inputv-<liv-for="iteminlistfilterBydata:{query:{{{{{]['BruceLee'},'JackieChan'},'JetLi'},}}過ulpadding-left:font-family:Helvetica,}.staggered-transition{transition:allulpadding-left:font-family:Helvetica,}.staggered-transition{transition:all.5sease;overflow:hidden;margin:0;height:}opacity:0;{}過組 使用之前說過，我們可Vue.extend()varMyComponent選項組 使用之前說過，我們可Vue.extend()varMyComponent選項要把這個構(gòu)造器用作組件，需：Vponent(tagconstructor)//全局注冊組件，tag為my-component的形式使用。要確保在初始化根實例之前注冊了組件：<divvarMyComponent=template:'<div>Acustomnewel:組渲染為<div<div>Acustom注意組件的模板替換了自定義元素，自定義元素的渲染為<div<div>Acustom注意組件的模板替換了自定義元素，自定義元素的作用只是作為一個掛載點。這以用實例選項 e改變。不需要全局注冊每個組件。可以讓組件只能用在其它組件內(nèi)，用實例componentsvarChild=Vue.extend({/*...*/varParent=Vue.extend({template:'...',components:{<my-component'my-component':}這種封裝也適用于其它資源，如指令、過濾器和過為了讓事件更簡單，可以直接傳入選項對象而不是構(gòu)造 component選項。Vue.js在背后自動調(diào) Vue.extend()組template:'<div>AcustomvarParent=components:{'my-component':{template:'<div>Acustom}}template:'<div>AcustomvarParent=components:{'my-component':{template:'<div>Acustom}}傳入Vue構(gòu)造器的多數(shù)選項也可以用在Vue.extend()dataandel。試想如果我們簡單地把一個對象作為Vue.extend()：中，不過有兩個特datavardata={a:1varMyComponent=Vue.extend({data:data MyComponent所有的實例將共享同一data data選項，函數(shù)返回一個新對varMyComponent=Vue.extend({data:function(){return{a:1}同理，elVue.extend()is ，限制什么元素可以放在它里面。自定義元素 is特性，指組<tris="my-Props父組件的數(shù)據(jù)?？梢允褂胮os把數(shù)據(jù)傳給子組件。 是<tris="my-Props父組件的數(shù)據(jù)?？梢允褂胮os把數(shù)據(jù)傳給子組件。 是組件數(shù)據(jù)的一個字段，期望從父組件傳下來。子組件需要顯式props//聲明propsprops['msg'],prop可以用`this.msg`template:'<span>{{msg然后向它傳入一個普通字符串<childcamelCasevs.kebab-HTML特性不區(qū)分大小寫。名字形式kebab-case（短橫線隔開的prop用作特性時，需要轉(zhuǎn)//camelCaseinJavaScriptprops:['myMessage'],template:'<span>{{myMessage組<!--kebab-caseinHTML--<childmy-<!--kebab-caseinHTML--<childmy- v-bind綁定動態(tài)Props到使 v-bind的縮寫語法通常更簡單<child:my-vs初學(xué)者常犯的一個錯誤是使用字面量語法傳遞數(shù)<!--傳遞了一個字符串"1<compsome-因為它是一個字面prop，它的值以字符串"1"而不是以實際的數(shù)字傳下去。如JavaScript數(shù)字，需要使用動態(tài)語法，從而讓它的值被當(dāng)作JavaScript表達(dá)式計算：<comp:some-Prop組prop默認(rèn)是單向綁定：當(dāng)父組件的屬性變化時，將傳導(dǎo)給子組件，但是反過來不prop默認(rèn)是單向綁定：當(dāng)父組件的屬性變化時，將傳導(dǎo)給子組件，但是反過來不比較語法.sync .once綁定修飾符顯式地強(qiáng)制雙向或單次<child雙向綁定<child單次綁定<child msg屬性同步回父組件的parentMsgProp要求構(gòu)成了組件的API，確保其他人正確地使用組件。此時props的值是一個對組{props://基礎(chǔ)類型檢測（`null`意思是任何類型都可以propA:{props://基礎(chǔ)類型檢測（`null`意思是任何類型都可以propA:propB:type:String,required:truepropC:type:Number,default:100propD:type:default:function(){return{msg:'hello'}}指定這個proppropE:twoWay:propF:validator:function(value){returnvalue>10}轉(zhuǎn)換函數(shù)（1.0.12新增propG:coerce:function(val)returnval}}}type組type也可以是一個自定義構(gòu)造器，使 instanceof檢測當(dāng)prop驗證失敗了，Vue將拒絕在type也可以是一個自定義構(gòu)造器，使 instanceof檢測當(dāng)prop驗證失敗了，Vue將拒絕在子組件上設(shè)置此值，如果使用的是開發(fā)版本會父子子組件可以this.$parent 盡管可以訪問父鏈上任意的實例，不過子組件應(yīng)當(dāng)避免直接依賴父組件的數(shù)據(jù)，應(yīng)當(dāng)顯式地使用s傳遞數(shù)據(jù)。另外，在子組件中修改父組件的狀態(tài)是非常糟糕的做法，因為：這讓父組件與子組件緊密地耦只看父組件，很難理解父組件的狀態(tài)。因為它可能被任意子組件修改！理想情況下，只有組件自己能修改它的狀態(tài)。Vue 實例實現(xiàn)了一個自定義事件接口，用于在組件樹中通信。這個事件系統(tǒng)獨立于原生OM每個使使實例都是一個事件觸發(fā)$on()$emit()$dispatch()$broadcast( true。簡單例子組子組件模板<inputv-<buttonv-子組件模板<inputv-<buttonv-父組件模板<divid="events-<p>Messages:{{messages|data:function(){return{msg:'hello'methods:notify:function(){if(this.msg.trim()){this.msg=''}}}varparent=newel:'#events-example',data:{messages://在創(chuàng)建實例時`events`選項簡單地調(diào)用`$on`events:{'child-msg':function(msg)事件回調(diào)內(nèi)的`this`}}組v-on上例非常好，不過看著父組件的代碼，"事件來自哪里不直觀。如可以用n監(jiān)聽自定義事件：<childv-on:child-v-on上例非常好，不過看著父組件的代碼，"事件來自哪里不直觀。如可以用n監(jiān)聽自定義事件：<childv-on:child- 方法將被調(diào)用。所有影響父組件狀態(tài)的代碼放到父組件的handleIt方法中；子盡管有props和events，但是有時仍然需要在JavaScript中直接訪問子組件。為 v-ref為子組件指定一個索引ID。例如：<divvarparent=newVue({el:'#parent'varchild=v-ref v-for一起用時，ref是一個數(shù)組或?qū)ο?，包含相?yīng)的子組件Slot在使用組件時，常常要像這樣組合它組注意兩點<app組件不知道它的掛載點會有什么內(nèi)容，掛載點的內(nèi)容是由<app><app板。這個處理稱為內(nèi)容分發(fā)（“transclusion”Angular）。Vue.js注意兩點<app組件不知道它的掛載點會有什么內(nèi)容，掛載點的內(nèi)容是由<app><app板。這個處理稱為內(nèi)容分發(fā)（“transclusion”Angular）。Vue.js實APIWeb組件規(guī)范草稿，使用特殊的<slot元在深入內(nèi)容分 之前，我們先明確內(nèi)容的編譯作用域。假定模板為{{msgmsg應(yīng)該綁定到父組件的數(shù)據(jù)，還是綁定到子組件的數(shù)據(jù)？答案是父組件。組件內(nèi)編譯一個常見錯誤是試圖在父組件模板內(nèi)將一個指令綁定到子組件屬性/方法無效<childv- someChildProperty是子組件的屬性，上例不能如預(yù)期工作。父組件模板如果要綁定子組件內(nèi)的指令到一個組件的根節(jié)點，應(yīng)當(dāng)在它的模板內(nèi)這么組template:'<divv-data:function(){return{}}類似地，分發(fā)內(nèi)容template:'<divv-data:function(){return{}}類似地，分發(fā)內(nèi)容是在父組件作用域內(nèi)編 的slot，整個內(nèi)容將被插到它所在的地方，替換slot。<slot標(biāo)簽的內(nèi)容視為回退內(nèi)容?；赝藘?nèi)容在子組件的作用域內(nèi)編譯，只有當(dāng)假 my-component組件有下面模板<h1>ThisismyThiswillonlybedisplayedifthereisnotobedistributed.父組件模板<p>Thisissomeoriginal<p>Thisissomemoreoriginal渲染結(jié)果<h1>Thisismyoriginalcontent</p>moreoriginalcontent</p>組<slotslot將匹配有對應(yīng)slot沒有默認(rèn)的slot，不匹配內(nèi)容將被拋棄。組件，<slotslot將匹配有對應(yīng)slot沒有默認(rèn)的slot，不匹配內(nèi)容將被拋棄。組件，它的模板為例如，假定我們有<slot<slot父組件模板<p<p<p>Default渲染結(jié)果為<p<p>Default<p在組合組件時，內(nèi)容分發(fā)是非常有用的機(jī)制動態(tài)多個組件可以使用同一個掛載點，然后動態(tài)地在它們之間切換。使用保<component>元素，動態(tài)地綁定到它 is特性組Vue({data:{currentView:'home'components:home:{/*...*/posts:{Vue({data:{currentView:'home'components:home:{/*...*/posts:{/*...*/archive:{/*...*/}<component組件在vm.currentview變化時改變?nèi)绻亚袚Q出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)或避免重新渲染。為此以添加一個 e指令參數(shù)：<component:is="currentView"keep-<!--非活動組件將被緩存activate在切換組件時，切入組件在切入前可能需要進(jìn)行一些異步操作。為了控制組件切時長，給切入組件添加 e鉤子：activate:function(done){varself=thisloadDataAsync(function(data){self.someData=data} activate鉤子只作用于動態(tài)組件切換或靜態(tài)組件初始化渲染的過程中，不transition-mode組在默認(rèn)情況下，進(jìn)入與離開平滑地過渡。這個特性可以在默認(rèn)情況下，進(jìn)入與離開平滑地過渡。這個特性可以指定另外兩種模in- ：新組件先過渡進(jìn)入，等它的過渡完成之后當(dāng)前組件過渡出<!--先淡出再淡入.fade-transition{transition:opacity.3sease;}.fade-enter,.fade-leave{opacity:0;}雜v-自定義組件可以像普通元素一樣直接v-for<my-componentv-for="iteminitems"></my-但是，不能傳遞數(shù)據(jù)給組件，因為組件的作用域是孤立的。為了傳遞數(shù)據(jù)給組件，應(yīng)當(dāng)使用：v-for="itemin組 item注入組件的原因是這會導(dǎo)致組件跟當(dāng)前 item注入組件的原因是這會導(dǎo)致組件跟當(dāng)前v-for系，但是可復(fù)用組件應(yīng)當(dāng)定義一個清晰的公開接口。prop允許外部環(huán)境插入內(nèi)容到組件的視圖結(jié)構(gòu)使 v-bind v-on的簡寫語法，模板的縮進(jìn)清楚且簡潔<!--content--<imgslot="icon"<pslot="main-s允許將組件定義為一個工廠函數(shù)，動態(tài)地解析組件的定義。s再次渲染。例如：Vponent('async-example',function(resolve,reject){setTimeout(function(){template:'<div>Iam},工廠函數(shù)接收resolve reject(reason)指示加載失敗。這里 setTimeout只是為了演示。怎么獲取組件完全由你決定。推薦配合使用Webpack的代碼分割功能：組這個特殊的require語法告訴這些塊將通過ajax一些資源，如組件和指令，是以HTML特性或這個特殊的require語法告訴這些塊將通過ajax一些資源，如組件和指令，是以HTML特性或HTML自定義元素的形式出現(xiàn)在模使用kebab-case而不是camelCase的形式，這不大方便。Vue.js支持資源的名字使用camelCase或PascalCase的形式，并且在模板中自動將它們轉(zhuǎn)為kebab-case（類似于prop的命名約定）：components:使用camelCasemyComponent:{/*...*/}在模板中使用kebab-case形式ES6對象字面量縮寫//TextBoxfrom{components:<text-box和<dropdown-}}name組varStackOverflow=Vue.extend({name:'stack-'<div>'“maxstacksizeexceeded”，所以要確保遞歸調(diào)用有終止條件。當(dāng)使用Vponent()全局注冊一個組件時，組件ID自動設(shè)置為組件varStackOverflow=Vue.extend({name:'stack-'<div>'“maxstacksizeexceeded”，所以要確保遞歸調(diào)用有終止條件。當(dāng)使用Vponent()全局注冊一個組件時，組件ID自動設(shè)置為組件的name選項。 template選項時，模板的內(nèi)容將替換實例的掛載元素。因而推薦模板的不這么寫模板<div>rootnode<div>rootnode推薦這么寫Ihaveasingleroot<div>node<div>node下面幾種情況會讓實例變成一個片斷實模板只包含其它組件（其它組件可能是一個片段實例）模板只包含一個元素指令， <partial>或vue-router<router-view模板根節(jié)點有一個流程控制指令v-if v-for $el指向一個錨節(jié)組<!--不可以，因為沒有根元素<examplev-show="ok"props可以<example<!--流程控制可以，但是不能有過渡<example<!--不可以，因為沒有根元素<examplev-show="ok"props可以<example<!--流程控制可以，但是不能有過渡<examplev-上的指令和特性能正確地轉(zhuǎn)換，同時性能也稍微好些。 inline-template特性，組件將把它的內(nèi)容當(dāng)作它的模板，而不<p>Thesearecompiledasthecomponent'sown<p>Notparent'stransclusion但 inline-template讓模板的作用域難以理解，并且不能緩存模板編譯果。最佳實踐是使組 大部分的基礎(chǔ)內(nèi)容 大部分的基礎(chǔ)內(nèi)容我們已經(jīng)講到了，現(xiàn)在講點底層內(nèi)容。最顯著的一個功模型只是普通對象，修改它則更新視圖。這讓狀態(tài)管理非常簡單Vue.js響應(yīng)系統(tǒng)的底層細(xì)節(jié)。如何Vue實例作為它的data選項，Vue.js將遍歷它的屬性，用Object.defineProperty將它們轉(zhuǎn)為getter/setter。這是ES5特性，不能打補(bǔ)丁實現(xiàn)，這便是為什么Vue.js不支持IE8及更低版本。getter/settersVue.js追蹤依賴，在屬性被訪問和化不同，使用vm.$log()實例方法可以得到更友好的輸出。模板中每個指令/數(shù)據(jù)綁定都有一個對應(yīng)的watcher對象，在計算過程中它把屬性setterwatcher致它的關(guān)聯(lián)指令更新DOM。變化ES5的限制，Vue.jsVue.js在初始化實例時將屬性轉(zhuǎn)為getter/setter，所以屬性必須在data對象上才能讓Vue.js轉(zhuǎn)深入響應(yīng)式原vardata={varvm=newdata:data`vm.a`a:1`data.a`vm.b=`vm.b`data.bvardata={varvm=newdata:data`vm.a`a:1`data.a`vm.b=`vm.b`data.b=`data.b`不過，有辦法在實例創(chuàng)建之后添加屬性并且讓它是響應(yīng)$set(keyvalue)vm.$set('b',`vm.b`和`data.b`對于普通數(shù)據(jù)對象，可以使用全局value)Vue.set(data,'c',`vm.c`和`data.c`有時你想向已有對象上添加一些屬性，例如Object.assign()添加屬性。但是，添加到對象上的新屬性不會觸發(fā)更新。這時創(chuàng)建一個新的對象，包含原對象的屬性和新的屬//不使用`Object.assign(this.someObject,{a:1,b:2})`this.someObjectObject.assign({}this.someObject,{a1b2也有一些數(shù)組相關(guān)的問題，之前已經(jīng)在列表渲染中講初始化數(shù)不這么做data對象上聲明所深入響應(yīng)式原varvm=newtemplate://然后添加`msg`這么做varvarvm=newtemplate://然后添加`msg`這么做varvm=newVue({data:{以一個空值聲明`msg`msg:''template://然后設(shè)置`msg`vm.msg'Hello!'這么做有兩個原因?qū)ο缶拖窠M件狀態(tài)的模式（schema）。在它上面聲明所有的屬性讓件代碼更易于理解watcher重新計算，因為它之前不存在，watcher追蹤它。這么做性能通常是可以接受的（Angular的異步Vue.js默認(rèn)異步更新DOM。每當(dāng)觀察到數(shù)據(jù)變化時，Vue就開始一個隊列，將同一次到隊列中。等到下一次事件循環(huán)，Vue將清空隊列，只進(jìn)行必要的DOM更 MutationObserver，如果不支持則使用setTimeout(fn,0)。例如，設(shè)置了vm.someData'newvalue，DOM不會立即更新，而是在下一次事件循環(huán)清空隊列時更新。我們基本不用關(guān)心這個過程，但是如果想在DOM狀免直接修改DOM，但是有時確實要這么做。為了在數(shù)據(jù)變化之后等待Vue.js完成更新DOM，可以在數(shù)據(jù)變化之后立即使用Vue.nextTick(callback)。回調(diào)在DOM更新完成后調(diào)用。例如：<div深入響應(yīng)式原varvm=newVue({el:'#example',data:{msg:}vm.msg'newmessagevarvm=newVue({el:'#example',data:{msg:}vm.msg'newmessagevm.$el.textContent==='newmessage'//Vue.nextTick(function(){vm.$el.textContent==='newmessage'//truevm.$nextTick()這個實例方法比較方便，因為它不需要全局 this自動綁定到當(dāng)前Vue實例：{data:function(){return{msg:'not}methods:updateMessage:function(){this.msg='updated'console.log(this.$el.textContent)//=>'notupdated'this.$nextTick(function(){console.log(this.$el.textContent)//=>'updated'}}計算屬性的Vue.jsgetter。計算屬性持續(xù)追蹤它的響應(yīng)依賴。直接返回緩存的結(jié)果，而不是調(diào)用getter。大量的計算。然后，可能有其它的計算屬性依賴A的getter許多次，超過必要次數(shù)。由于計算屬性被緩存了，在訪問它 不總是被調(diào)用?？紤]下深入響應(yīng)式原varvm=newVue({data:{msg:computed:example:function(){returnDate.now()+this.msg}}varvm=newVue({data:{msg:computed:example:function(){returnDate.now()+this.msg}}計算屬example只有一個依賴：vm.msg。Date.now() vm.msg變了。vm.examplegetter不改變原有的行為，每次訪問vm.examplegetter。這computed:{example:{cache:false,get:function()returnDate.now()+}}}現(xiàn)在每次訪vm.exampleJavaScript訪問是這樣的；數(shù)據(jù)綁定仍是依賴驅(qū)動的。如果在模塊中這樣綁定計算深入響應(yīng)式原 基除了內(nèi)置指令DOM也允許注冊自定 基除了內(nèi)置指令DOM也允許注冊自定義指令。自定義指令提供一種機(jī)制將數(shù) Vue.directive(id,definition)方法注冊一個全局自定義指令，它接收兩個參數(shù)指令I(lǐng)D與定義對象。也可以用組件的directives選項注冊一個局定義對象可以提供幾個鉤子函數(shù)（都是可選的bind：只調(diào)用一次，在指令第一次綁定到元素上時調(diào)update：在 bind之后立即以初始值為參數(shù)第一次調(diào)用，之后每當(dāng)綁定值變unbind：只調(diào)用一次，在指令從元素上解綁時調(diào)用示Vue.directive('my-directive',{bind:function(){update:function(newValue,oldValue)unbind:function()例如，刪除bind(}在注冊之后，便可以在Vue.js模板中這樣用（記著添加v-<divv-my-當(dāng)只需update自定義指Vue.directive('my-directive',function(value)//這個函數(shù)用作Vue.directive('my-directive',function(value)//這個函數(shù)用作 this指向這個指令對el:指令綁定的元素vm:擁有該指令的上下文ViewModel。arg:指令的參數(shù)。 指令的名字，不包含前綴 一個對象，包含指令的修飾 一個對象，包含指令的解析結(jié)你應(yīng)當(dāng)將這些屬性視為只讀的，不要修改