Yan Ruyu_Vue學(xué)習(xí)筆記

Vue基本認(rèn)知

Vue是一個(gè)JavaScript框架，它的特點(diǎn)在于使用者不用再思考DOM的操作堂飞，一切都由Vue來(lái)承擔(dān)路狮，這就是Vue的MVVM模式步绸，使用Vue框架你只需要操作數(shù)據(jù)而不是DOM尝丐。

Vue的v-for: 是Vue中一個(gè)簡(jiǎn)單的for循環(huán)，目前學(xué)到的課程中它可以用來(lái)遍歷數(shù)組宋税。
Vue的v-on: 是Vue中用于綁定事件的指令摊崭，它的作用是綁定一個(gè)事件，它可以簡(jiǎn)寫(xiě)成@杰赛。
Vue的v-bind: 用于傳遞數(shù)據(jù)呢簸，它可以幫你在組件之中傳遞值。
Vue的v-model: 數(shù)據(jù)的雙向綁定乏屯。

Vue的el: 是Vue實(shí)例的“管轄范圍”根时，它用于確定Vue實(shí)例的生效區(qū)域。
Vue的data: 是Vue實(shí)例的數(shù)據(jù)區(qū)域辰晕，它一般用于放置Vue實(shí)例中的數(shù)據(jù)內(nèi)容蛤迎。
Vue的methods: 用于放置Vue實(shí)例的方法，任何Vue中的使用的函數(shù)方法都要在其中定義含友。

Vue 的深入理解

Vue的組件間傳值

需要用到props替裆、v-bind、$emit等方法的配合窘问。

Vue的生命周期函數(shù)

Vue在實(shí)例生成之前和生成之后總共有8個(gè)生命周期函數(shù)辆童，他們分別是：

• beforeCreate：在實(shí)例生成之前
• created：實(shí)例生成之后
• beforeMount：實(shí)例渲染之前
• mounted：實(shí)例渲染之后
• beforeUpdata：實(shí)例數(shù)據(jù)修改之前
• updatad：實(shí)例數(shù)據(jù)修改之后
• beforeDestroy：實(shí)例銷(xiāo)毀之前
• destroyed：實(shí)例銷(xiāo)毀之后

Vue的模板語(yǔ)法

Vue中的模板語(yǔ)法有插值表達(dá)式、v-text惠赫、v-html等等把鉴。

任何v-開(kāi)頭的Vue指令，后面接的都是JS的表達(dá)式儿咱，也就是說(shuō)可以在后面接上加減乘除等JS語(yǔ)句庭砍，插值表達(dá)式也是如此。

計(jì)算屬性混埠，方法和偵聽(tīng)器

計(jì)算屬性 computed：

直接通過(guò)屬性名就能使用怠缸，因?yàn)樵蚝蜕厦嬲f(shuō)的一樣：

任何v-開(kāi)頭的Vue指令，后面接的都是JS的表達(dá)式钳宪。也就是說(shuō)可以在后面接上加減乘除等JS語(yǔ)句凯旭。

緩存功能在計(jì)算的成員值不變的情況下將不會(huì)進(jìn)行第二次計(jì)算，節(jié)省資源使套。

方法methods：

也可以直接通過(guò)屬性名使用（注意方法獨(dú)有的括號(hào)），但是它沒(méi)有計(jì)算屬性的緩存功能鞠柄，在計(jì)算成員值不變的情況下每次都會(huì)重新計(jì)算一次侦高，在網(wǎng)頁(yè)元素比較多的情況下可能會(huì)有比較明顯的資源浪費(fèi)。

監(jiān)聽(tīng)器watch：

可以監(jiān)聽(tīng)指定的方法厌杜，當(dāng)監(jiān)聽(tīng)的方法發(fā)生變化時(shí)會(huì)執(zhí)行指定的操作奉呛，保留了計(jì)算屬性的緩存功能计螺。

當(dāng)以上三種方法同是適用的候，優(yōu)先推薦計(jì)算屬性 computed瞧壮，既簡(jiǎn)潔登馒，也保留了性能。

