注意：这样的来回切换，每次都重新渲染了。因此下面介绍了keep-alive
<template> <div> <keep-alive> <component :is="currentView"></component> </keep-alive> <button @click="change">change</button> </div> </template> <script> import Events from './components/Events' import FormData from './components/FormData' import Styles from './components/Style' import MyCompent from './components/myCompent' import Father from './components/Father' import One from './components/One' import Two from './components/Two' export default { name: 'App', data() { return { currentView: "FormData", flag: true, } }, methods: { change() { if(this.flag){ this.currentView ="FormData"; this.flag=false; }else{ this.currentView ="Father"; this.flag=true; } } }, components: { Events, FormData, Styles, MyCompent, Father, One, Two } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>keep-alive:将组建保留在内存中，做到了缓存效果。
注意：什么情况使用keep-alive缓存？
实时更新不能使用缓存。
十九、过度与动画 单元素与组建的过渡自动应用class
<template> <div> <transition> <h1 v-show="show">{{msg}}</h1> </transition> <br> <button @click="change">测试</button> </div> </template> <script> export default { name: 'Donghua', data() { return { msg: '动画测试', show: true, } }, methods: { change() { this.show = ! this.show; } } } </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style> 过渡类名v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
<template> <div> <transition> <h1 v-show="show">{{msg}}</h1> </transition> <br> <button @click="change">测试</button> </div> </template> <script> export default { name: 'Donghua', data() { return { msg: '过渡测试', show: true, } }, methods: { change() { this.show = ! this.show; } } } </script> <style> .fade-enter, .fade-leave-to{ opacity: 0; } .fade-enter-to, .fade-leave{ opacity: 1; } .fade-enter-active, .fade-leave-active{ transition: opacity .9s } </style>移动的过渡
<template> <div> <transition> <h1 v-show="show">{{msg}}</h1> </transition> <br> <button @click="change">测试</button> </div> </template> <script> export default { name: 'Donghua', data() { return { msg: '过渡测试', show: true, } }, methods: { change() { this.show = ! this.show; } } } </script> <style> .fade-enter, .fade-leave-to{ transform: translate(20px,0); /* opacity: 0; */ } .fade-enter-to, .fade-leave{ /* opacity: 1; */ transform: translate(-20px,0) } .fade-enter-active, .fade-leave-active{ /* transition: opacity 3s */ transition: all 2s } </style> CSS过渡 <template> <div> <transition> <h1 v-show="show">{{msg}}</h1> </transition> <br> <button @click="change">测试</button> <br> <button @click="dong">test</button> <br> <transition> <p v-show="newshow">我现在住在加利福尼亚州的奥克兰</p> </transition> </div> </template> <script> export default { name: 'Donghua', data() { return { msg: '过渡测试', show: true, newshow: true, } }, methods: { change() { this.show = ! this.show; }, dong() { this.newshow = ! this.newshow; } } } </script> <style> .fade-enter, .fade-leave-to{ transform: translate(20px,0); /* opacity: 0; */ } .fade-enter-to, .fade-leave{ /* opacity: 1; */ transform: translate(-20px,0) } .fade-enter-active, .fade-leave-active{ /* transition: opacity 3s */ transition: all 2s } .dongba-enter-active{ animation: bounce-in .5s; } .dongba-leave-active{ animation: bounce-in .5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } </style>动画可以控制过程，过渡不能。
使用第三方css引入外部css方式