生命周期

组件的生命周期：一共8个，4组，自动再不同的时刻自动触发，没写则不行

面试中：问vue的生命周期、组件的生命周期、组件的钩子函数、组件的生命周期钩子函数，都是在问同一个问题

	new Vue({
		data:{},
		beforeCreate(){
			//没用
		},
	              *created(){
			发起ajax
		},
		beforeMount(){
		},
	        *mounted(){
			发起ajax、找到dom后触发js操作（swiper自己的js应该再此处执行）
		},
		beforeUpdate(){

		},
	              *updated(){

		},
		beforeDestroy(){////没用
			console.log("清楚定时器，事件解绑(window)")
		},
		Destroyed(){////没用
			console.log("清楚定时器，事件解绑")
		}
	})

过度动画

过渡：添加动画

例css设置：

                 .paoge-enter-active{ 
                 animation: aaa 1s;            
                 }                             
                                               
                 .paoge-leave-active{          
                 animation: aaa 1s reverse;    
                 }                             
                                               
                 @keyframes aaa{               
                     0%{                           
                     opacity: 0;                   
                     transform: translateX(100px); 
                     }                             
                     100%{                         
                     opacity: 1;                   
                     transform: translateX(0px);   
                     }                             
                 }

语法：

        <transition enter-active-class="开始动画的class" leave-active-class="离开动画的class">
		<div v-show="isShow">11111111111111111111111</div>	
	</transition>
        <transition name="class的前缀">
		<div v-show="isShow">11111111111111111111111</div>	
	</transition>

开始就有动画

如果希望一打开页面就有一次动画，可以在transition标签上添加一个appear

如果多个元素过渡

别用v-show，使用v-if v-else

              <transition name="paoge" mode="out-in">
		<div v-if="isShow" key="1">11111111111111111111111</div>
		<div v-else key="2">22222222222222222222222</div>	
              </transition>

多个组件实现过渡，同上

                        <transition name="paoge" mode="out-in">
				<component :is="变量"><component>
			</transition>

列表ul li

		<transition-group name="paoge" tag="ul">
			<li v-for="(v,i) in arr" :key="v">
				{{v}} - <button @click="del(i)">x</button>
			</li>
		</transition>