1.動態組件 在某些場景，往往需要我們動態切換頁面部分區域的視圖，這個時候內置組件component就顯得尤為重要。 component接收一個名為is的屬性，is的值應為父組件中註冊過的組件的名稱，用法如下： 示例如下： Example.vue： 效果： 預設顯示： 當我們點擊About標簽時： ...
1.動態組件
在某些場景，往往需要我們動態切換頁面部分區域的視圖，這個時候內置組件component就顯得尤為重要。
component接收一個名為is的屬性，is的值應為父組件中註冊過的組件的名稱，用法如下：
1 <component :is="view"></component>
示例如下：
Example.vue：
1 <template> 2 <div id="app"> 3 <ul class="tabs"> 4 <li class="per-tab" @click="toggleView('Home')">Home</li> 5 <li class="per-tab" @click="toggleView('About')">About</li> 6 </ul> 7 <div class="tab-content"> 8 <component :is="view"></component> 9 </div> 10 </div> 11 </template> 12 13 <script> 14 let Home = { //Home組件 15 template: '<p style="color: #787878;">Hello Home!</p>' 16 } 17 let About = { //About組件 18 template: '<p>Hello About!</p>' 19 } 20 export default { 21 name: '#app', 22 components: {Home, About}, //組件註冊 23 data() { 24 return { 25 view: 'Home' 26 } 27 }, 28 methods: { 29 toggleView(view) { 30 this.view = view 31 } 32 } 33 } 34 </script> 35 36 <style scoped> 37 .tabs{ 38 margin: 0; 39 padding: 0; 40 list-style: none; 41 } 42 .per-tab { 43 display: inline-block; 44 width: 120px; 45 line-height: 32px; 46 border-left: 1px solid #ccc; 47 border-top: 1px solid #ccc; 48 background-color: azure; 49 } 50 .per-tab:last-child { 51 border-right: 1px solid #ccc; 52 } 53 .tab-content { 54 background-color: aqua; 55 height: 240px; 56 border: 1px solid #ccc; 57 } 58 </style>
效果：
預設顯示： 當我們點擊About標簽時：
2.插槽：
示例：
1 <template> 2 <slot-test> 3 <p>使用插槽分發內容</p> 4 <h1 slot="header">插槽測試!</h1> 5 <p>在組件中，沒有指定插槽名稱的元素將被置於預設插槽中</p> 6 <p slot="none">指定到不存在的插槽中的內容將不會被顯示</p> 7 </slot-test> 8 </template> 9 10 <script> 11 let SlotTest = { 12 template: '<div>' + 13 '<slot name="header">相當於占位元素，因此這些文字也不會被渲染</slot>' + // 具名插槽 14 '<slot></slot>' + // 預設插槽 15 '</div>' 16 } 17 export default { 18 name: '', 19 components: {SlotTest} 20 } 21 </script> 22 23 <style scoped> 24 25 </style>
我們看到由於3和5行沒有指定name，所以插槽會使用麽人插槽，也就是14行；而如果有name屬性但是插槽
中沒有與此相匹配的，那將會不顯示，如第6行。
所以輸出的結果就是：
3.組件的緩衝：
keep-alive是一個抽象組件，及他既不渲染任何DOM元素，也不會出現在組件結構樹中。我們可以使用他緩存
一些非動態的組件實例（沒有或不需要數據變化），以保留組件狀態或減少重新渲染的開銷。
keep-alive應出現在組件被移除之後需要再次掛在的地方，比如使用動態組件時：
1 <keep-alive> 2 <component :is="view"></component> 3 </keep-alive>
或者使用v-if時：
1 <keep-alive> 2 <one v-if="isOne"></one> 3 <two v-else></two> 4 </keep-alive>
4.過渡效果：
（1）單節點過渡：
Vue提供了標簽為transition的內置組件，在下列情形中，我們可以給任何元素和組件添加進入/離開時的
過渡動畫：
①元素或組件初始渲染時；
②元素或組件顯示/隱藏時（使用v-if或v-show進行條件渲染時）
③元素或組件切換時
Vue允許用戶使用CSS和JS兩種方式來定義過渡動畫。
在使用CSS過渡時，我們需要預置符合Vue規則的帶樣式的類名，這些類名用於定義過渡不同階段時的樣式：
①v-enter：定義進入過渡的開始狀態。在元素被插入前生效，被插入後的下一幀移除；
②v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡階段中應用，在元素被插入之前生效，
在過渡/動畫完成之後移除。這個類可以用來定義進入過渡的過程時間、延遲的曲線函
數等；
③v-enter-to：（Vue 2.1.8 及以上版本）定義進入過渡結束時的狀態。在元素被插入後的下一幀（此時
v-enter被移除），在過渡/動畫完成之後移除；
④v-leave：定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一陣被移除；
⑤v-leave-active：丁一離開過渡生效時的狀態。在整個離開過度的階段中應用，在離開過渡被觸發時立
刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過度的過程時間、延遲
和曲線函數。
⑥v-leave-to：（Vue 2.1.8 版及以上版本）定義來開過度的結束狀態。在離開過度被觸發之後的下一幀生
效（此時v-leave被移除），在過渡/動畫完成之後移除。
註：當失利中存在多個不同的動畫效果時，我們可以使用自定義首碼替換v-，比如使用slide-enter替換v-enter
，不過這需要賦予transition元素name屬性
到此為止，這六個定義是不是聽起來很令人摸不到頭腦呀？下麵給大家個圖，助你理解：
下麵讓我們看一個示例：
1 <template> 2 <div id="app"> 3 <button @click="isHidden = !isHidden"> 4 {{ isHidden ? '顯示' : '隱藏' }} 5 </button> 6 <!-- 預設首碼的過渡 --> 7 <transition> 8 <p v-if="!isHidden">使用預設首碼的過渡</p> 9 </transition> 10 <!-- 自定義首碼的過渡，transitionName為變數 --> 11 <transition :name="transtionName"> 12 <p v-if="!isHidden">使用rotate首碼的過渡</p> 13 </transition> 14 </div> 15 </template> 16 17 <script> 18 export default { 19 name: '', 20 data() { 21 return { 22 isHidden: true, 23 transtionName: 'rotate' // 如果在運行時，將transitionName改為v會怎樣？ 24 25 } 26 } 27 } 28 </script> 29 30 <style scoped> 31 .v-enter, 32 .v-leave-to { 33 opacity: 0; 34 } 35 .v-enter-active, 36 .v-leave-active { 37 transition-property: opacity; /* 過渡屬性 */ 38 transition-delay: 100ms; /* 延遲 */ 39 transition-duration: 900ms; /* 過渡時長 */ 40 transition-timing-function: linear; /* 貝塞爾曲線（動畫速度曲線） */ 41 } 42 .rotate-enter, 43 .rotate-leave-to { 44 transform: rotateY(90deg); 45 } 46 .rotate-enter-active, 47 .rotate-leave-active { 48 transform-origin: left; 49 transition: transform 1s linear; 50 } 51 </style>
結果（由於不能插入mp4，所以這裡就搞個靜態的截圖吧，從左到右，第一章是未點擊顯示按鈕，第二張是點擊
顯示按鈕，第三張是再次點擊顯示按鈕）：
下麵讓我們來看一段代碼：
這裡我們引入了一個新概念key：當元素的key值發生變化時，Vue不回覆用原有的元素，而將重建新的元素。根
據這一特點，我們可以通過改變元素的key值來觸發過渡動畫，這常被用在元素切換時。
1 <template> 2 <div id="app"> 3 <button @click="isMaster = !isMaster">切換身份</button> 4 <transition> 5 <!-- 此處只寫了一個p標簽 --> 6 <p :key="isMaster ? 'master' : 'other'">{{ isMaster ? '大家好！' : '東家好！' }}</p> 7 </transition> 8 </div> 9 </template> 10 11 <script> 12 export default { 13 name: '#app', 14 data () { 15 return { 16 isMaster: true 17 } 18 } 19 } 20 </script> 21 22 <style scoped> 23 .v-enter, .v-leave-to { 24 opacity: 0; 25 } 26 .v-enter-active, .v-leave-active { 27 transition: opacity 1s; 28 } 29 </style>
在瀏覽器打開如圖1，點擊切換身份（如圖二到三）在身份切換過程中點擊切換後前者並沒有立刻消失，而是隨著
另一個身份的出現而漸漸消失，此間兩者都存在，那麼如何解決這個問題嘞？
解決問題，修改如下代碼，這時候上面那個兩個身份同時出現的bug就消除啦：
1 <transition mode="out-in"> 2 <!-- 此處只寫了一個p標簽 --> 3 <p :key="isMaster ? 'master' : 'other'">{{ isMaster ? '大家好！' : '東家好！' }}</p> 4 </transition>
（二）多節點過渡：
1 <template> 2 <div id="app"> 3 <button @click="addNewItem()">添加元素</button> 4 <br> 5 <transition-group name="list" tag="ul"> 6 <li v-for="item in list" :key="item">{{ item }}</li> 7 </transition-group> 8 </div> 9 </template> 10 11 <script> 12 export default { 13 name: '#app', 14 data () { 15 return { 16 list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 17 } 18 }, 19 methods: { 20 addNewItem () { 21 this.list.push(this.list.length) 22 } 23 } 24 } 25 </script> 26 27 <style scoped> 28 .list-enter, .list-leave-to { 29 opacity: 0; 30 transform: translateY(30px); 31 } 32 .list-enter-active, 33 .list-leave-active { 34 transition: all 1s linear; 35 } 36 </style>
結果（點擊添加元素，新的元素便會過渡出現，如下圖所示）：
最後提供一個元素隨機排序的簡單的項目，讀者們可以copy下來自己玩一下，裡面涉及的邏輯不是很難
1 <template> 2 <div id="app"> 3 <button @click="orderByRandom()">隨機順序</button> 4 <br> 5 <transition-group name="list" tag="ul"> 6 <li v-for="item in list" :key="item">{{ item }}</li> 7 </transition-group> 8 </div> 9 </template> 10 11 <script> 12 export default { 13 name:
