一.模板語法：允許開發(fā)者把DOM綁定在最底層Vue實(shí)例上。在底層實(shí)現(xiàn)上，Vue會(huì)將模板編譯成虛擬DOM渲染函數(shù)，Vue可以計(jì)算出最少需要重新渲染多少組件，并減少DOM操作。
1.插值
#文本
? 數(shù)據(jù)綁定最常見的就是Mustache語法(雙大括號(hào)){{msg}}的文本插值。你也可以用v-once指令來定義一次性插值，數(shù)據(jù)改變插值處的內(nèi)容也不會(huì)改變，但是請注意，這會(huì)影響到該節(jié)點(diǎn)的其他插值。
//html? ? ??
?
我在這里給span標(biāo)簽添加了一個(gè)點(diǎn)擊事件，運(yùn)用了v-once指令，點(diǎn)擊span標(biāo)簽內(nèi)容仍不會(huì)改變。
?
#v-html
?
雙大括號(hào)輸出的只是文本，想輸出html代碼，需要用到v-html指令
//html和js? ? ? ? ?
?
瀏覽器里，上面輸出的就是純文本，下面就是把a(bǔ)aa里的東西變成了html代碼再渲染到了瀏覽器上，可以看到字體變成了紅色。
！注意：你的站點(diǎn)上動(dòng)態(tài)渲染的任意 HTML 可能會(huì)非常危險(xiǎn)，因?yàn)樗苋菀讓?dǎo)致 XSS攻擊。請只對可信內(nèi)容使用 HTML 插值，絕不要對用戶提供的內(nèi)容使用插值。
?
#特性
?
Mustache語法不能作用在HTML特性上，需要用v-bind指令來進(jìn)行操作，
用v-bind把class綁定在div上，shtie是一個(gè)變量名，初始值等于one，div初始是one的樣式。當(dāng)點(diǎn)擊div時(shí)，改變shtie變量的值為two，div就會(huì)變?yōu)閠wo的樣式。
//點(diǎn)擊前? ?
?
v-bind也可以用來綁定布爾值
<input v-bind:disabled="isButtonDisabled" /> isButtonDisabled的值如果為false、null、undefined，那么disabled不會(huì)被包含在渲染出的<input>元素中：? isButtonDisabled=false //未禁用? ???
? 這兩種寫法顯示是一樣的，可以給data中的firstName和lastName重新賦值，但是給reverseMsg重新賦值就會(huì)報(bào)錯(cuò)，提示沒有setter函數(shù)，在需要時(shí)也可以提供一個(gè)setter函數(shù)。
這是因?yàn)槟銓everseMsg賦值時(shí)，傳入的值保存在value中，然后把value中的值被空格分割成一個(gè)數(shù)組分別賦給firstName和lastName，當(dāng)firstName和lastName改變時(shí)，就又觸發(fā)計(jì)算屬性重新計(jì)算，從而改變頁面。
?
#計(jì)算屬性緩存vs方法
?
通過在表達(dá)式中調(diào)用方法也可以達(dá)到同樣的效果：
?
?
? 雖然兩個(gè)方式最后的結(jié)果是相同的，但是不同的是計(jì)算屬性是基于它們的響應(yīng)式依賴緩存的，只有相關(guān)響應(yīng)式依賴改變它們才會(huì)重新求值，也就是說只要msg沒有發(fā)生改變，多次訪問reverseMsg計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再執(zhí)行函數(shù)。
? 相比之下，每次觸發(fā)重新渲染，調(diào)用方法將總會(huì)再次執(zhí)行函數(shù)。
? 為什么要緩存？假設(shè)有一個(gè)計(jì)算屬性A，它需要做一些非常復(fù)雜且大量的計(jì)算，然后有一個(gè)依賴于A計(jì)算屬性，如果沒有緩存，我們會(huì)不可避免的多次執(zhí)行A中的getter函數(shù)。如果你不希望有緩存，可用方法代替。
? ? ? ? ? ?#計(jì)算屬性vs偵聽屬性
?
? vue提供了一種通用的方式來觀察和響應(yīng)vue實(shí)例上的數(shù)據(jù)變動(dòng)：偵聽屬性watch。
? //html和js? ?
?
? 其中newVal是改變之后的值，oldVal是改變之前的值。
當(dāng)有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動(dòng)而變動(dòng)時(shí)，很容易濫用 watch，通常更好的做法是使用計(jì)算屬性而不是命令式的回調(diào)watch。
三. class與style綁定
操作元素的 class 列表和內(nèi)聯(lián)樣式是數(shù)據(jù)綁定的一個(gè)常見需求。因?yàn)樗鼈兌际菍傩?，所以我們可以?v-bind處理它們：只需要通過表達(dá)式計(jì)算出字符串結(jié)果即可。不過，字符串拼接麻煩且易錯(cuò)。因此，在將 v-bind用于class和style時(shí)，Vue做了專門的增強(qiáng)。表達(dá)式結(jié)果的類型除了字符串之外，還可以是對象或數(shù)組。
1. 綁定HTML Class
#對象語法
? 我們給v-bind：class綁定一個(gè)對象，來動(dòng)態(tài)切換css：
<div v-bind:class="{ active:isActive }">
現(xiàn)在active這個(gè)class的存在與否就取決于isActive的真值了。
你可以在對象傳遞更多屬性來動(dòng)態(tài)切換多個(gè)class，此外v-bind：class也可以和普通class共存：
//HTML和js? ??
?
? 當(dāng) isTwo 和 isError 變化，class列表也相應(yīng)的更新。例如isError的值變?yōu)閠rue，class列表將變?yōu)閏lass=“one two button-text”。
綁定的對象不用內(nèi)聯(lián)定義在模塊里：
//HTML和js? ? ?
?
? 兩種寫法渲染是相同的，也可以在這里綁定一個(gè)返回對象的計(jì)算屬性，這是個(gè)常用且強(qiáng)大的模式：
?
?
#數(shù)組語法
我們可以傳一個(gè)數(shù)組給v-bind：class，以應(yīng)用一個(gè)class列表：
//html和JS? ??
?
也可以運(yùn)用三元表達(dá)式，<div? v-bind : class =" [ isActive ? active : ' ' ，errorClass ] "></div>。
這樣寫始終添加errorClass，但只有isActive為真值時(shí)才添加active。不過當(dāng)有多個(gè)條件class時(shí)，這樣寫太繁瑣，所有數(shù)組語法也可以使用對象語法：
<div? v-bind : class= " [ { active : isActive } ，errorClass ] ">
#用在組件上
當(dāng)在一個(gè)自定義組件上使用?class?屬性時(shí)，這些類將被添加到該組件的根元素上面。這個(gè)元素上已經(jīng)存在的類不會(huì)被覆蓋。
? //父組件??
?
? 我這里是將組件拆出去，然后在父組件里引用子組件。以上面為例，bbb相當(dāng)于一個(gè)包在子組件外的div，是子組件的容器，就算沒有定義類名，這個(gè)div還是會(huì)存在。
對于帶數(shù)據(jù)綁定也同樣適用：
<myComponent? v-bind : class = " { active : isActive } "></myComponent>? ? ? 當(dāng)isActive為真值時(shí)，active將被渲染。
2. 綁定內(nèi)聯(lián)樣式
#對象語法
v-bind：style的對象語法很直觀，看著非常像css，但其實(shí)是一個(gè)JavaScript對象，css屬性名可以用駝峰式命名（fontSize）或短橫線分割（font-size，記得用引號(hào)括起來：“font-size”）來命名：
?
? 直接綁定到一個(gè)樣式對象通常更好，這會(huì)讓模板更清晰：
?
同樣的，對象語法常常結(jié)合返回對象的計(jì)算屬性使用。
#數(shù)組語法
v-bind：style可以將多個(gè)樣式對象應(yīng)用到一個(gè)元素上：
?
? #自動(dòng)添加前綴
當(dāng)?v-bind:style?使用需要添加瀏覽器引擎前綴的 CSS 屬性時(shí)，如?transform，Vue.js 會(huì)自動(dòng)偵測并添加相應(yīng)的前綴。
? #多重值
從 2.3.0 起你可以為?style?綁定中的屬性提供一個(gè)包含多個(gè)值的數(shù)組，常用于提供多個(gè)帶前綴的值，例如：
<div :style = " { display: [ '-webkit-box'，'-ms-flexbox'，'flex' ] }"></div>
這樣寫只會(huì)渲染數(shù)組中最后一個(gè)被瀏覽器支持的值。在本例中，如果瀏覽器支持不帶瀏覽器前綴的 flexbox，那么就只會(huì)渲染?display: flex。
?四. 條件渲染
1. v-if
v-if?指令用于條件性地渲染一塊內(nèi)容。這塊內(nèi)容只會(huì)在指令的表達(dá)式返回真值的時(shí)候被渲染。
? <div v-if="awesome"> yes </div>
也可以用?v-else?添加一個(gè)“else 塊”：
? <div v-if="awesome"> yes </div>
<div v-else> no </div>
?
#在template元素上使用v-if條件渲染分組
?
因?yàn)?v-if?是一個(gè)指令，所以必須將它添加到一個(gè)元素上。但是如果想切換多個(gè)元素呢？此時(shí)可以把一個(gè)?<template>?元素當(dāng)做不可見的包裹元素，并在上面使用?v-if。最終的渲染結(jié)果將不包含?<template>?元素。
<template v-if=" ok ">
<h1>為真時(shí)</h1>
<div>這里</div>
<p>會(huì)渲染</p>
</template>
?
#v-else
你可以使用?v-else?指令來表示?v-if?的“else 塊”：
<div v-if=" Math.random() > 0.5 ">滿足條件時(shí)渲染</div>
<div v-else>否則渲染這里</div>
? ? ?v-else?元素必須緊跟在帶?v-if?或者?v-else-if?的元素的后面，否則它將不會(huì)被識(shí)別。
?
#v-else-if
v-else-if，顧名思義，充當(dāng)?v-if?的“else-if 塊”，可以連續(xù)使用：
<div v-if= "index === 1"> A </div>
<div v-else-if= "index === 2"> B </div>
<div v-else-if= "index === 3"> C </div>
<div v-else-if= "index === 4"> D </div>
<div v-else> 不是A/B/C/D </div>
類似于?v-else，v-else-if?也必須緊跟在帶?v-if?或者?v-else-if?的元素之后。
?
#用key管理可復(fù)用的元素
? Vue 會(huì)盡可能高效地渲染元素，通常會(huì)復(fù)用已有元素而不是從頭開始渲染。這么做除了使 Vue 變得非?？熘?，還有其它一些好處。例如，如果你允許用戶在不同的登錄方式之間切換：
?
? 那么在上面的代碼中切換?loginType?將不會(huì)清除用戶已經(jīng)輸入的內(nèi)容。因?yàn)閮蓚€(gè)模板使用了相同的元素，<input>?不會(huì)被替換掉——僅僅是替換了它的?placeholder。
這樣也不總是符合實(shí)際需求，所以 Vue 提供了一種方式來表達(dá)“這兩個(gè)元素是完全獨(dú)立的，不要復(fù)用它們”。只需添加一個(gè)具有唯一值的?key?屬性即可：
?
? 注意，與<input>同級(jí) <div>?元素仍然會(huì)被高效地復(fù)用，因?yàn)樗鼈儧]有添加?key?屬性。
?
2. v-show
另一個(gè)用于根據(jù)條件展示元素的選項(xiàng)是?v-show?指令。用法大致一樣：
<div v-show=" ok ">為真時(shí)渲染</div>
不同的是帶有?v-show?的元素始終會(huì)被渲染并保留在 DOM 中。v-show?只是簡單地切換元素的 CSS 屬性?display。
??！注意：v-show不支持<template>元素，也不支持v-else。
?
3. v-if 與 v-show
v-if?是“真正”的條件渲染，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。
v-if?也是惰性的，如果在初始渲染時(shí)條件為假，則什么也不做，直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開始渲染條件塊。
相比之下，v-show?就簡單得多，不管初始條件是什么，元素總是會(huì)被渲染，并且只是簡單地基于 CSS 進(jìn)行切換。
一般來說，v-if?有更高的切換開銷，而?v-show?有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用?v-show?較好；如果在運(yùn)行時(shí)條件很少改變，則使用?v-if?較好。
4. v-if 與 v-show
不推薦 v-if 與 v-for 同時(shí)使用。 v-for的優(yōu)先級(jí)是高于v-if的，也就是說會(huì)先執(zhí)行v-for，然后在每個(gè)for里都會(huì)執(zhí)行一遍if。
這種優(yōu)先級(jí)機(jī)制在有些地方是比較實(shí)用的，比如需要渲染滿足條件的項(xiàng)：
?
? 在這個(gè)例子中，我們只想渲染為0的項(xiàng)，就可以利用這個(gè)機(jī)制。
?五.??列表渲染
1. 用v-for把一個(gè)數(shù)組對應(yīng)為一組元素
我們可以用?v-for?指令基于一個(gè)數(shù)組來渲染一個(gè)列表。v-for?指令需要使用?item in items?形式的特殊語法，其中?items?是源數(shù)據(jù)數(shù)組，而?item?則是被迭代的數(shù)組元素的別名。
?
? 在?v-for?塊中，我們可以訪問所有父作用域的屬性。v-for?還支持一個(gè)可選的第二個(gè)參數(shù)，即當(dāng)前項(xiàng)的索引。
?
?
你也可以用?of?替代?in?作為分隔符，因?yàn)樗咏?JavaScript 迭代器的語法：
<div? v-for=" item of items ">
2. 在v-for 里使用對象
用 v-for 遍歷對象：
?
? 第一個(gè)參數(shù)為值，第二個(gè)的參數(shù)為 property 名稱 (也就是鍵名)，第三個(gè)參數(shù)作為索引。
在遍歷對象時(shí)，會(huì)按?Object.keys()?的結(jié)果遍歷，但是不能保證它的結(jié)果在不同的 JavaScript 引擎下都一致。
3. 維護(hù)狀態(tài)
當(dāng) Vue 正在更新使用?v-for?渲染的元素列表時(shí)，它默認(rèn)使用“就地更新”的策略。如果數(shù)據(jù)項(xiàng)的順序被改變，Vue 將不會(huì)移動(dòng) DOM 元素來匹配數(shù)據(jù)項(xiàng)的順序，而是就地更新每個(gè)元素，并且確保它們在每個(gè)索引位置正確渲染。
為了給 Vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一?key?屬性：<div? v-for =" item in items "? v-bind : key =" item.id ">。
建議盡可能在使用?v-for?時(shí)提供?key?attribute，除非遍歷輸出的 DOM 內(nèi)容非常簡單，或者是刻意依賴默認(rèn)行為以獲取性能上的提升。因?yàn)樗?Vue 識(shí)別節(jié)點(diǎn)的一個(gè)通用機(jī)制，key?并不僅與?v-for?特別關(guān)聯(lián),還有其他的用途。
不要使用對象或數(shù)組之類的非基本類型值作為?v-for?的?key。請用字符串或數(shù)值類型的值。
4. 更新檢測
#變異方法
Vue 將被偵聽的數(shù)組的變異方法進(jìn)行了包裹，所以它們也將會(huì)觸發(fā)視圖更新。這些被包裹過的方法包括：
push()? ? ? ? ?//可向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長度。 pop() ? ? ? ?//用于刪除并返回?cái)?shù)組的最后一個(gè)元素。 shift()? ? ? ? //用于把數(shù)組的第一個(gè)元素從其中刪除，并返回第一個(gè)元素的值。? unshift() ? ? ? //可向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長度。? splice()? ? ? ?//向/從數(shù)組中添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目。 sort()? ? ? ? //用于對數(shù)組的元素進(jìn)行排序。 reverse()? ? ? //用于顛倒數(shù)組中元素的順序。? #替換數(shù)組
變異方法，顧名思義，會(huì)改變調(diào)用了這些方法的原始數(shù)組。相比之下，也有非變異 (non-mutating method) 方法，例如?filter()、concat()?和?slice()?。它們不會(huì)改變原始數(shù)組，而總是返回一個(gè)新數(shù)組。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組:
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})?
你可能認(rèn)為這將導(dǎo)致 Vue 丟棄現(xiàn)有 DOM 并重新渲染整個(gè)列表。幸運(yùn)的是，事實(shí)并非如此。Vue 為了使得 DOM 元素得到最大范圍的重用而實(shí)現(xiàn)了一些智能的啟發(fā)式方法，所以用一個(gè)含有相同元素的數(shù)組去替換原來的數(shù)組是非常高效的操作。
#注意事項(xiàng)
由于 JavaScript 的限制，Vue?不能檢測以下數(shù)組的變動(dòng)：
vm.items[indexOfItem] = newValuevm.items.length = newLength 為了解決第一類問題，以下兩種方式都可以實(shí)現(xiàn)和?vm.items[indexOfItem] = newValue?相同的效果，同時(shí)也將在響應(yīng)式系統(tǒng)內(nèi)觸發(fā)狀態(tài)更新：
// Vue.set? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??// Array.prototype.splice
Vue.set(vm.items, indexOfItem, newValue)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??vm.items.splice(indexOfItem, 1, newValue)
為了解決第二類問題，你可以使用?splice：? vm.items.splice(newLength)
5.顯示過濾/排序后的結(jié)果
有時(shí)，我們想要顯示一個(gè)數(shù)組經(jīng)過過濾或排序后的版本，而不實(shí)際改變或重置原始數(shù)據(jù)。在這種情況下，可以創(chuàng)建一個(gè)計(jì)算屬性，來返回過濾或排序后的數(shù)組。
?
?
?
?
這里改變了原數(shù)組，但是因?yàn)槭怯?jì)算屬性，沒有setter函數(shù)不能改變它的依賴，所以number不會(huì)改變，可以正常遍歷。
?
在計(jì)算屬性不適用的情況下 (例如，在嵌套?v-for?循環(huán)中) 你可以使用一個(gè)方法：
?
?
? 注意，這里使用的方法必須是返回一個(gè)新數(shù)組的方法，使用改變原數(shù)組但不返回新數(shù)組的方法，會(huì)無限更新循環(huán)。
6. 在v-for 里使用值范圍
v-for?也可以接受整數(shù)。在這種情況下，它會(huì)把模板重復(fù)對應(yīng)次數(shù)。
<div> <span v-for="n in 10">{{ n }} </span> </div>
7. 在<template> 上使用v-for
?
8. 在組件上使用v-for
在自定義組件上，你可以像在任何普通元素上一樣使用?v-for?。
<myComponent v-for="item in items" :key="item.id"></myComponent>
2.2.0 的版本里，當(dāng)在組件上使用?v-for?時(shí)，key?現(xiàn)在是必須的。
然而，任何數(shù)據(jù)都不會(huì)被自動(dòng)傳遞到組件里，因?yàn)榻M件有自己獨(dú)立的作用域。為了把迭代數(shù)據(jù)傳遞到組件里，我們要使用 prop：
//父組件? ?
//子組件
? 把父組件中items的值傳給子組件，需要用到prop，把items綁定在子組件上，在子組件里用props接收數(shù)據(jù)。
?
六. 事件處理
1. 監(jiān)聽事件
可以用?v-on?指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。
?
除了直接綁定到一個(gè)方法，也可以在內(nèi)聯(lián) JavaScript 語句中調(diào)用方法：
有時(shí)也需要在內(nèi)聯(lián)語句處理器中訪問原始的 DOM 事件?？梢杂锰厥庾兞?$event?把它傳入方法：
?
preventDefault() 方法阻止元素發(fā)生默認(rèn)的行為（例如，當(dāng)點(diǎn)擊提交按鈕時(shí)阻止對表單的提交）。
2. 事件修飾符
方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。
<!-- 阻止單擊事件繼續(xù)傳播 -->
<!-- 阻止冒泡 -->
?
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<!-- 阻止默認(rèn)事件 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監(jiān)聽器時(shí)使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處理，然后才交由內(nèi)部元素進(jìn)行處理 -->
<!--?通常我們只監(jiān)聽冒泡過程。在vue中，當(dāng)我們添加了事件修飾符capture后，才會(huì)變成捕獲監(jiān)聽器。 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>
使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用?v-on:click.prevent.self?會(huì)阻止所有的點(diǎn)擊，而?v-on:click.self.prevent?只會(huì)阻止對元素自身的點(diǎn)擊。
Vue 還對應(yīng)?addEventListener?中的?passive?選項(xiàng)提供了?.passive?修飾符。
<!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā) -->
<!-- 而不會(huì)等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
不要把?.passive?和?.prevent?一起使用，因?yàn)?.prevent?將會(huì)被忽略，同時(shí)瀏覽器可能會(huì)向你展示一個(gè)警告。請記住，.passive?會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。
3. 按鍵修飾符
在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為?v-on?在監(jiān)聽鍵盤事件時(shí)添加按鍵修飾符：
? ? <!-- 只有在 `key` 是 `Enter` 時(shí)調(diào)用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
也可以直接將?KeyboardEvent.key?暴露的任意有效按鍵名轉(zhuǎn)換為 kebab-case 來作為修飾符。
<input v-on:keyup.page-down="onPageDown">
在上述示例中，處理函數(shù)只會(huì)在?$event.key?等于?PageDown?時(shí)被調(diào)用。
七. 表單輸入綁定
1. 基礎(chǔ)用法
你可以用?v-model?指令在表單?<input>、<textarea>?及?<select>?元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來更新元素。盡管有些神奇，但?v-model?本質(zhì)上不過是語法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進(jìn)行一些特殊處理。
v-model?會(huì)忽略所有表單元素的?value、checked、selected?特性的初始值而總是將 Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過 JavaScript 在組件的?data?選項(xiàng)中聲明初始值。
#文本
? #多行文本
?
? 在文本區(qū)域插值 (<textarea>{{text}}</textarea>) 并不會(huì)生效，應(yīng)用?v-model?來代替。
? #復(fù)選框
單個(gè)復(fù)選框，綁定布爾值
?
?
? 多個(gè)復(fù)選框綁定同一數(shù)組
?
? #單選按鈕
?
? #選擇框
?
? 如果?v-model?表達(dá)式的初始值未能匹配任何選項(xiàng)，<select>?元素將被渲染為“未選中”狀態(tài)。在 iOS 中，這會(huì)使用戶無法選擇第一個(gè)選項(xiàng)。因?yàn)檫@樣的情況下，iOS 不會(huì)觸發(fā) change 事件。因此，更推薦像上面這樣提供一個(gè)值為空的禁用選項(xiàng)。
#多選（綁定到一個(gè)數(shù)組）
?
?
v-for渲染動(dòng)態(tài)選項(xiàng)
?
? 2. 值綁定
對于單選按鈕，復(fù)選框及選擇框的選項(xiàng)，v-model?綁定的值通常是靜態(tài)字符串 (對于復(fù)選框也可以是布爾值)。
? ? 但是有時(shí)我們可能想把值綁定到 Vue 實(shí)例的一個(gè)動(dòng)態(tài)屬性上，這時(shí)可以用?v-bind?實(shí)現(xiàn)，并且這個(gè)屬性的值可以不是字符串。
? #單選框
?
? #選擇框選項(xiàng)
八. 組件基礎(chǔ)
1. 基本示例
vue項(xiàng)目目錄結(jié)構(gòu)
components下的base里放的是基礎(chǔ)組件，business放的是業(yè)務(wù)組件?？赡苣愕脑S多組件只是包裹了一個(gè)輸入框或按鈕之類的元素，是相對通用的。我們有時(shí)候會(huì)把它們稱為基礎(chǔ)組件，它們會(huì)在各個(gè)組件中被頻繁的用到。
在組件文件夾下創(chuàng)建vue文件，在父組件頁面里引用子組件，
?
?
? 因?yàn)榻M件是可復(fù)用的 Vue 實(shí)例，所以它們與?new Vue?接收相同的選項(xiàng)，例如?data、computed、watch、methods?以及生命周期鉤子等。
2. 組件的復(fù)用
你可以將組件進(jìn)行任意次數(shù)的復(fù)用：
?
? 每個(gè)組件都會(huì)各自獨(dú)立維護(hù),每用一次組件，就會(huì)有一個(gè)它的新實(shí)例被創(chuàng)建。
一個(gè)組件的?data?選項(xiàng)必須是一個(gè)函數(shù)，因此每個(gè)實(shí)例可以維護(hù)一份被返回對象的獨(dú)立的拷貝：
data(){
return{
}
}
如果 Vue 沒有這條規(guī)則,復(fù)用組件，操作其中一個(gè)，其他相同組件就會(huì)受到影響。
3. 組件的組織
通常一個(gè)應(yīng)用會(huì)以一棵嵌套的組件樹的形式來組織：
? 例如，你可能會(huì)有頁頭、側(cè)邊欄、內(nèi)容區(qū)等組件，每個(gè)組件又包含了其它的像導(dǎo)航鏈接、博文之類的組件。
4. 通過prop向子組件傳遞數(shù)據(jù)：這個(gè)我在列表渲染里，在組件上使用v-for實(shí)際操作過一次。
5. 單個(gè)根元素：每個(gè)組件里必須在<template>里套一個(gè)<div>，然后在這個(gè)最外層<div>里寫你要實(shí)現(xiàn)的內(nèi)容。
? ? 6. 監(jiān)聽子組件事件：
#子組件拋出事件
?
#父組件里調(diào)用事件
?
#組件上使用v-model
?
自定義事件也可以用于創(chuàng)建支持?v-model?的自定義輸入組件。
<input v-model="searchText">
等價(jià)于
<input? ?v-bind:value="searchText"? ??v-on:input="searchText = $event.target.value" >
當(dāng)用在組件上時(shí)，v-model?則會(huì)這樣：
<custom-input? ?v-bind:value="searchText"? ?v-on:input="searchText = $event" ></custom-input>
為了讓它正常工作，這個(gè)組件內(nèi)的?<input>?必須：
value?特性綁定到一個(gè)名叫?value?的 prop 上input?事件被觸發(fā)時(shí)，將新的值通過自定義的?input?事件拋出? 寫成代碼后：
?
現(xiàn)在?v-model?就應(yīng)該可以在這個(gè)組件上完美地工作起來了：
<custom-input v-model="searchText"></custom-input>
? 7. 通過插槽分發(fā)內(nèi)容
和 HTML 元素一樣，我們經(jīng)常需要向一個(gè)組件傳遞內(nèi)容，像這樣：
<myComponent>123</myComponent>
可能什么也渲染不出來，也可能會(huì)渲染出這樣的東西：
?
? ? 幸好，Vue 自定義的?<slot>?元素讓這變得非常簡單：
?
? 只需要在子組件里，把<slot>標(biāo)簽寫在你想添加的位置。這就是插槽，后面還會(huì)介紹更多。
九. 組件注冊
1.組件名：單文件組件（.vue），推薦駝峰式命名（myComponent）或跟據(jù)公司規(guī)范命名。
2.全局注冊
在注冊之后可以用在任何新創(chuàng)建的 Vue 根實(shí)例 (new Vue) 的模板中。
創(chuàng)建一個(gè)vue文件作為組件
?
? 在main.js里引入組件路徑并創(chuàng)建組件
?
在父組件里使用組件標(biāo)簽名
?
? 3. 局部注冊：本文中除了全局注冊，剩下的組件注冊都是局部注冊。
十. Prop
1.Prop大小寫
HTML 中的特性名是大小寫不敏感的，所以瀏覽器會(huì)把所有大寫字符解釋為小寫字符。這意味著當(dāng)你使用 DOM 中的模板時(shí)，駝峰命名法 的 prop 名需要使用其等價(jià)的短橫線分隔命名：
props: [?' postTitle ' ]
<myComponent? post-title=" hello "></myComponent>
如果使用字符串模板，這個(gè)限制就不存在了。
2.Prop類型
現(xiàn)在我們只看到以字符串?dāng)?shù)組形式列出的prop：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
但是，通常你希望每個(gè) prop 都有指定的值類型。這時(shí)，你可以以對象形式列出 prop，這些屬性的名稱和值分別是 prop 各自的名稱和類型：
?
?
? 這不僅為組件提供了文檔，還會(huì)在它們遇到錯(cuò)誤的類型時(shí)從瀏覽器的 JavaScript 控制臺(tái)提示用戶。
3.單向數(shù)據(jù)流
所有的 prop 都使得其父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過來則不行。這樣會(huì)防止從子組件意外改變父級(jí)組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。額外的，每次父級(jí)組件發(fā)生更新時(shí)，子組? ? ? ? ? ? ? ? 件中所有的 prop 都將會(huì)刷新為最新的值。這意味著你不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會(huì)在瀏覽器的控制臺(tái)給出警告。
?
?
? 這里有兩種常見的試圖改變一個(gè)prop的情形：
1.這個(gè) prop 用來傳遞一個(gè)初始值；這個(gè)子組件接下來希望將其作為一個(gè)本地的 prop 數(shù)據(jù)來使用。在這種情況下，最好定義一個(gè)本地的 data 屬性并將這個(gè) prop 用作其初始值：
?
?
? 2.這個(gè) prop 以一種原始的值傳入且需要進(jìn)行轉(zhuǎn)換。在這種情況下，最好使用這個(gè) prop 的值來定義一個(gè)計(jì)算屬性：
?
4. prop 驗(yàn)證
我們可以為組件的 prop 指定驗(yàn)證要求，例如你知道的這些類型。如果有一個(gè)需求沒有被滿足，則 Vue 會(huì)在瀏覽器控制臺(tái)中警告你。這在開發(fā)一個(gè)會(huì)被別人用到的組件時(shí)尤其有幫助。
為了定制 prop 的驗(yàn)證方式，你可以為?props?中的值提供一個(gè)帶有驗(yàn)證需求的對象，而不是一個(gè)字符串?dāng)?shù)組。
?
?
? 當(dāng)prop驗(yàn)證失敗的時(shí)候，Vue將會(huì)產(chǎn)生一個(gè)控制臺(tái)的警告。
? type可以是下面原生構(gòu)造函數(shù)中的一個(gè)：
String Number Boolean Array Object Date Function Symbol5.非prop特性：組件可以接受任意的特性，而這些特性會(huì)被添加到這個(gè)組件的根元素上
十一. 自定義事件
1.事件名
不同于組件和 prop，事件名不存在任何自動(dòng)化的大小寫轉(zhuǎn)換。而是觸發(fā)的事件名需要完全匹配監(jiān)聽這個(gè)事件所用的名稱。舉個(gè)例子，如果觸發(fā)一個(gè)駝峰式名字的事件：
? this.$emit('myEvent')
則監(jiān)聽這個(gè)名字的短橫線分隔命名版本是不會(huì)有任何效果的：
? <!-- 沒有效果 -->
<myComponent? @my-event="doSomething"></myComponent>
2. 將原生事件綁定到組件
Vue 提供了一個(gè)?$listeners?屬性，它是一個(gè)對象，里面包含了作用在這個(gè)組件上的所有監(jiān)聽器。
{
focus: function (event) { /* ... */ }
input: function (value) { /* ... */ },
}
? 有了這個(gè)?$listeners?屬性，你就可以配合?v-on="$listeners"?將所有的事件監(jiān)聽器指向這個(gè)組件的某個(gè)特定的子元素。
十二.? 插槽：在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語法 (即?v-slot?指令)。它取代了?slot?和?slot-scope?這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的特性。
1.插槽內(nèi)容
上面插槽的例子只是插入了數(shù)據(jù)，其實(shí)還可以插入組件：
?
? 如果?<myComponent>?沒有包含一個(gè)?<slot>?元素，則該組件起始標(biāo)簽和結(jié)束標(biāo)簽之間的任何內(nèi)容都會(huì)被拋棄。
2.編譯作用域
當(dāng)你想在一個(gè)插槽中使用數(shù)據(jù)時(shí)，例如：
?
? 該插槽跟模板的其它地方一樣可以訪問相同的實(shí)例屬性 (也就是相同的“作用域”)，而不能訪問?<myComponent>?的作用域。例如?url?是訪問不到的：
?
? 父級(jí)模板里的所有內(nèi)容都是在父級(jí)作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的。
3.后備內(nèi)容
有時(shí)為一個(gè)插槽設(shè)置具體的后備 (也就是默認(rèn)的) 內(nèi)容是很有用的，它只會(huì)在沒有提供內(nèi)容的時(shí)候被渲染。
? ? 我們可能希望這個(gè)?<button>?內(nèi)絕大多數(shù)情況下都渲染文本“Submit”。為了將“Submit”作為后備內(nèi)容，我們可以將它放在?<slot>?標(biāo)簽內(nèi)，
現(xiàn)在當(dāng)我在一個(gè)父級(jí)組件中使用該組件并且不提供任何插槽內(nèi)容時(shí)，后備內(nèi)容“submit”將會(huì)被渲染，
但當(dāng)我們提供內(nèi)容，則這個(gè)提供的內(nèi)容將會(huì)被渲染從而取代后備內(nèi)容：
?
? 4. 具名插槽
有時(shí)我們需要多個(gè)插槽。<slot>?元素有一個(gè)特殊的特性：name。這個(gè)特性可以用來定義額外的插槽，一個(gè)不帶?name?的?<slot>?出口會(huì)帶有隱含的名字“default”。
在向具名插槽提供內(nèi)容的時(shí)候，我們可以向<div>元素上使用slot指令，并以slot參數(shù)形式提供名稱。
現(xiàn)在父組件?<div>?元素中的所有內(nèi)容都將會(huì)被傳入相應(yīng)的插槽。
任何沒有被包裹在帶有?slot的?<div>?中的內(nèi)容都會(huì)被視為默認(rèn)插槽的內(nèi)容。
? 也可以有另一種寫法，把slot換成v-slot，但是v-slot只能添加在一個(gè)<template>上，只有一種情況例外。
當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時(shí)，組件的標(biāo)簽才可以被當(dāng)作插槽的模板來使用。這樣我們就可以把?v-slot?直接用在組件上。
注意默認(rèn)插槽的縮寫語法不能和具名插槽混用，因?yàn)樗鼤?huì)導(dǎo)致作用域不明確。
只要出現(xiàn)多個(gè)插槽，就要用具名插槽。
5作用域插槽
有時(shí)讓插槽內(nèi)容能夠訪問子組件中才有的數(shù)據(jù)是很有用的。
//父組件中
? //子組件中
? 在添加一個(gè)slot-scope屬性，給一個(gè)scope參數(shù)，在子組件里也同樣使用。
還可以有其他方法，比如，<current-user>組件里的slot想訪問傳給父級(jí)渲染的數(shù)據(jù)是不行的，
如下，為了讓?user?在父級(jí)的插槽內(nèi)容中可用，我們可以將?user?作為?<slot>?元素的一個(gè)特性綁定上去：
? 綁定在?<slot>?元素上的特性被稱為插槽 prop?，F(xiàn)在在父級(jí)作用域中，我們可以給?v-slot?帶一個(gè)值來定義我們提供的插槽 prop 的名字：
? 在這個(gè)例子中，我們選擇將包含所有插槽 prop 的對象命名為 aaa，但你也可以使用任意你喜歡的名字。
#解構(gòu)插槽Prop
作用域插槽的內(nèi)部工作原理是將你的插槽內(nèi)容包括在一個(gè)傳入單個(gè)參數(shù)的函數(shù)里：
function (slotProps) { // 插槽內(nèi)容 }
這意味著?v-slot?的值實(shí)際上可以是任何能夠作為函數(shù)定義中的參數(shù)的 JavaScript 表達(dá)式。所以在支持的環(huán)境下 (單文件組件或現(xiàn)代瀏覽器)，你也可以使用?ES2015 解構(gòu)來傳入具體的插槽 prop，如下：
? 這樣可以使模板更簡潔，尤其是在該插槽提供了多個(gè) prop 的時(shí)候。它同樣開啟了 prop 重命名等其它可能，例如將?user?重命名為?person：
? 甚至可以定義后備內(nèi)容，用于插槽 prop 是 undefined 的情形：
注意是插槽prop是undefined，在子組件會(huì)給出警告。
#動(dòng)態(tài)插槽
動(dòng)態(tài)指令參數(shù)也可以用在?v-slot?上，來定義動(dòng)態(tài)的插槽名：
?
? #具名插槽縮寫
v-slot：header? ? 等價(jià)于? ? #header
和其它指令一樣，該縮寫只在其有參數(shù)的時(shí)候才可用。
?十三. 動(dòng)態(tài)組件&異步組件
1. 動(dòng)態(tài)組件
在不同組件之間動(dòng)態(tài)切換，通過 Vue 的?<component>?元素加一個(gè)特殊的?is?特性來實(shí)現(xiàn)：
? first 、 second 、third 是注冊的三個(gè)組件，com可以是已注冊組件的名字，或一個(gè)組件的選項(xiàng)對象。我這里設(shè)置的是一個(gè)組件選項(xiàng)的數(shù)組。
? 2.在組件上使用keep-alive
? 當(dāng)在first內(nèi)輸入內(nèi)容，然后點(diǎn)擊second，再切換會(huì)first，first內(nèi)輸入的內(nèi)容會(huì)消失。這是因?yàn)槟忝看吻袚Q新標(biāo)簽的時(shí)候，Vue 都創(chuàng)建了一個(gè)新的 com實(shí)例。
重新創(chuàng)建動(dòng)態(tài)組件的行為通常是非常有用的，但是在這個(gè)案例中，我們更希望那些標(biāo)簽的組件實(shí)例能夠被在它們第一次被創(chuàng)建的時(shí)候緩存下來。為了解決這個(gè)問題，我們可以用一個(gè)?<keep-alive>元素將其動(dòng)態(tài)組件包裹起來。
?
? 注意這個(gè)?<keep-alive>?要求被切換到的組件都有自己的名字，不論是通過組件的?name選項(xiàng)還是局部/全局注冊。
十四. 混入
1.基礎(chǔ)
混入 (mixin) 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復(fù)用功能。一個(gè)混入對象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對象時(shí)，所有混入對象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。
創(chuàng)建混入文件
注冊一個(gè)mixin對象，定義需要的方法或者數(shù)據(jù)
? 在需要的頁面引入并使用，混入
?
? scss文件混入
創(chuàng)建scss文件并寫入需要混入的樣式
引入需要混入的文件
?
2.選項(xiàng)合并
當(dāng)組件和混入對象含有同名選項(xiàng)時(shí)，這些選項(xiàng)將以恰當(dāng)?shù)姆绞竭M(jìn)行“合并”。
比如，數(shù)據(jù)對象在內(nèi)部會(huì)進(jìn)行遞歸合并，并在發(fā)生沖突時(shí)以組件數(shù)據(jù)優(yōu)先。
同名鉤子函數(shù)將合并為一個(gè)數(shù)組，因此都將被調(diào)用。另外，混入對象的鉤子將在組件自身鉤子之前調(diào)用。也就是說先執(zhí)行混入對象的鉤子內(nèi)的操作。
值為對象的選項(xiàng)，例如?methods、components?和?directives，將被合并為同一個(gè)對象。兩個(gè)對象鍵名沖突時(shí)，取組件對象的鍵值對。
?
3.全局混入
混入也可以進(jìn)行全局注冊。使用時(shí)格外小心！一旦使用全局混入，它將影響每一個(gè)之后創(chuàng)建的 Vue 實(shí)例。使用恰當(dāng)時(shí)，這可以用來為自定義選項(xiàng)注入處理邏輯。
? ? ? ?在main.js中定義mixin，在需要的使用的頁面直接使用
?
4.自定義合并策略
optionMergeStrategies?主要用于?mixin?對于子組件和父組件如果有相同的屬性(option)時(shí)的合并策略。
自定義選項(xiàng)將使用默認(rèn)策略，即簡單地覆蓋已有值。
#defaultStrat
var defaultStrat = function (parentVal, childVal) { return childVal === undefined ? parentVal : childVal }
源代碼很簡單，傳入兩個(gè)參數(shù)?parentVal,?childVal?分別對應(yīng)于父組件和子組件的選項(xiàng)，合并的策略就是，子組件的選項(xiàng)不存在，才會(huì)使用父組件的選項(xiàng)，如果子組件的選項(xiàng)存在，使用子組件自身的。
#option.hook
如果父組件和子組件都設(shè)置了鉤子函數(shù)選項(xiàng)，那么 它們會(huì)合并到一個(gè)數(shù)組里，而且父組件的鉤子函數(shù)會(huì)先執(zhí)行，最后返回一個(gè)合并后的數(shù)組。具體見源碼里的注釋。
如果想讓自定義選項(xiàng)以自定義邏輯合并，可以向?Vue.config.optionMergeStrategies?添加一個(gè)函數(shù)：
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 返回合并后的值
}
對于多數(shù)值為對象的選項(xiàng)，可以使用與?methods?相同的合并策略：
var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods
十五. 自定義指令
1. 簡介：除了核心功能默認(rèn)內(nèi)置的指令 (v-model?和?v-show)，Vue 也允許注冊自定義指令。有的情況下，你仍然需要對普通 DOM 元素進(jìn)行底層操作，這時(shí)候就會(huì)用到自定義指令。
#全局注冊
在main.js中注冊，JQuery事件中，當(dāng)元素獲得焦點(diǎn)時(shí)，發(fā)生 focus 事件。
? #局部注冊
如果想注冊局部指令，組件中也接受一個(gè)?directives?的選項(xiàng)：
? 然后你可以在模板中任何元素上使用新的?v-focus?屬性，如下：
?
? 2.鉤子函數(shù)
一個(gè)指令定義對象可以提供如下幾個(gè)鉤子函數(shù) (均為可選)：
bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，在這里可以進(jìn)行一次性的初始化設(shè)置。
inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中）。
update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。
3.鉤子函數(shù)參數(shù)
? 我只寫了一個(gè)例子，大致的都相同
? 這是官網(wǎng)給的例子
?
#動(dòng)態(tài)指令參數(shù)
指令的參數(shù)可以是動(dòng)態(tài)的。例如，在?v-mydirective:[argument]="value"?中，argument?參數(shù)可以根據(jù)組件實(shí)例數(shù)據(jù)進(jìn)行更新！這使得自定義指令可以在應(yīng)用中被靈活使用。
例如你想要?jiǎng)?chuàng)建一個(gè)自定義指令，用來通過固定布局將元素固定在頁面上。我們可以像這樣創(chuàng)建一個(gè)通過指令值來更新豎直位置像素值的自定義指令：
?
? 這會(huì)把該元素固定在距離頁面頂部 200 像素的位置。但如果場景是我們需要把元素固定在左側(cè)而不是頂部又該怎么辦呢？這時(shí)使用動(dòng)態(tài)參數(shù)就可以非常方便地根據(jù)每個(gè)組件實(shí)例來進(jìn)行更新。
?
? 4.函數(shù)簡寫
如果指向在bind與update的時(shí)候執(zhí)行指令, 那么第二個(gè)參數(shù)可以直接寫函數(shù)
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})
5.對象字面量
如果指令需要多個(gè)值，可以傳入一個(gè) JavaScript 對象字面量。記住，指令函數(shù)能夠接受所有合法的 JavaScript 表達(dá)式。
?
?十六. 過濾器
vue允許自定義過濾器，可被用于一些常見的文本格式化。
過濾器可以用在兩個(gè)地方：雙花括號(hào)插值和?v-bind?表達(dá)式 。
過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符號(hào)指示：
在{{}}中：{{msg | capitalize}}? ? ? ? ? ? ? ? ?在v-bind中：<div? :id="rawId | formId" >
在一個(gè)組件的選項(xiàng)中定義本地的過濾器：
?
? 我這里是讓輸入的值渲染在頁面上的時(shí)候前面加上$，
在創(chuàng)建 Vue 實(shí)例之前全局定義過濾器：
?
?
? 當(dāng)全局過濾器和局部過濾器重名時(shí)，會(huì)采用局部過濾器。
過濾器函數(shù)總接收表達(dá)式的值 (之前的操作鏈的結(jié)果) 作為第一個(gè)參數(shù)。在上述例子中，capitalize?過濾器函數(shù)將會(huì)收到?message?的值作為第一個(gè)參數(shù)。
過濾器可以串聯(lián)：
{{ message | filterA | filterB }}
在這個(gè)例子中，filterA?被定義為接收單個(gè)參數(shù)的過濾器函數(shù)，表達(dá)式?message?的值將作為參數(shù)傳入到函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個(gè)參數(shù)的過濾器函數(shù)?filterB，將?filterA?的結(jié)果傳遞到?filterB?中。
過濾器是 JavaScript 函數(shù)，因此可以接收參數(shù)：
{{ message | filterA('arg1', arg2) }}
這里，filterA?被定義為接收三個(gè)參數(shù)的過濾器函數(shù)。其中?message?的值作為第一個(gè)參數(shù)，普通字符串?'arg1'?作為第二個(gè)參數(shù)，表達(dá)式?arg2?的值作為第三個(gè)參數(shù)。
聯(lián)系客服
