摘要：效率不高，很多多余，稱之為臟檢查。通過索引設置數組元素并觸發視圖更新。解決閃爍問題自定義指令自定義指令提供一種機制將數據的變化映射為行為。

Vue只是聚焦視圖層，是一個構建數據驅動的Web界面的庫。
Vue通過簡單 API提供高效的數據綁定和靈活的組件系統

輕量

數據綁定

指令

插件化

架構從傳統后臺MVC 向REST API + 前端MV*遷移
DOM是數據的一種自然映射

Vue核心：
組件化和數據驅動

組件化: 擴展HTML元素，封裝可重用的代碼
每個組件對應一個工程目錄，組件所需要的各種資源在這個目錄下就近維護。

對比標準：
文件大小（性能），入門曲線（易用）,社區繁榮,吸取優點

與AngularJs區別

相同點：

支持指令 -- 內置指令和自定義指令

支持過濾器 -- 內置過濾器和自定義過濾器

支持雙向綁定

都不支持低端瀏覽器(IE6/7/8)

不同點：
在性能上，ANgualrJS依賴對數據做臟檢查，所以Watcher越多越慢，Vue使用依賴追中的觀察并且使用異步隊列更新，所有的數據都是獨立觸發的。

與React的區別

相同點：

React采用特殊的JSX語法，Vue在組建開中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，兩者都需要編譯后使用。

中心思想相同：一切都是組件，組件實例之間可以嵌套。

都提供合理的鉤子函數，可以去定制化的去處理需求。

都不內置類似AJAX，Router等功能到核心包，而是以其它方式(插件)加載。

在組建開發中，都支持mixins的特性。

不同點：

React依賴 Virtual DOM，而Vue使用的DOM模板。React采用的Virtual DOM會對渲染出來的結果做臟檢查

Vue在模板中提供了指令，過濾器等。可以方便快捷的操作DOM。

臟檢查：在angular中，沒有辦法對數據是否做了更改，所以設置觸發條件，當觸發這些條件，就執行一個檢查來遍歷所有的數據，對比更改的地方，然后執行變化，保留沒有更改的地方。
效率不高，很多多余，稱之為 臟檢查。(過程：數據修改了，結果：保留就數據)

Vue穩定版本：1.0.24

數據綁定是將數據和視圖想關聯，當數據發生變化時，可以自動更新視圖。

mustache標簽
文本插值：{{}}
有時候只需渲染一次數據,后續數據變化不再關心，使用：{{*}}
HTML片段：{{{}}}

注意:Vue指令和自身特性內是不可以插值。

mustache標簽可以由JavaScript表達式和過濾器(本質上是一個JavaScript函數)構成。

表達式：各種數值，變量，運算符的綜合體。

{{var a = 100;}} // 錯誤。 是語句，并不是表達式
{{if (true) return "a"}} // 條件控制語句是不支持，可以使用 三目運算符

作用：當表達式的值發生變化時，將這個變化也反映到DOM上。

分隔符

delimiters

Vue.config.delimiters = ["<%", "%>"];

修改了默認的文本插值的分隔符，則文本插值的語法由{{example}} 變為<%example%>

unsafeDelimiters

Vue.config.unsafeDelimiters = ["<$", "$>"];

如果修改了默認的HTML插值的分隔符，則HTML插值的語法由{{example}}變為 <$emample$>

指令的值限定為綁定表達式。
作用：當其表達式的值改變時把某些特殊的行為應用到DOM上。

v-if

根據表達式的值在DOM中生成或移除一個元素。

v-show

根據表達式的值來顯示或隱藏HTML元素。

在切換v-if模塊時，Vue有一個局部編譯/卸載過程，因為v-if中的模板可能包括數據綁定或子組件，v-if是真實的條件渲染，因為它會包缺條件塊在切換時合適地銷毀與重建條件塊內的時間監聽器和子組件

v-if是惰性的---如果初始渲染時條件為假，則什么也不做，在條件第一次變為真時才開始局部編譯(編譯會被緩存起來)
相比v-show -- 元素始終被編譯并保留，只是簡單的基于CSS切換。

