一、Vue2.0中的內置組件
1、<slot>
插槽
2、<keep-alive>
動態組件
被keep-alive所包裹的組件：
（1）不會被銷毀。
（2）還會多兩個生命周期鉤子：activated()、deactivated()。
（3）mounted()只執行一次，activated()、deactivated()可以執行多次。
keep-alive的屬性：
include：包含在include里面的組件不會死。
exclude：包含在exclude里面的組件會死，其他都不死。
3、<component>
它的is屬性，is等于誰就顯示誰。
有種v-if的感覺，根據指定條件渲染目標組件，它的is屬性等于哪個組件，就顯示哪個組件。
它經常配合<keep-alive>一起使用。
4、<transition>
過渡動畫。
是Vue內置的一種動畫方式。可以很方便的為元素顯示隱藏或組件切換添加動畫。
過渡動畫的兩個過程：（Enter進入動畫、Leave離開動畫）
（1）如何定義進入動畫，定義css
.enter：動畫剛剛進入的起點
.enter-active：動畫的過程
.enter-to：動畫的終點
（2）如何定義離開動畫
.leave：動畫離開的起點
.leave-active：動畫的過程
.leave-to：動畫的終點
（3）Vue過渡動畫的終點是不會保留的，也就是說當動畫結束后，元素的樣式取決于它原來的樣式。
（4）實際使用中，js動畫用的少，css動畫用的多
animate.css
5、<transition-group>
二、keep-alive組件例子
<html>
<head><title>動態組件</title><style>.tabbar {height: 60px;line-height: 60px;display: flex;position: fixed;bottom: 0;left: 0;right: 0;}.tabbar>span {flex: 1;border: 1px solid #ccc;text-align: center;cursor: pointer;}.tabbar>span.on {color: red;}</style>
</head>
<body><div id="app"><!-- <home-1></home-1><friend-1></friend-1><user-1></user-1> --><!-- 組件不死 --><keep-alive><component :is="page"></component></keep-alive><tabbar-1 v-model="page"></tabbar-1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const Home = {template:`<div><h1>首頁</h1><input type="text" v-model="a" /></div>`,data() {return {a: 1}},mounted() {console.log('---首頁掛載完成')},activated() {console.log('---首頁激活')},deactivated() {console.log('---首頁休眠')}}const Friend = {template:`<div><h1>好友</h1><input type="text" v-model="b" /></div>`,data() {return {b: 1}}}const User = {template:`<div><h1>個人中心</h1><input type="text" v-model="c" /></div>`,data() {return {c: 1}}}Vue.component('tabbar-1', {template: `<div class='tabbar'><span v-for='item in list' v-text='item.label' @click='$emit("input",item.tab)' :class='{on:item.tab===value}'></span></div>`,props: {value: {type: String, default:''}},data() {return {list: [{id:1, tab:'home-1', label:'首頁'},{id:2, tab:'friend-1', label:'好友'},{id:3, tab:'user-1', label:'個人中心'}]}}})const app = new Vue({components: {'home-1': Home,'friend-1': Friend,'user-1': User},data() {return {page: 'home-1'}}})app.$mount('#app')</script></body>
</html>
三、transition組件例子
<html>
<head><title>過渡動畫</title><style>.my-enter {opacity: 0;color: red;font-size: 12px;}.my-enter-active {transition: all ease 2s;}.my-enter-to {opacity: 1;color: black;font-size: 20px;}.my-leave {opacity: 1;color: black;font-size: 20px;}.my-leave-active {transition: all ease 2s;}.my-leave-to {opacity: 0;color: blue;font-size: 12px;}</style>
</head>
<body><div id="app"><transition name="my"><h1 v-if="bol1">測試動畫效果</h1></transition><button @click='bol1=!bol1'>顯示/隱藏</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({data() {return {bol1: true}}})app.$mount('#app')</script></body>
</html>
方法會出現什么情況？)