計(jì)算屬性的getter和setter

計(jì)算屬性你可以使用 Get方法咆槽，通過(guò)其他值算出一個(gè)新值陈轿，也可以使用 Set方法，通過(guò)設(shè)置一個(gè)值改變相關(guān)聯(lián)的值秦忿，從而使用計(jì)算屬性的特性引起第二次計(jì)算麦射。

Vue中的樣式綁定

可以使用 isActivated來(lái)控制樣式名字的顯示和隱藏，在 data 或 methods 中設(shè)置 isActivated 為true就會(huì)綁定上CSS的樣式灯谣。也可以使用數(shù)組來(lái)控制樣式名字潜秋，設(shè)置數(shù)組的第一個(gè)值為空，標(biāo)簽就沒(méi)有綁定CSS樣式胎许，設(shè)置數(shù)組第一個(gè)值為CSS樣式名字則會(huì)綁定峻呛，還可以使用V-bind:style="CSS樣式名字"的方式來(lái)進(jìn)行綁定，這樣CSS樣式名字就是一個(gè)Vue的 data 值辜窑，可以在Vue的data 中控制它的屬性钩述，以此類(lèi)推，這種方法后面也能接一個(gè)數(shù)組谬擦，（具體看2.3_Style binding.html）更多樣化切距。

Vue的條件渲染

v-if、v-else-if惨远、v-else：

v-if是一個(gè)Vue的指令谜悟，它的值決定了它所在的這個(gè)DIV標(biāo)簽是否渲染顯示，每次的隱藏和顯示都相當(dāng)于刪除和增加一個(gè)DOM元素北秽，它還能搭配 v-else 或 v-else-if一起組合使用（警告葡幸，v-if 和 v-else、v-else-if必須緊靠在一起使用：孛ァ）蔚叨。
由于Vue的特性，Vue在渲染網(wǎng)頁(yè)的時(shí)候會(huì)盡量復(fù)用頁(yè)面上已有的DOM辙培，這可能會(huì)產(chǎn)生一些問(wèn)題蔑水，為了解決這些問(wèn)題就有key值這個(gè)概念，key值是獨(dú)一無(wú)二的扬蕊，Vue并不會(huì)復(fù)用key值不一樣的DOM元素搀别。

v-show：

v-show 與 v-if類(lèi)似，但是它每次的隱藏和顯示并非是在頁(yè)面上刪除和增加一個(gè)新的DOM尾抑，而是通過(guò)隱藏DOM標(biāo)簽歇父，在相同的環(huán)境下蒂培，v-show所需要的性能相對(duì)要低于前者。

Vue的列表循環(huán)

key榜苫、數(shù)組操作：

當(dāng)使用v-for遍歷來(lái)實(shí)現(xiàn)列表渲染編寫(xiě)key值時(shí)护戳，考慮到性能和一些未知的問(wèn)題，盡量不要使用數(shù)組的下標(biāo)作為key值垂睬，而是使用數(shù)組中一些獨(dú)一無(wú)二的值媳荒。

當(dāng)你直接對(duì)Vue的數(shù)組操作其下標(biāo)時(shí)，數(shù)據(jù)會(huì)發(fā)生變化羔飞，但是頁(yè)面不會(huì)發(fā)生變化肺樟，你需要使用Vue提供的7個(gè)數(shù)組操作方法來(lái)對(duì)數(shù)組進(jìn)行操作，它們分別是：

• push：向數(shù)組的末尾添加一個(gè)元素
• pop：刪除數(shù)組的最后一個(gè)元素
• shift：刪除數(shù)組的第一個(gè)元素
• unshift：向數(shù)組的開(kāi)頭添加一個(gè)或多個(gè)元素
• splice： 向數(shù)組中刪除或添加元素
• sort： 對(duì)數(shù)組進(jìn)行排序
• reverse 對(duì)數(shù)組進(jìn)行取反