v-if有更高的切換消耗，而v-show有更高的初始渲染消耗。因此，如果需要頻繁的切換，則使用v-show較好，如果在運行時條件不大可能變化，則使用v-if較好

v-else

必須跟著v-if或v-show后面，充當else功能

v-model

用來在 input, select, text, checkbox, radio 等表單控件元素上創建雙向數據綁定。根據控件類型，v-model自動選取正確的方法更新元素。

在v-model指令可以添加參數number,lazy,debounce

v-for

基于源數據重復渲染元素，可以使用$index來呈現相對應的數組索引

    

        {{item.childMsg}}
    

Vue 1.0.17及以后支持 of分隔符.

使用v-for，將得到一個特殊的作用域，需要明確指定props屬性傳遞數據，否則在組建內江獲取不到數據。(隔離作用域)

    
{{item.text}}

Vue包裝了被觀察數據的變異方法，它們能觸發視圖更新。
push(),pop(),shilt(),unshift(),splice(),sort(),reverse()

Vue重寫了這些方法之后,觸發了notify

Vue增加了兩個方法來觀測變化：$set，$remove。

$set : 通過索引設置數組元素并觸發視圖更新。

vm.animals.$set(0, {name: "Aardvark"});

$set,$remove 底層都是調用splice()方法。

應該盡量避免直接設置數據綁定的數組元素，因為這些變化不會被Vue檢測到，因為也不會更新視圖渲染，可以使用$set().

Vue不能檢測到數組的變化

直接用索引設置元素. 例如：vm.items[0] = {};

修改數據的長度, 例如：vm.items.length = 0;

解決方法：

vm.items.$set(0, {});

第二個問題，用一個空數據替換items即可。

v-for遍歷一個對象，每一個重復的實例都將有一個特殊的屬性$key，或者給對象的簡直提供一個別名。

{{$key}} : {{item}}

{{key}} : {{item.msg}}

v-for 支持整數

ECMAScript無法檢測到新屬性添加到一個對象上或者在對象中刪除。要處理這樣的狀況Vue增加三種方法：$add(key,value),$set(key, value),$delete(key)這些方法可以用來添加和刪除屬性，同時可以觸發視圖的更新。

v-text

v-text指令可以更新元素的textContent。在內部，{{ Mustache }}插值也被編譯為textNode的一個v-text指令。

{{msg}}

v-html
可以更新元素的InnerHTML。內容按普通 HTML插入 -- 數據綁定被忽略。

{{{Mustache}}} 插值也會被編譯為錨節點上的一個v-html指令

不建議直接動態渲染任意的HTML片段，很容易導致XSS攻擊.

{{{html}}}

v-bind

響應更新HTML特性，將一個或多個attribute，或一個組件prop動態綁定到表達式。

在綁定prop時，prop必須在子組件中聲明。可以用修飾符指定不同的綁定類型。

修飾符為:

.sync --- 雙向綁定，只能用于prop綁定。

.noce --- 單次綁定，只能用于prop綁定

.camel --- 將綁定的特性名字轉換駝峰命名(通常用于綁定用駝峰命名的SVG特性)

v-on
用于綁定事件監聽器，事件類型由參數指定。

在監聽原生DOM事件時，如果只定義一個參數。 DOM event 為事件的唯一參數;如果在內聯語句處理器中訪問原生DOM事件，則可以用特殊變量$event把它傳入方法中。

v-ref

在父組件上注冊一個子組件的索引，便于直接訪問。不需要表達式，必須提供參數id。可以通過父組件的$refs對象訪問子組件

v-el

為DOM元素注冊一個索引，方便通過所屬實例的$els訪問這個元素。可以用v-el:smoe-el設置this.$els.smoeEl

   

    
    hello
    Vue
    

v-pre

編譯時跳過當前元素和它的子元素。可以用來顯示原始Mustache標簽。跳過大量沒有指令的節點會加快編譯。

v-cloak

v-cloak 這個指令保持在元素上知道關聯實例結果編譯。
解決閃爍問題

[v-cloak] {
    dispnay: none;
}

    {{message}}

自定義指令提供一種機制將數據的變化映射為DOM行為。

鉤子函數

Vue中的鉤子函數都是可選的，相互之間沒有制約關系

bind， 只調用一次，在指令第一次綁定到元素上時調用。

