data屬性
通過data屬性指定自定義組件的初始數(shù)據(jù)，要求data必須是一個(gè)函數(shù)，如果不是函數(shù)就會(huì)報(bào)錯(cuò)。
Props屬性
組件可以嵌套使用，叫做父子組件。那么父組件經(jīng)常要給子組件傳遞數(shù)據(jù)這叫做父子組件通信。
父子組件的關(guān)系可以總結(jié)為?props 向下傳遞，事件向上傳遞。
父組件通過?props?給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息。
1、在父組件中定義數(shù)據(jù)
2、在使用組件時(shí)，綁定父組件中的數(shù)據(jù)
3、在子組件中通過props屬性聲明父組件中傳遞過來的參數(shù)
4、在template屬性中使用父組件中的參數(shù)
Props屬性
組件可以嵌套使用，叫做父子組件。那么父組件經(jīng)常要給子組件傳遞數(shù)據(jù)這叫做父子組件通信。
父子組件的關(guān)系可以總結(jié)為?props 向下傳遞，事件向上傳遞。
父組件通過?props?給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息。
1、在父組件中定義數(shù)據(jù)
2、在使用組件時(shí)，綁定父組件中的數(shù)據(jù)
3、在子組件中通過props屬性聲明父組件中傳遞過來的參數(shù)
4、在template屬性中使用父組件中的參數(shù)
7、props校驗(yàn)
子組件在接收父組件傳入數(shù)據(jù)時(shí), 可以進(jìn)行props校驗(yàn)，來確保數(shù)據(jù)的格式和是否必傳?？梢灾付ㄒ幌聦傩裕?/p>
1) type: 指定數(shù)據(jù)類型 String Number Object ...注意不能使用字符串?dāng)?shù)組，只能是對(duì)象大寫形式
2) required: 指定是否必輸
3) default: 給默認(rèn)值或者自定義函數(shù)返回默認(rèn)值
4) validator: 自定義函數(shù)校驗(yàn)
非props屬性
? 引用子組件時(shí)，非定義的props屬性,自動(dòng)合并到子組件上,class和style也會(huì)自動(dòng)合并。
Props屬性
組件可以嵌套使用，叫做父子組件。那么父組件經(jīng)常要給子組件傳遞數(shù)據(jù)這叫做父子組件通信。
父子組件的關(guān)系可以總結(jié)為?props 向下傳遞，事件向上傳遞。
父組件通過?props?給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息。
1、在父組件中定義數(shù)據(jù)
2、在使用組件時(shí)，綁定父組件中的數(shù)據(jù)
3、在子組件中通過props屬性聲明父組件中傳遞過來的參數(shù)
4、在template屬性中使用父組件中的參數(shù)
7、props校驗(yàn)
子組件在接收父組件傳入數(shù)據(jù)時(shí), 可以進(jìn)行props校驗(yàn)，來確保數(shù)據(jù)的格式和是否必傳?？梢灾付ㄒ幌聦傩裕?/p>
1) type: 指定數(shù)據(jù)類型 String Number Object ...注意不能使用字符串?dāng)?shù)組，只能是對(duì)象大寫形式
2) required: 指定是否必輸
3) default: 給默認(rèn)值或者自定義函數(shù)返回默認(rèn)值
? 4) validator: 自定義函數(shù)校驗(yàn)
自定義事件
父組件給子組件傳值使用props屬性, 那么需要子組件更新父組件時(shí),要使用自定義事件$on和$emit：
?$on監(jiān)聽: 不能監(jiān)聽駝峰標(biāo)示的自定義事件, 使用全部小寫(abc)或者-(a-b-c)
?$emit主動(dòng)觸發(fā): $emit(事件名,傳入?yún)?shù))
主動(dòng)掛載
? 自定義事件不僅可以綁定在子組件，也可以直接掛載到父組件，使用$on綁定和$emit觸發(fā)。
具名插槽
具名插槽slot, 就是給插槽起個(gè)名字。
在子組件定時(shí)可以定定義多個(gè)插槽,同時(shí)通過name屬性指定一個(gè)名字,如:，父組件引用時(shí)使用< slot='header'>進(jìn)行插槽選擇。
作用域插槽slot-scope，
父組件通過插槽混入父組件的內(nèi)容, 子組件也可以通過slot作用域向插槽slot內(nèi)部傳入數(shù)據(jù)，使用方式:，
父組件通過<template slot-scope="props">進(jìn)行引用。
動(dòng)態(tài)組件
? 使用<component>標(biāo)簽的is屬性,動(dòng)態(tài)綁定多個(gè)組件到一個(gè)掛載點(diǎn),通過改變is綁定值,切換組件。
動(dòng)態(tài)組件
使用標(biāo)簽的is屬性,動(dòng)態(tài)綁定多個(gè)組件到一個(gè)掛載點(diǎn),通過改變is綁定值,切換組件。
keep-alive
如果把切換出去的組件保留在內(nèi)存中，可以保留它的狀態(tài)或避免重新渲染。為此可以添加一個(gè)?keep-alive?指令。
refs
? 使用ref 給每個(gè)組件起一個(gè)固定的名字,方便后續(xù)直接引用操作，在父組件中使用$refs訪問子組件。
$watch第一個(gè)參數(shù)是需要監(jiān)聽的屬性，第二個(gè)是回調(diào)函數(shù)用法和watch一樣。需要取消監(jiān)聽只需拿到監(jiān)聽對(duì)象的引用，這個(gè)引用是返回一個(gè)函數(shù)對(duì)象，執(zhí)行該對(duì)象就可以取消監(jiān)聽。
同時(shí)監(jiān)聽多個(gè)屬性，可以不指定屬性：
computed屬性
computed計(jì)算屬性用于定義比較復(fù)雜的屬性計(jì)算
computed和methods區(qū)別：
計(jì)算屬性使用computed定義, 方法使用methods定義
計(jì)算屬性使用時(shí)不加括號(hào)執(zhí)行符
計(jì)算屬性是基于它們的依賴進(jìn)行緩存的,計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。否則返回之前計(jì)算好的值,性能更高!
computed屬性
computed計(jì)算屬性用于定義比較復(fù)雜的屬性計(jì)算
computed和methods區(qū)別：
計(jì)算屬性使用computed定義, 方法使用methods定義
計(jì)算屬性使用時(shí)不加括號(hào)執(zhí)行符
計(jì)算屬性是基于它們的依賴進(jìn)行緩存的,計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。否則返回之前計(jì)算好的值,性能更高!
自定義指令
全局指令
局部指令
使用directive定義，第一個(gè)參數(shù)為指令名，使用時(shí)加上v-前綴才能生效。
? inserted屬性指當(dāng)綁定元素插入到DOM時(shí)調(diào)用。
鉤子函數(shù)的參數(shù)有三個(gè)：
1）el：當(dāng)前指令綁定元素
2）binding：當(dāng)前指令綁定的所有信息對(duì)象，有以下屬性：
name：指令名，不包括?v-?前綴。
value：指令的綁定值，例如：v-my-directive="1 + 1", value 的值是?2。
oldValue：指令綁定的前一個(gè)值，僅在?update?和?componentUpdated?鉤子中可用。無論值是否改變都可用。
expression：綁定值的字符串形式。例如?v-my-directive="1 + 1"?，expression 的值是?"1 + 1"。
arg：傳給指令的參數(shù)。例如?v-my-directive:foo，arg 的值是?"foo"。
modifiers：一個(gè)包含修飾符的對(duì)象。例如：v-my-directive.foo.bar, 修飾符對(duì)象 modifiers 的值是?{ foo: true, bar: true }。
3）vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)
4）oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在?update?和?componentUpdated
? 鉤子中可用。
過濾器
Vue允許自定義過濾器，可被用作一些常見的文本格式化。
過濾器可以用在兩個(gè)地方：mustache 插值和?v-bind?表達(dá)式?(后者從 2.1.0+ 開始支持)。
? 過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符指示：