還有通過(guò)改變數(shù)組的引用來(lái)實(shí)現(xiàn)對(duì)數(shù)據(jù)的操作逻淌，即直接改變遍歷的數(shù)組么伯，這種方法也能在數(shù)據(jù)變化的同時(shí)頁(yè)面同時(shí)變化

遍歷對(duì)象：

列表渲染不但可以使用數(shù)組，也可以使用一個(gè)對(duì)象卡儒，使用的方式和數(shù)組相同田柔，但是使用對(duì)象進(jìn)行列表渲染時(shí)，網(wǎng)頁(yè)并不會(huì)渲染對(duì)象的鍵名骨望，而是直接顯示對(duì)象的值硬爆，取而代替的是一個(gè)叫key的變量，其中對(duì)象的index和數(shù)組相同擎鸠。

在使用對(duì)象進(jìn)行列表渲染時(shí)缀磕，你無(wú)法使用Vue提供的7個(gè)數(shù)組操作方法，你可以直接修改對(duì)象里的數(shù)據(jù)劣光，數(shù)組變的同時(shí)頁(yè)面也會(huì)跟著發(fā)生變化袜蚕，但是和數(shù)字相同：直接往對(duì)象里添加數(shù)據(jù)時(shí)，頁(yè)面是不會(huì)發(fā)生變化绢涡，與之類(lèi)似牲剃，你可以直接改變對(duì)象的引用來(lái)實(shí)現(xiàn)數(shù)據(jù)的變化頁(yè)面跟著變。

使用組件的細(xì)節(jié)點(diǎn)

當(dāng)你使用Vue的組件功能實(shí)現(xiàn)組件化時(shí)雄可，你定義了一個(gè)組件凿傅，這個(gè)組件的名字可能與HTML自有的標(biāo)準(zhǔn)不符，使用這些組件的時(shí)候會(huì)產(chǎn)生一些問(wèn)題数苫，這時(shí)Vue提供了 is="組件名" 的語(yǔ)法來(lái)解決這種問(wèn)題聪舒，這種方法的作用就是在遵守HTML標(biāo)準(zhǔn)的同時(shí)使用你自定義的組件。
在組件中定義data 時(shí)虐急，data 必須是一個(gè)函數(shù)而不是一個(gè)對(duì)象过椎。

ref：

當(dāng)你在HTML標(biāo)簽中使用ref時(shí)，你獲取到的是 ref 對(duì)應(yīng)標(biāo)簽的DOM元素戏仓，而當(dāng)你在組件中使用 ref 時(shí)疚宇，你獲取到的是子組件的引用。

父子組件傳值

隱形的規(guī)定——單向數(shù)據(jù)流：

父組件可以隨意的向子組件傳值赏殃，子組件也可以修改父組件傳遞過(guò)來(lái)的值敷待，但是這樣可能會(huì)導(dǎo)致一些問(wèn)題，所以在子組件中使用父組件傳遞來(lái)的值時(shí)仁热，需要使用子組件自己的 data 來(lái)復(fù)制一份來(lái)自父組件的值榜揖。

emit()：

子組件向父組件傳值需要用的 $emit() 這個(gè)方法，這個(gè)方法不但可以向外觸發(fā)事件抗蠢，還可以在觸發(fā)事件的同時(shí)傳遞一個(gè)值（向外觸發(fā)的事件名可能不允許大寫(xiě)）举哟。

組件參數(shù)校驗(yàn)與非props特性

參數(shù)校驗(yàn)：

父組件可以任意向子組件傳值，子組件對(duì)傳遞過(guò)來(lái)的值可以進(jìn)行一個(gè)校驗(yàn)迅矛，也就是對(duì)傳遞的值有一定的約束妨猩，要使用這個(gè)特性，子組件里的props就不再是一個(gè)數(shù)組秽褒，而是一個(gè)對(duì)象壶硅，在對(duì)象中可以對(duì)傳遞過(guò)來(lái)的值進(jìn)行一個(gè)約束，約束的條件還可以是一個(gè)數(shù)組销斟，甚至是一個(gè)對(duì)象庐椒。
當(dāng) props 是一個(gè)對(duì)象時(shí)，你可以使用 validator 這一個(gè)函數(shù)還對(duì)傳遞值進(jìn)行校驗(yàn)蚂踊，還可以使用 default 來(lái)規(guī)定一個(gè)未傳值時(shí)的默認(rèn)值约谈，required來(lái)規(guī)定父組件必須傳值，當(dāng)然還有 type 來(lái)約束傳遞的值類(lèi)型犁钟。