update， 在bind之后立即以初始值為參數第一次調用，之后每當綁定值變化時調用，參數為新值與舊值。

unbind，只調用一次，在指令從元素上綁定時調用。

Vue.directive("my-directive", {
    bind: function () {
        // 準備工作
        // 例如，添加時間處理器或只需要運行一次的高耗任務
    },
    update: function ( newValue, oldValue ) {
        // 值更新時的工作
        // 也會以初始值為參數調用一次    
    },
    unbind: function () {
        // 清理工作
        // 例如，刪除bind() 添加的事件監聽器    
    }
});

使用指令：

只需要update函數是，可以傳入一個函數替代定義對象

Vue.direactive("my-directive", function () {
    // update();
});  

指令實例屬性

所有的鉤子函數都將被復制都實際的指令對象中，在鉤子內this指向這個指令對象。

el -- 指令綁定的元素

vm -- 擁有該指令的上下文ViewModel

expression -- 指令的表達式，不包括參數和過濾器。

arg -- 指令的參數

name -- 指令的名字，不包含前綴

modifires -- 一個對象，包括指令的修飾符

descriptor -- 一個對象，包含指令的解析結果

將這些屬性視為只讀，不要修改他們。

自定義指令提供一種機制將數據的變化映射為DOM行為

params
自定義指令可以接收一個params數組，指定一個特性列表，Vue編譯器將自定提取綁定元素的這些特性。

支持動態(v-bind),this.params[key]會自動保持更新。可以指定一個回調，在值變化時調用。

deep

如果自定義指令使用在一個對象上，當對象內部屬性變化時要觸發update，則在指令定義對象中指定 deep:true

    

    change{{a.b.c}}

twoWay

如果指令想VUe實例寫回數據，則在指令定義對象中指定twoWay:true
作用：允許在指令中使用this.set(value)

    自定義組件:  

    父作用域：{{a.b.c}}

acceptStatement

傳入acceptStatement:true可以讓自定義指令接受內聯語句，就像v-on那樣。

    

    {{a}}

Terminal

Vue通過遞歸遍歷DOM樹來編譯模塊。但是遇到terminal指令時會停止遍歷這個元素的后代，這個指令將會接管編譯這個元素及其后代的任務。 v-if和 v-for都是terminal指令

priority

可以給指令指定一個優先級。如果沒有指定優先級，普通指令默認是1000,terminal指令默認是2000.同一個元素上優先級高的指令會比其它指令處理得早已一些，優先級一樣的指令按照它在元素特性列表中出現的順序依次處理，但是不能保證這個順序在不同瀏覽器中是一致的。

流程控制指令 v-if和v-for在編譯過程中始終擁有最高的優先級。

指令可使用的配置項：

Vue.directive(id, {
    params: [],
    deep: true, // 使用對象，對象內部屬性變化，觸發update
    twoWay: true, // 指令把數據寫回Vue實例
    acceptStatement: true, // 自定義指令接受內聯語句 (類似`v-on`)
    priority: 2222, // 優先級
    bind: function() {},
    update: function() {},
    unbind: function() {}
});

Vue.directive(id, function() {
    
});

問題：

v-on可以綁定多個方法嗎?

v-on可以綁定多種類型的方法，可以是click，可以是focus事件，也可以是change事件
但是使用v-on綁定了兩個甚至多個click事件，那么v-on只會綁定第一個click事件，其它會被自動忽略。

一個Vue實例可以綁定多個element元素嗎?

el為實例提供掛載元素，值可以是CSS選擇符，或實際的HTML元素，或返回HTML元素的函數。這邊，元素只用作掛載點。如果提供了模板，則元素被替換，除非replace為false.元素可以用vm.$el訪問。

在Vue中如何讓v-for循環出來的列表里面的click事件只對當前列表內元素有效?

從數據角度出發，定好數據結構，然后操作數據

通過$event對象，獲取當前事件源，然后操作下面的元素.

    
    

        

            {{item.content}}
        
    
    

通常會在模板中綁定表達式，模板是用來描述視圖結構的。如果模板中的表達式存在過多的邏輯，模板會變成臃腫不堪，維護變得非常困難，因此，為了簡化邏輯，當某個屬性值依賴于其它屬性的值，可以使用計算屬性。

