一、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>
方法会出现什么情况？)