非props特性：

當(dāng)父組件向子組件傳值的時(shí)候棱诱，子組件需要聲明 props 來(lái)獲取來(lái)自父組件的值，這個(gè)時(shí)候父組件傳遞的值并不會(huì)顯示在子組件DOM中特纤，但是子組件如果并沒(méi)有聲明 props 來(lái)獲取父組件的值军俊，那么這個(gè)值會(huì)顯示在子組件的DOM中，這就是 非props 特性捧存。

給組件綁定原生事件

當(dāng)你直接在子組件的中使用父組件的函數(shù)粪躬，這時(shí)候綁定的其實(shí)是組件的自定義事件，需要用 $emit 來(lái)向外觸發(fā)和監(jiān)聽(tīng)昔穴，你需要在子組件中的模板中綁定這個(gè)事件镰官，這時(shí)候綁定和觸發(fā)的才會(huì)是父組件的函數(shù)，如果你確實(shí)需要直接用子組件綁定父組件的事件吗货，你可以在子組件的自定義事件后面添加 .native泳唠，這個(gè)時(shí)候綁定的也是父組件的函數(shù)。

非父子組件間的傳值

bus：

在使用Vue進(jìn)行組件化傳值的時(shí)候宙搬，會(huì)遇到這樣一個(gè)問(wèn)題：非父子組件間傳值笨腥。如果按照傳統(tǒng)的方法將值一層一層傳遞上去拓哺，這樣寫(xiě)出來(lái)的代碼將會(huì)非常冗長(zhǎng)，這是就有了 bus這個(gè)概念脖母，在使用 bus前你需要事先給 Vue.prototype.bus賦值一個(gè)新的Vue實(shí)例： Vue.prototype.bus = new Vue()士鸥，這句話的意思在 Vue.prototype上掛載了一個(gè)名叫 bus的屬性，它指向一個(gè)Vue的實(shí)例谆级。每當(dāng)你去創(chuàng)建一個(gè)Vue實(shí)例或者一個(gè)組件時(shí)烤礁，都會(huì)有bus這個(gè)屬性。
有了 bus肥照，非父子組件間傳值就變的非常容易了脚仔，就像子組件向父組件傳值那樣，傳值組件中用 bus向外觸發(fā)一個(gè)事件：this.bus.$emit("事件名","數(shù)據(jù)")舆绎。然后在Vue的8個(gè)生命周期鉤子之一：mounted（實(shí)例渲染之后）中寫(xiě)一個(gè)函數(shù)鲤脏，這個(gè)函數(shù) bus中的 $on函數(shù)監(jiān)聽(tīng) bus向外觸發(fā)的事件名和數(shù)據(jù)，再傳遞給接收組件亿蒸。這樣就完成了非父子組件間傳值的需要凑兰。（警告：在接受組件的 mounted函數(shù)中操作數(shù)據(jù)時(shí)，this的作用域可能會(huì)發(fā)生變化边锁，需要用 var this_ = this來(lái)保存 this的數(shù)據(jù)姑食。）

在Vue中使用插槽

插槽：

子組件內(nèi)的某些元素需要由來(lái)自父組件或者其他組件的值來(lái)決定時(shí)，子組件自帶的模板似乎就不是那么好用茅坛，這時(shí)Vue就提供了一個(gè)新的功能：插槽音半。插槽使用的方法很簡(jiǎn)單，只需要在子組件的模板中添加一行要插入的內(nèi)容贡蓖，之后在 template中相應(yīng)的位置插入 <slot></slot>就可以了曹鸠，在這個(gè)元素中還可以加入默認(rèn)值以表示插槽未定義時(shí)的值。

具名插槽v-slot：