計算屬性就是當其依賴屬性的值發生變化時，這個屬性的值會自動更新，與之相關的DOM部分也會同步自動更新。

    
    
    
    

    
    didi = {{didi}}, family = {{family}}, didiFamily = {{didiFamily}}
    

計算屬性方法中執行大量的耗時操作，則可能會帶來一些性能問題。
例如：在計算屬性getter中循環一個大的數組以執行很多操作，那么當頻繁調用該計算屬性時，就會導致大量不必要的運算。
而在 Vue 0.12.8版本中，在這方面進行了優化，即只有計算屬性依賴的屬性值發生了改變時才會重新執行getter
這樣存在一個問題：就是只有Vue實例中被觀察的數據發生了改變時才會重新執行getter。但是有時候計算屬性依賴實時的非觀察數據屬性。

    
    {{welcome}}
    
{{example}}






    

在每次訪問example時都取得最新的事件而不是緩存的事件。從Vue 0.12.11版本開始，默認提供了緩存開關。 在計算屬性對象中指定cache字段來控制是否開啟緩存。

new Vue({
    el: ".app",
    data: {
        welcome: "welcome to join didi"
    },
    computed: {
        example: {
            cache: false, // 關閉緩存，默認為true
            get: function () {
                return Date.now() + this.welcome;
            }
        }
    }
});

設置cache為false關閉緩存之后，每次直接訪問vm.example 時都會重新執行getter方法。

問題：

計算屬性getter不執行的場景

當計算屬性依賴的數據屬性發生改變時，計算屬性的getter方法就會執行。在有些情況下，雖然依賴數據屬性發生了改變，但計算屬性的getter方法并不會執行。

當包含計算屬性的節點被移出模板中其它地方沒有再引用該屬性時，那么對應的計算屬性的getter不會執行。

    
    Toggle Show Total Price
    
Total Price = {{totalPrices}}
    {{totalPrices}}

text

設置文本框v-model為name

checkbox

一般的，使用多個復選框，被選中的值將會放入一個數組中。

    
    
    快

    
    專

    
Checked lines: {{bizLines | json}}

radio

單選按鈕被選擇時，v-dmoel中的變量值會被賦值為對應的value值。

select

通過v-for指令來冬天生成option

    
    
        
            {{option.value}} {{option.premium}}
        
    
    
bizLine: {{bizLine}}
    

checkbox

使用 :value 進行綁定

vm.bizLines === vm.flash

視圖與Model之間同步數據

lazy
一般的，v-model在input時間中同步輸入框的值與數據，可以添加一個lazy特性。從而改到change事件中去同步。

 

{{msg}}

debounce
設置一個最小延遲，一般的在 AJAX 請求時，有效。

number
可以在v-model所在的控件上使用number指令，該指令會在用戶輸入被同步到Model中時將其轉化為數值類型，如果裝換結果為NaN，則對應的Model值該是用戶輸入的原始值。

過濾器，本質上都是函數，其作用在于用戶輸入數據后，它能夠進行處理，并返回一個數據結果。

Vue支持在任何出現表達式的地方添加過濾器，除了{{}}mustache風格的表達式之外，還可以在綁定指令的表達式后調用。

過濾器可以接收參數，參數跟在過濾器后面，參數之間以空格分隔。

{{msg | filterFunction "arg1" arg2}}

過濾器函數始終以表達式的值作為第一個參數，帶引號的參數會被當作字符串處理，而不帶引號的參數會被當作數據屬性名來處理。

Linux shell 的管道符號，上一個命令的輸出可以作為下一個命令的輸入。
Vue過濾器支持鏈式調用，上一個過濾器的輸出的結果可以作為下一個過濾器的輸入。

{{"ddfe" | capitalize | reverse}}

字母操作

capitalize,uppercase,lowercase 三個過濾器用于處理英文字符。

capitalize 過濾器： 將表達式中的首字母轉大寫形式。
uppercase 過濾器：所有字母轉換為大寫形式。
lowercase 過濾器：所有字母轉為小寫形式。

json

json過濾器本質上時JSON.stringify(); 的精簡縮略版。
作用：將表達式的值轉換為JSON字符串。

