动画和生命周期
具名插槽
- 让我们在组件中书写内容
<div id="app">
<Hello>
<header slot = "header"> 头部 </header>
<section slot = "content"> 内容 </section>
<footer slot = "footer"> 底部 </footer>
</Hello>
</div>
<template id="hello">
<div>
<slot name = "header"></slot>
<slot name = "content"></slot>
hello
<slot name = "footer"></slot>
</div>
</template>
Vue.component( 'Hello', {
template: '#hello'
})
new Vue({
el: '#app'
})
过渡与动画
- vue中实现过渡或是动画一共提供了这样四种形式:
1.在 CSS 过渡和动画中自动应用 class — 自己写css3动画
a. vue只要一使用transition组件就会自动添加6个类名 和 8 个钩子函数
b. transition组件如果有name选项,就可以将类名 v- 换成 ‘name’- 类名
<div id="app">
<button @click = 'flag = !flag'> 切换 </button>
<transition name="fade" mode="">
<p v-show = 'flag'> 切换的内容 </p>
</transition>
</div>
.fade-enter-active, .fade-leave-active{
transition: all 1s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
new Vue({
el: '#app',
data: {
flag: true
}
})
2.可以配合使用第三方 CSS 动画库,如 Animate.css -- 别人写好了类名,我们用
<div id="app">
<button @click = 'flag = !flag'> 切换 </button>
<transition
name="fade" mode="out-in"
enter-active-class = "animated slideInLeft"
leave-active-class = "animated slideOutLeft"
>
<p v-show = 'flag'> 切换的内容 </p>
</transition>
<transition
name="fade" mode="in-out"
enter-active-class = "animated slideInLeft"
leave-active-class = "animated slideOutLeft"
>
<p v-show = '!flag'> 切换的内容 </p>
</transition>
</div>
new Vue({
el: '#app',
data: {
flag: true
}
})
3.在过渡钩子函数中使用 JavaScript 直接操作 DOM -- 自己用原生js来写动画
<div id="app">
<button @click="flag=!flag">按钮</button>
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<img v-show="flag" class="ball" :src="ball" alt="" width="30">
</transition>
</div>
let vm = new Vue({
el: "#app",
data: {
flag: false,
ball: 'https://upload-images.jianshu.io/upload_images/1864602-ec73f549171a6601.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
},
methods: {
// el 表示要执行动画的那个DOM元素, 是原生的 js DOM 对象
beforeEnter(el) {
// 设置动画开始之前的初始位置
el.style.transform = "translate(0, 0)"
},
enter(el, done) {
// 刷新动画效果
el.offsetWidth;
// 动画完成后的样式
el.style.transform = "translate(400px, 300px)";
// 动画的持续时间
el.style.transition = "all 3s ease";
// done 其实是 afterEnter() 的引用
done();
},
afterEnter(el) {
// 动画完成之后调用
this.flag = !this.flag
}
}
})
//浏览器不会根据你js对style的修改实时更新,而一般是在当前js修改完毕之后,会对所有修改统一更新,而display:none(它本身是不能transition的)的状态切换影响了其他过渡效果的切换,毕竟为none的元素没法触发过渡。将offsetWidth打开,你会发现过渡生效了,原因在于取offsetWidth导致浏览器重绘,使后面的style修改前,display确确实实变为了block,从而消除了元素状态为none对过渡的这种影响。添加setTimeout,“打断”js的执行也可生效。 所以可以在enter函数中添加el.offsetWidth或el.offsetHeight
4.可以配合使用第三方 JavaScript 动画库,如 Velocity.js -- 用别人写好的动画库
动态组件(缓存)
- 动态组件是vue内部提供了一个叫做component的组件,这个组件身上可以通过绑定is属性来进行 组件的切换
keep-alive组件可以进行组件的内容缓存,将组件的内容存入浏览器缓存中,这样可以大大的节省街切换的事件
keep-alive 和 component动态组件两者常常一起搭配使用
<div id="app">
<button @click = " name = name === 'Aa'?'Bb':'Aa'"> 切换 </button>
<keep-alive include="">
<component :is = "name"></component>
</keep-alive>
</div>
Vue.component( 'Aa',{
template: '<h3> AA </h3>'
})
Vue.component( 'Bb',{
template: '<h3> BB </h3>'
})
new Vue({
el: '#app',
data: {
name: 'Aa'
}
})
过滤器
-
过滤器:
vue 1.x内部提供提供了 10 个过滤器, 这10个过滤器是针对 数字 纸币符号 日期 大小写 小数位数等的格式化什么叫过滤器? 格式化数据的一个工具 过滤器一样也有两种声明形式 全局声明 Vue.filter(过滤器名称,回调函数) 回调函数中有一个参数value value值就表示的是格式化数据的值 局部声明 new Vue({ filters: { '过滤器名称': function( value ){ return } } })
过滤器的回调函数必须有返回值
如何使用使用过滤器?
我们用一个叫做管道符的来使用过滤器
举例:
数据 | 过滤器名称
<div id="app">
<p> {{ time | date('*') }} </p>
<p> {{ money | tomoney }} </p>
<p> {{ letter | touppercase }} </p>
<p> {{ decimal | todecimals }} </p>
</div>
Vue.filter( 'date', function ( val,type ) {
console.log(val)//1559013081925
var date = new Date( val )
return `¥${ date.getFullYear()} ${ type } ${ date.getMonth() + 1 } ${ type } ${ date.getDate() }`
})
new Vue({
el: '#app',
data: {
time: Date.now()
}
})
Vue.filter('tomoney',function(val){
return `¥ ${val}`
})
Vue.filter('touppercase',function(val){
return val.toUpperCase()
})
new Vue({
filters:{
todecimals: function(val){
console.log(val)
return val.toFixed(2);
}
},
el:'#app',
data:{
money: 7.26,
letter:'wwc',
decimal:0.66974552211
}
})
生命周期
-
生命是生命周期呢?
当前组件在创建到销毁经历的一系列过程,称之为生命周期 -
生命周期中钩子函数的触发条件是什么?
-
项目中如何使用?
-
名词解释:
钩子函数: 钩子函数就是options配置项中的一个方法,在特定的触发条件( 时机 )下会自动触发 -
除了根实例组件以外,其他的组件中的数据项 data 必须是一个函数,而且这个函数必须返回一个对象
为什么是函数呢?
原因:我们希望组件的数据是独立的,有一定作用域的
为什么返回值是对象?
原因: 是为了符合 数据驱动 原理设计,让observer将data选项中的数据设置 getter 和 setter -
其他选项一般写在生命周期的上
生命周期的分为几个阶段?每个阶段有哪些钩子函数
生命周期分为3个阶段,这三个阶段分别是: 初始化 、 运行中 、 销毁
初始化阶段:有4个钩子函数 , 触发条件是自动的
beforeCreate
1. 组件即将创建,进行组件事件和生命周期的初始化
2. 项目中一般不使用
3. 有的开发者也会在这里进行数据请求
created
1. 组件创建完成
2. 项目中:
1) 异步请求接口数据
2) 数据修改
beforeMount
1. 组件即将挂载
2. 判断根实例组件是否有el选项,如果没有,那么手动挂载,判断根实例组件中的其他子组件是否有template选项,如果没有,那么使用outerHTML插入
3. 项目中:
1) 异步请求接口数据
2) 数据修改
mounted
1. 组件挂载结束
2. 使用真实DOM替换VDOM
3. 项目中
1) 异步请求接口数据
2) 数据修改
3) 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化(静态数据渲染来的))总结: 初始化过程中在项目中使用 数据请求:created DOM操作: mounted 数据修改: beforeMount created mounted 运行中阶段:有2个钩子函数 : 触发条件是:
当data选项中的数据发生改变时
beforeUpdate:
内部操作 :vdom生成和diff的对比
我们可以不使用
updated
Rdom已经生成,可以进行异步数据请求得到的dom渲染的第三方库实例化
销毁阶段: 有2个钩子函数 就在Vue对象被破坏并从内存中释放之前
beforeDestory: 组件即将销毁,准备调用 $destroy() 方法
destoryed: 组件销毁结束
这两个钩子函数没有什么去别,功能很相似项目中: 这两个钩子函数都可以用来做善后,把一些计时器,第三方库实例化出来的实例 组件销毁的两种方式: 1. 使用$destroy()方法(内部销毁) 缺点: 会将组件的模板也保留下来 2. 使用开关销毁(外部销毁) v-if 这种类型的销毁不会留有模板 有一个钩子函数可以不写,这个钩子函数就是我们 render 函数
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div>
<button @click = 'destory'> 销毁 </button>
<input type="text" v-model = "money">
<h3> {{ money }} </h3>
</div>
</template>
Vue.component( 'Hello',{
template: '#hello',
data () { //除了根式
return {
money: 2000
}
},
methods: {
destory () {
this.$destroy()
}
},
//初始化
beforeCreate () {
/*
这个阶段:组件创建前
data data选项中的数据获取不到
RDOM 拿不到
项目中: 没什么用
但是这个阶段是一个对事件和生命周期的准备阶段,也是必不可少的
*/
console.log('1-beforeCreate')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
created () { // 组件创建结束
/*
这个阶段:
data data选项中的数据获到了
RDOM 拿不到
项目中:
数据的修改
异步数据请求
*/
this.money = 20000
console.log('2-created')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
beforeMount () { //组件即将挂载
/*
这个阶段:
data data选项中的数据获到了
RDOM 拿不到
项目中:
数据的修改
异步数据请求
*/
this.money = 10000000
console.log('3-beforeMount')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
mounted () { //组件挂载结束了
/*
这个阶段:
data: 可以获得数据
RDOM: 拿到了
项目中:
数据修改
异步数据请求
真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化(静态数据渲染来的) )
*/
document.querySelector('h3').style.background = 'red'
console.log('4-mounted')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
// ------------------------------------运行中---------------------
beforeUpdate () { //表示组件即将更新 vdom --diff--> vdom的不同(patch对象)
/*
这个阶段:
data: 拿到了
RDOM: 获得
这个阶段进行的是vdom的生成和diff算法的对比,都是内部进行的,我们在项目中可以不使用
*/
console.log(' 1- beforeUpdate ')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
updated () { // 组件更新结束 , 通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新
/*
这个阶段:
动态数据的渲染,进行dom操作( 第三方库的实例化 )
*/
document.querySelector('h3').style.background = 'blue'
console.log(' 2- updated ')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
// --------------------------------------销毁 -------------
beforeDestroy () {
console.log( 'beforeDestroy ')
},
destroyed () {
console.log( 'destroyed')
}
})
new Vue({
// el: '#app',
data: {
msg: 'hello 1902'
}
}).$mount('#app')