假如你需要由來(lái)自?xún)蓚€(gè)不同的組件的值來(lái)顯示在不同的插槽位置時(shí)斥铺，單單<slot></slot>是不夠的彻桃，為了解決這個(gè)問(wèn)題，Vue有一個(gè)新的指令 v-slot晾蜘，它用于給插槽指定一個(gè)名字邻眷，之后在 template使用name="插槽名"就可以實(shí)現(xiàn)不同位置顯示不同的插槽的需求。（注意：v-slot只能寫(xiě)在模板占位符即 template中）

作用域插槽slot_sope：

組件化的使用過(guò)程中還有可能遇到一種情況：當(dāng)子組件的 DOM結(jié)構(gòu)應(yīng)該由外部傳遞進(jìn)來(lái)的時(shí)候剔交，這個(gè)時(shí)候就要使用作用域插槽來(lái)解決問(wèn)題肆饶，子組件插槽可以向父組件插槽傳數(shù)據(jù)，子組件用 v-bind傳岖常，父組件用 slot-scope="屬性名"接受數(shù)據(jù)驯镊。

動(dòng)態(tài)組件與v-once指令

動(dòng)態(tài)組件：

在之前的筆記中可以看到：在一個(gè) DOM元素中使用 is="組件名"的方式可以在不影響語(yǔ)法要求的情況下將原來(lái)的DOM元素替換為定義的組件，這種特性與<component></component>結(jié)合就成了Vue的動(dòng)態(tài)組件（也可以不是<component></component>），在 data中定義一個(gè)變量板惑，變量的值是組件名橄镜，通過(guò)改變這個(gè)變量的名為其他組件名來(lái)實(shí)現(xiàn)動(dòng)態(tài)組件。

v-once：

在上面的方法每當(dāng) is="組件名"的值變化冯乘，在渲染顯示一個(gè)組件的同時(shí)蛉鹿，Vue會(huì)將其他的未被渲染的組件隱藏銷(xiāo)毀，也就是說(shuō)用上面的方法每次動(dòng)態(tài)組件切換時(shí)Vue就會(huì)渲染組件的同時(shí)和銷(xiāo)毀隱藏的組件往湿，如果頻繁切換組件這種方法無(wú)疑會(huì)影響性能，v-once指令會(huì)將組件在隱藏時(shí)放入內(nèi)存中惋戏，重新調(diào)用的時(shí)候再?gòu)膬?nèi)存中拿出來(lái)领追，通過(guò) v-once指令，可以有效提高一些靜態(tài)內(nèi)容的展示效率响逢。

Vue中的CSS動(dòng)畫(huà)原理

為Vue元素添加動(dòng)畫(huà)時(shí)绒窑，需要用<transition>標(biāo)簽包住元素，這樣才能為Vue元素添加動(dòng)畫(huà)效果舔亭，當(dāng)你不為<transition>標(biāo)簽指定一個(gè)name時(shí)些膨，動(dòng)畫(huà)樣式的前綴默認(rèn)為v-，還可以在<transition>使用-class為enter和leave動(dòng)畫(huà)指定一個(gè)CSS樣式名字钦铺，這樣Vue就會(huì)使用你指定的樣式名字订雾。（這個(gè)時(shí)候就不在需要name）
Vue動(dòng)畫(huà)從開(kāi)始到結(jié)束會(huì)有3個(gè)過(guò)程即從開(kāi)始到結(jié)束和中間，進(jìn)入過(guò)程：Vue會(huì)為這三個(gè)不同的過(guò)程中添加不同的CSS樣式：enter矛洞、enter-active洼哎、enter-to。
與之相似沼本，退出過(guò)程也會(huì)有三個(gè)CSS樣式：leave噩峦、leave-active、leave-to抽兆。

為什么使用enter作為動(dòng)畫(huà)的入場(chǎng)開(kāi)始：

使用enter作為入場(chǎng)開(kāi)始是因?yàn)閯?dòng)畫(huà)在默認(rèn)情況下opacity為1识补，這時(shí)需要在第一幀是將其寫(xiě)為0，在之后的進(jìn)行中中過(guò)程中enter會(huì)被移除辫红，這時(shí)opacity為0凭涂。