限制
limitBy,filterBy,orderBy 用于處理并返回過濾后的數組。 例如與v-for搭配使用。

limitBy

limitBy過濾器的作用時限制數組為開始的前N個元素，其中N由傳入的第一個參數指定。第二個參數可選用于指定開始的偏移量。默認偏移量為 0. 如果第二個參數為3，則表示從數組下標第3個的地方開始計數。

filterBy

第一個參數可以是字符串或者函數。

orderBy

返回排序后的數組

    
{{user.lasetName}}--{{user.firsetName}}--{{user.age}}

fitler語法

Vue.filter(ID, function() {});

單參數

多參數

雙向過濾器

Vue支持把視圖(input元素)的值在寫回模型前進行轉化。

Vue.filter("MSG", {
    // model -> view
    // read 函數可選
    read: function() {
        console.log( 123 );
    },
    
    // view -> model
    // write函數將在數據被寫入Model之前調用
    // 兩個參數分別為表達式的新值和舊值
    write: function( newVal, oldVal ) {
        console.log( newVal, oldVal );
    }
});

動態參數

如果過濾器參數沒有用引號包起來，則它會在當前vm作用域內動態計算。過濾器函數的this始終指向調用它的vm

    
    
{{msg | concats userInp}}

過濾器注意點：
需要給定過濾器一個唯一標識。如果用戶自定義的過濾器和Vue內置的過濾器沖突，那么Vue內置的過濾器將會被覆蓋。如果后注冊的過濾器和之前的過濾器沖突，則之前注冊的過濾器層被覆蓋。

過濾器函數的作用時輸入表達式的值，經過處理后輸出。因此，定義的函數最好可以返回有意義的值。函數沒有return語句不會報錯，但這樣的過濾器沒有意義。

問題

filterBy/orderBy 過濾后$index 的索引

在使用 filterBy 或者 orderBy 對表達式進行過濾時，如果同時需要將$index 作為參數，此時的$index將會根據表達式數組或對象過濾后的值進行索引。

    
    

        

            {{item.msg}} -- {{$index}}
        
    
    

自定義 filter 的書寫位置

Vue實例提供一些有用的屬性和方法，這些屬性和方法名都已前綴$開頭

組件樹訪問

$parent 訪問當前組件實例的父實例

$root 訪問當前組件書的根實例，當前組件沒有父實例，$root 表示當前組件的實例本身。

$children 訪問當前組件實例的直接子組件實例。

$refs 訪問使用v-ref指令的子組件。

DOM訪問

$el 訪問掛載當前組件實例的DOM元素。

$els 訪問$el元素中使用了v-el指令的DOM元素。

數據訪問

$data 訪問組件實例觀察的數據對象，該對象引用組件實例化時選項中的data屬性。

$options 用來訪問組件實例化時的初始化選項對象。

當實例創建后原本不存在的屬性，是無法綁定在視圖上的。
可以使用Vue.set(),vm.$set() 來解決.

$appendTo
$appednTo();方法用來將el所指的DOM元素或片段插入到目標元素中。

參數：
elementOrSelector（字符串或DOM元素），該參數可以是一個選擇器字符串或者DOM元素。
callback -- （可選，該回調函數會在el元素被插入到目標元素后背觸發。(如果在el上應用了過渡效果，則回調會在過渡完成后被觸發)

$before
用來將el所指的DOM元素或片段插入到目標元素之前

參數：
elementOrSelector
callback-- （可選）

$after
將el所指的DOM元素或片段插入到目標元素之后。

參數：
elementOrSelector
callback-- （可選）

$remove
將el所指的DOM元素或片段從DOM中刪除
參數：
callback -- （可選）

$nextITick
在下次DOM更新循環后執行的回調函數，使用該方法可以保證DOM中的內容已經與最新數據保持同步。
參數：
callback -- （可選）該回調函數會在DOM更新循環后被執行。它和全局的Vue.nextTick(); 方法一樣，不同的是，callback中的this會自動綁定到調用它的Vue實例上。

$on
監聽實例上的自定義事件

$once
監聽實例上的自定義事件，當之觸發一次。

