Vue生命周期
Vue在被创建时都要经过一系列初始化过程,这个初始化过程是Vue的生命周期,以下图是官方文档的图,展示了实例的生命周期
Vue在被创建时整个初始化过程中会运行一些叫生命周期钩子的函数
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
插槽(伴随着组件使用,单纯改变内容)
<div id="app">
<my-com>
<div slot="left">左插槽</div>
<div>Vue</div>
<div slot="right">右插槽</div>
</my-com>
</div>
js部分(不难看出只是在模板里加了一个slot标签就能使用插槽,我们定义两个插槽一左一右)
const myCom = {
template: `
<div>
<div>组件</div>
<div class='left'>
<slot name="left">left slot</slot>
</div>
<div class='right'>
<slot name="right">right slot</slot>
</div>
</div>
`,
}
new Vue({
el: '#app',
components: {
myCom
}
})
作用域插槽(用于需要特定条件,列如循环等...)
<div id="app">
<my-com :lists="lists">
<template slot-scope="prop">
<li>{{prop.list.title}}</li>
<template/>
</my-com>
</div>
js部分
const myCom = {
template: `
<div>
<div>组件</div>
<div>
<ul>
<slot v-for="list in lists" :list="list">{{list.title}}</slot>
</ul>
</div>
</div>
`,
props:['lists'],
}
new Vue({
el: '#app',
components: {
myCom
},
data:{
lists:[
{title:'吃饭'},
{title:'睡觉'},
{title:'玩游戏'},
{title:'喝酒'},
{title:'上班'},
]
}
})
动态组件
按钮点击切换不同组件
<div id="app">
<component :is="comname"></component>
<button @click="comname = 'userName'">userName</button>
<button @click="comname = 'passWord'">passWord</button>
</div>
js部分
const userName = {
template: `
<div>
<label for="">userName</label>
<input type="text">
</div>
`,
}
const passWord = {
template: `
<div>
<label for="">passWord</label>
<input type="password">
</div>
`,
}
new Vue({
el: '#app',
components: {
userName,
passWord
},
data:{
comname :'userName'
}
})
但是有一个问题,输入文本内容后,切换组件文本内容不能缓存,只是只需要在模板上加一个keep-alive标签即可
<div id="app">
<keep-alive>
<component :is="comname"></component>
</keep-alive>
<button @click="comname = 'userName'">userName</button>
<button @click="comname = 'passWord'">passWord</button>
</div>
过渡动画
当进入/离开的过渡中,会有6个class类名切换
- v-enter:定义进入过渡的开始状态
- v-enter-active:定义进入过渡生效时的状态
- v-enter-to:定义进入过渡的结束状态
- v-leave:定义离开过渡的开始状态
- v-leave-active:定义离开过渡生效时的状态
- v-leave-to:定义离开过渡的结束状态
下面做个简单的动画过渡例子
css部分
.v-enter{
transform:translateX(-100%)
}
.v-enter-to{
transform:translateX(0)
}
.v-leave{
transform:translateX(0)
}
.v-leave-to{
transform:translateX(-100%)
}
.v-leave-active,.v-enter-active{
transition: all ease 0.5s;
}
html部分
<div id="app">
<transition>
<user-name v-if="flag"></user-name>
</transition>
<button @click="flag=!flag">点击</button>
</div>
js部分
const userName = {
template: `
<div>
<label for="">userName</label>
<input type="text">
</div>
`,
}
const passWord = {
template: `
<div>
<label for="">passWord</label>
<input type="password">
</div>
`,
}
new Vue({
el: '#app',
components: {
userName,
passWord
},
data:{
comname :'userName',
flag:true
},
})
同时生效的进入和离开的过渡不能满足所有要求,所以 Vue 提供了过渡模式
- in-out:新元素先进行过渡,完成之后当前元素过渡离开
- out-in:当前元素先进行过渡,完成之后新元素过渡进入
<transition mode="out-in">
<component :is="comname"></component>
</transition>
transition组件支持取名的,加个name属性,改了名字之后的6个class类名v-开都要换成newtran开头,列如:.v-enter-to => .newtran-enter-to
<transition mode="out-in" name="newtran">
<component :is="comname"></component>
</transition>