為什么使用leave-to作為動(dòng)畫(huà)的出場(chǎng)開(kāi)始：

使用leave-to作為出場(chǎng)開(kāi)始是因?yàn)閯?dòng)畫(huà)第一幀opacity需要為1，從第二幀開(kāi)始leave被移除厉熟，這時(shí)opacity的值還是1导盅，需要將其改為0，動(dòng)畫(huà)才會(huì)被正常觸發(fā)揍瑟。

在Vue中使用animate.css庫(kù)

庫(kù)的動(dòng)畫(huà)是CSS3標(biāo)準(zhǔn)的動(dòng)畫(huà)白翻。由于Vue可以更改CSS樣式的名字，所以我們可以使用在實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)時(shí)可以使用使用一些CSS庫(kù)如animate.css，用-class為動(dòng)畫(huà)指定名字為CSS庫(kù)的樣式名字滤馍，實(shí)現(xiàn)CSS庫(kù)的綁定岛琼。

在Vue中同時(shí)使用過(guò)渡和動(dòng)畫(huà)

元素第一次顯示的動(dòng)畫(huà)效果：

當(dāng)需要元素第一次顯示時(shí)也有動(dòng)畫(huà)效果，需要在<transition>標(biāo)簽中寫(xiě)入兩個(gè)屬性：appear巢株、appear-active-class槐瑞，第一個(gè)表示第一次顯示元素時(shí)也有動(dòng)畫(huà)效果，第二個(gè)表示動(dòng)畫(huà)效果的CSS規(guī)則阁苞，它的值就是CSS動(dòng)畫(huà)規(guī)則名困檩。

同時(shí)使用CSS庫(kù)和過(guò)渡動(dòng)畫(huà):

要實(shí)現(xiàn)這種效果，需要為在<transition>標(biāo)簽中為元素綁定兩個(gè)CSS規(guī)則那槽，分別為CSS庫(kù)動(dòng)畫(huà)和過(guò)渡動(dòng)畫(huà)——enter和leave

CSS庫(kù)和過(guò)渡動(dòng)畫(huà)執(zhí)行時(shí)間不一致:

在使用CSS庫(kù)的時(shí)候悼沿，而它往往都是固定的，而自定義的過(guò)渡效果可能和它不一樣骚灸，這是可以在<transition>標(biāo)簽中寫(xiě)一個(gè)新的屬性type糟趾，它的值決定了最終動(dòng)畫(huà)時(shí)長(zhǎng)以誰(shuí)為準(zhǔn)（animation 或 transition）

來(lái)自官方的解釋：Vue 為了知道過(guò)渡的完成，必須設(shè)置相應(yīng)的事件監(jiān)聽(tīng)器甚牲。它可以是 transitionend 或 animationend义郑，這取決于給元素應(yīng)用的 CSS 規(guī)則。如果你使用其中任何一種丈钙，Vue 能自動(dòng)識(shí)別類(lèi)型并設(shè)置監(jiān)聽(tīng)非驮。
但是，在一些場(chǎng)景中著恩，你需要給同一個(gè)元素同時(shí)設(shè)置兩種過(guò)渡動(dòng)效院尔，比如 animation 很快的被觸發(fā)并完成了，而 transition 效果還沒(méi)結(jié)束喉誊。在這種情況中邀摆，你就需要使用 type attribute 并設(shè)置 animation 或 transition 來(lái)明確聲明你需要 Vue 監(jiān)聽(tīng)的類(lèi)型。

顯性的過(guò)渡持續(xù)時(shí)間:

在大多數(shù)情況下伍茄，Vue可以自動(dòng)得出動(dòng)畫(huà)所需要的執(zhí)行時(shí)長(zhǎng)栋盹，當(dāng)然也可以用duration屬性定制執(zhí)行時(shí)長(zhǎng)（這個(gè)屬性需要用v-bind綁定，并且以毫秒表示）敷矫。duration屬性的值還可以是多個(gè)例获，用{}符號(hào)包裹，這個(gè)情況下可以分別為enter和leave動(dòng)畫(huà)定制執(zhí)行時(shí)長(zhǎng)曹仗。