$emit
觸發事件
參數：
event（字符串），該參數可以是一個事件名稱
args （可選），傳遞給監聽函數的參數

$dispatch()
派發事件，即先在當前實例觸發，再沿著父鏈一層一層向上，如果對應的監聽函數返回false就停止。
參數：
event（字符串），該參數可以是一個事件名稱
args （可選），傳遞給監聽函數的參數

$boradcast()
廣播事件，即遍歷當前實例的$children,如果對應的監聽函數false就停止。
參數：
event（字符串），該參數可以是一個事件名稱
args （可選），傳遞給監聽函數的參數

$off()
刪除事件監聽器

參數：
event（字符串），該參數可以是一個事件名稱
args （可選），對應的回調函數

如果沒有參數，即刪除所有的事件監聽器，如果只提供一個參數--事件名稱，即刪除它對應的所有監聽器。如果提供兩個參數--事件名稱和回調函數，即刪除對應的這個回調函數。

組件核心目標是：可重用性高，減少重復性的開發。

Vue的組件可以理解為預先定義好行為的ViewModel類。一個組件可以預定義選項。

組件核心選項：

模板(template) -- 聲明了數據和最終展現給用戶的DOM之間的映射關系

初始化數據(data) -- 一個組件的初始數據狀態。對于可復用的組件來說，通常是私有的狀態。

接收的外部參數(props) -- 組件之間通過參數來進行數據的傳遞和共享。參數默認是單向綁定(由上至下)，但也可以顯示聲明為雙向綁定。

方法(methods) -- 對數據的改動操作一般都在組件的方法內進行。可以通過v-on指令將用戶輸入事件和組件方法進行綁定

生命周期鉤子函數 -- 一個組件會觸發多個生命周期鉤子函數，比如:created，attached，destoryed等。在這些鉤子函數中，可以封裝一些自定義的邏輯，和傳統的MVC想必，著可以理解為Controller的邏輯被分散到了這些鉤子函數中。

注冊

全局注冊

Vue.component("wind-component", WindComponet);

參數：
function， 可以是Vue.extend();創建的一個組件構造器，
Object ，Vue在背后自動調用Vue.extend();

組件的模板替換了自定義元素，自定義元素的作用只是作為一個掛載點，可以用實例replace決定是否替換自定義元素。

局部注冊

不需要每個組件都全局注冊，可以讓組件只能用在其它組件內。可以使用 實例選項中componets注冊

為了讓事件更簡單，可以直接傳入選項對象而不是構造器給Vue.component(); 和 components選項

Vue組件三種數據傳遞方式：

props

組件通信

slot

props

"props"是組建數據的一個字段，期望從父組件傳下來數據。因為組件的實例的作用域是孤立的，著意味著不能并且不應該在子組件的模板內直接引用父組件的數據，所以子組件需要顯示的用props選項來獲取父組件的數據。props選項可以是字面量，也可以是表達式，還可以綁定修飾符。

字面量語法

動態語法

可以利用v-bind將動態props綁定到父組件的數據。每當父組件的數據變化時，該變化也會傳到給子組件。
動態語法：在父級組件鏈接 :wind="msg"。只能在Vue.extend({}).

綁定修飾符

props默認是單向綁定 -- 當父組件的屬性變化時，將傳導給子組件，但是反過來不會。著是為了防止子組件無意修改父組件的狀態。

.sync,雙向綁定

.once, 單次綁定

雙向綁定會把子組件的msg屬性同步會父組件的parentMsg屬性

雙向綁定會把子組件的msg屬性同步到父組件的parentMsg屬性，單次綁定在建立之后不會同步之后的變化。如果props是一個對象或數組，那么它是按引用傳遞的。在子組件內修改會影響父組件的狀態，而不管是用哪種類型綁定。

組件通信

子組件可以用this.$parent訪問它的父組件，父組件有一個數組this.$children，暴行它所有的子元素，根實例的后代可以用this.$root訪問根實例，不過子組件應當避免直接依賴父組件的數據，盡量顯式的使用 props傳遞數據。

在子組件中修改父組件的狀態缺點：

父組件與子組件緊密地耦合

只看父組件，很難理解父組件的狀態，因為它可能被任意子組件修改。在理解情況下，只有組件自己能修改其狀態。

因為作用域是有層次的，所以可以在作用域鏈上傳遞時間。
一般的，選擇事件傳遞方式，判斷規則： 查看要觸發事件的作用域。如果要通知整個事件系統，就要向下廣播。

每一個Vue實例都是一個事件觸發器：

$on() -- 監聽事件

$emit() -- 把事件沿著作用域向上派送

$dispatch() -- 派發事件，事件沿著父鏈冒泡。 調用

$broadcast() -- 廣播事件，事件向下傳導給所有的后代

    
Messages: {{messages | json}}
    

從父組件的代碼中不能直接觀看到child-msg 事件來自哪里。如果在模板中子組件用到的地方聲明事件處理器。 可以使用v-on來監聽。

        
Message {{messages | json}}
        

當子組件觸發了child-msg 事件時，父組件的 hadleIt方法將被調用。所有影響父組件狀態的代碼都放到父組件的hadleIt方法中。 子組件只關注觸發事件。

盡管有props和events，但是有時候仍需要在JavaScript中直接訪問子組件。因此，需要使用v-ref為子組件指定一個索引ID。

v-ref 直接訪問子組件

slot分發內容

場景：
使用組件時，常常需要組合使用：

注意：

組件不知道他的掛載點會有什么內容，掛載點的內容是由的父組件決定的。

組件很可能有它自己的模板。

為了讓組件可以組合，需要一種方式來混合父組件的內容與子組件自己的模板。稱之為：內容分發
Vue使用特殊的元素左右原始內容的插槽

定義在父組件中，父組件中嵌套的其它內容不會被替換。

編譯作用域

分發內容是在各自作用域中被編譯。
父組件模板的內容在父組件作用域內編譯，子組件模板的內容在子組件作用域內編譯。

單個 slot

父組件的內容被拋棄，除非子組件模板包含.如果子組件模板只有一個沒有特性的slot，父組件的整個內容將查到slot所在的地方并替換它。

標簽的內容視為回退內容。回退內容在子組件的作用域內編譯，當宿主元素為空并且沒有內容供插入時顯示這個回退內容。

    
        
This is some original conent
        
This is some more original conent
    

具名slot

元素可以用一個特殊特性name配置如何分發內容。多個slot可以有不同的名字。具名slot將皮撇內容片段中有對應slot特性的元素。

·具名slot·仍然可以有一個匿名slot.作為找不到匹配的內容片段的回退插槽，它是默認slot。如果沒有默認slot，這些找不到匹配的內容片段將被拋棄。

    
    
        
ONE
        
TWO
        
defalut A
    

混合

以一種靈活的方式為組建提供分布復用的功能。混合對象可以包含任意的組件選項。
當組件使用了混合對象時，混合對象的所有選項將別“混入”組件自己的選項中。

HTML中是不區分大小寫，而JavaScript是區分大小寫。在給組件取屬性名時，要注意大小寫問題。盡量使用小寫加中橫線

當混合對象和組件包含同名選項時，這些選項將以適當的策略合并。
例如：同名鉤子函數被并入一個數組中，因而都會被調用。另外，混合的鉤子函數將在組件自己的鉤子之前調用。

混合全局注冊，一旦全局注冊混合，它就會影響所有之后創建的Vue實例。
慎用全局混合，因為它會影響到每個所創建的Vue實例，包括第三方組件。大多數情況下，它應當只用于自定義選項。

動態組件

多個組件可以使用同一個掛載點，然后動態的在他們之間切換。使用保留的元素，懂她id綁定到它的is特性上。

keep-alive

作用：切換組件時，保留組件狀態。減少內存開銷。

activate鉤子

作用： 控制切換組件的切換時間。切入組件添加activate 鉤子函數

Vue.component("actiate-exp", {
    activate: function ( done ) {
        var self = this;
        loadDataAsync(function ( data ) {
            self.smoeData = data;
            done();
        });
    }
});

activate 鉤子只作用于動態組件切換或靜態組件初始化渲染的過程中，不作用于使用實例方法手工插入的過程中。

transition-mode

transition-mode 特性用于指定連個動態組件之間如何過渡。

在默認情況下，進入與離開平滑的過渡。