Vue中的JS動(dòng)畫(huà)

在Vue動(dòng)畫(huà)的開(kāi)始和結(jié)束榨汤，有6個(gè)JS鉤子，它們分別是：
before-enter：入場(chǎng)動(dòng)畫(huà)之前
enter：入場(chǎng)動(dòng)畫(huà)執(zhí)行中
after-enter：入場(chǎng)動(dòng)畫(huà)之后
before-leave：出場(chǎng)動(dòng)畫(huà)之前
leave：出場(chǎng)動(dòng)畫(huà)執(zhí)行中
after-leave：出場(chǎng)動(dòng)畫(huà)之后

Vue中多個(gè)元素或組件的過(guò)渡

Vue在渲染網(wǎng)頁(yè)的時(shí)候會(huì)盡量復(fù)用頁(yè)面上已有的DOM怎茫，在使用Vue的動(dòng)畫(huà)效果時(shí)可能會(huì)產(chǎn)生一些問(wèn)題收壕，這時(shí)候也需要為元素指定Key值妓灌，保證動(dòng)畫(huà)的正常執(zhí)行。
<transition>標(biāo)簽中有一個(gè)屬性叫：mode蜜宪，它有兩個(gè)值：in-out和out-in虫埂，mode的值為in-out時(shí)，動(dòng)畫(huà)會(huì)先顯示再隱藏圃验，而out-in則與之相反掉伏，不使用mode屬性時(shí)，動(dòng)畫(huà)就會(huì)同時(shí)執(zhí)行澳窑。多個(gè)組件的過(guò)渡動(dòng)畫(huà)可以使用動(dòng)態(tài)組件來(lái)實(shí)現(xiàn)（具體看7.1_Transition of multiple elements.html）斧散。

Vue的列表過(guò)渡

與單個(gè)元素使用動(dòng)畫(huà)效果不同，列表渲染相當(dāng)于渲染多個(gè)元素的摊聋，這是<transition>標(biāo)簽不支持的颅湘，這時(shí)候就需要使用<transition-group>標(biāo)簽，這個(gè)標(biāo)簽相當(dāng)于為每一個(gè)渲染的元素添加上一個(gè)<transition>標(biāo)簽栗精。

Vue中的動(dòng)畫(huà)封裝

在很多時(shí)候一個(gè)相同的動(dòng)畫(huà)會(huì)用上很多次，盡管他們的元素各不相同瞻鹏，這樣一來(lái)悲立，每為一個(gè)元素設(shè)定這個(gè)動(dòng)畫(huà)都需要重復(fù)編寫(xiě)<transition>，這是很不方便的新博，為了解決這個(gè)問(wèn)題薪夕，我們可以使用Vue組件來(lái)對(duì)重復(fù)使用的動(dòng)畫(huà)進(jìn)行封裝。除此之外還可以將CSS規(guī)則進(jìn)行封裝赫悄，用Vue動(dòng)畫(huà)的6個(gè)JS鉤子將它改寫(xiě)為JS動(dòng)畫(huà)寫(xiě)在組件的methods中原献。

拓展

或許我可以用Vue的模板功能來(lái)生成一個(gè)帶有Vue實(shí)例接管的模板，例如：
template: "<li id="app">Hello Wrold</li>"

在Vue框架的使用中埂淮，你可以使用一個(gè)叫<template>的新標(biāo)簽姑隅，這個(gè)標(biāo)簽并不會(huì)真的渲染到頁(yè)面之上，但是它可以結(jié)合Vue指令來(lái)實(shí)現(xiàn)一些意想不到的效果倔撞，一個(gè)既不會(huì)真的渲染多一個(gè)標(biāo)簽但又確實(shí)存在的效果讲仰。

還有一個(gè)特別的方法能改變列表渲染時(shí)的值：Vue.set方法