in-out --- 新組建先過度進去，等它的過去完成之后當前組件過渡出去。

out-in 當前組件先過渡出去，等它過渡完成后新組件過渡進入

組件和 v-for

自定義組件可以像普通元素一樣直接使用v-for。
因為組件的作用域是孤立的，無法將數據傳遞那個到組件內部。

編寫可復用組件

在編寫組件時，時刻考慮組件是否可復用是否有好處的。
一次性組件跟其它組件緊密耦合沒關系，但是可復用組件一定要定義侵襲的公開接口。

Vue組件 API來自三部分 -- prop, Evnet， slot

prop允許外部環境傳遞數據組給組件

事件允許組件發出發布環境的action

slot運行外部環境將內部插入到組件的視圖結構內。

使用v-bind 和 v-on的簡寫語法，模板的縮進清楚并簡潔

異步組件需要將應用拆分為小塊，每塊按實現按需加載。Vue允許將組建定義為一個工廠函數，動態的解析組件的定義。Vue只在組件需要渲染時觸發工廠函數，并把結果緩存起來。

Vue.component("async-exp", function ( resoluve, reject ) {
    setTimeout(function () {
        reslove({
            tempate: "
ASYNC!
"
        });
    }, 1000);
});

工廠函數接受一個resolve回調，在收到從服務器下載的組件定義時調用。

片段實例

在使用template選項時，模板的內容將替換實例的掛載元素，因而推薦模板的頂級元素始終是單個元素。

下面的情況會讓實例變成一個片段實例

模板包含多個頂級元素

模板只包含普通文本

模板包含其他組件(其它組件可能是一個片段實例)

模板只包含一個元素指令，如 或 vue-router的

模板根節點有一個流程控制指令,如 v-if 或 v-for

讓實例有未知數據的頂級元素，它將把其DOM內容當作片段。片段實例仍然會正確的渲染內容。不過沒有一個根節點，它的$el指向一個錨節點，即一個空的文本節點(在開發模式下是一個注釋節點)

組件元素上的非流程控制指令，非prop特性和過度將被忽略。

在vue中，在實例化Vue之前，他們以HTML的文本形式保存在文本編輯器中。當實例化后將經歷創建,編譯,銷毀 主要三個階段

生命周期鉤子：

init
在實例化開始初始化時同步調用。此時數據觀測，事件和Watcher 都尚未初始化

created
在實例創建后同步調用。此時實例已經結束解析選項，意味著已建立：數據綁定，計算屬性，方法，Watcher/事件回調。但是還沒有開始DOM編譯，$el還不存在。

beforeCompile
在編譯開始前調用。

compiled
在編譯結束后調用。此時所有的指令已生效，因而數據的變化將觸發DOM更新。但是不是擔保$el已插入文檔。

ready
在編譯結束和$el第一次插入文檔之后調用，入在第一次attatced鉤子之后調用。注意必須是有Vue插入(如vm.$appendTo()等方法或更新)才出發ready鉤子的。

//  { 模板插入到文檔中了；相當于window.onload } 

attached
vm.$el 操作如DOM時調用。必須是→指令或實例方法(如$appednTo()) 插入，直接操作vm.$el不會觸發這個鉤子

detached
在vm.$el從DOM中刪除時調用。必須是由指令或實例方法刪除,直接操作vm.$el不會觸發這個鉤子

beforeDestroy
在開始銷毀實例時開始調用。此時實例仍然有功能。

destroyed
在實例被銷毀之后調用。此時所有的綁定和實例的指令已經解綁，所有的子實例也已經被效果。如果有離開過渡，dsetroyed鉤子在過渡完成之后調用。

組件格式，把一個組件的模板，樣式，邏輯三要素整合在同一個文件中，即方便開發，也方便復用和維護。Vue本身支持對組件的異步加載，配合webpack的分塊打包功能，可以實現組件的異步按需加載。

基于第三方組件開發

    
import Chart from "chart.js"

問題

camelCase & kebab-case

HTML標簽中的屬性名不區分大小寫。設置prop名字為camelCase形式的時候，需要裝歡為keba-case形式在HTML中使用。

字面量語法&動態語法

錯誤用法：
使用字面量語