vue接口,过滤器,生命周期

1.slot
作用: 可以让我们在组件中书写内容
举例:

2.trabsition
vue中实现过渡或是动画一共提供了这样四种形式:
在 CSS 过渡和动画中自动应用 class — 自己写css3动画
可以配合使用第三方 CSS 动画库,如 Animate.css – 别人写好了类名,我们用
在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原生js来写动画
可以配合使用第三方 JavaScript 动画库,如 Velocity.js – 用别人写好的动画库

  1. vue只要一使用transition组件就会自动添加6个类名 和 8 个钩子函数
  2. transition组件如果有name选项,就可以将类名 v- 换成 ‘name’- 类名
  3. 使用第三方的css过渡库 animate.css

3.动态组件:
动态组件是vue内部提供了一个叫做component的组件,这个组件身上可以通过绑定is属性来进行 组件的切换
keep-alive组件可以进行组件的内容缓存,将组件的内容存入浏览器缓存中,这样可以大大的节省街切换的事件

keep-alive 和 component动态组件两者常常一起搭配使用

4.过滤器
vue 1.x内部提供提供了 10 个过滤器, 这10个过滤器是针对 数字 纸币符号 日期 大小写 小数位数等的格式化
什么叫过滤器?
格式化数据的一个工具
举例: 12.22225 —> 12.2
Tue May 28 2019 10:15:08 GMT+0800 (China Standard Time) – > 2019/05/28
过滤器一样也有两种声明形式
全局声明
Vue.filter(过滤器名称,回调函数) 回调函数中有一个参数value
value值就表示的是格式化数据的值
局部声明
new Vue({
filters: {
‘过滤器名称’: function( value ){
return
}
}
})
过滤器的回调函数必须有返回值
如何使用使用过滤器?
我们用一个叫做管道符的来使用过滤器
举例:
数据 | 过滤器名称

5.生命周期:

  1. 什么是生命周期呢?
    当前组件在创建到销毁经历的一系列过程,称之为生命周期
  2. 生命周期的分为几个阶段?每个阶段有哪些钩子函数
    生命周期分为3个阶段,这三个阶段分别是: 初始化 、 运行中 、 销毁
    初始化阶段:有4个钩子函数 , 触发条件是自动的
    beforeCreate
  3. 组件即将创建,进行组件事件和生命周期的初始化
  4. 项目中一般不使用( 兵哥 )
  5. 有的开发者也会在这里进行数据请求
    created
  6. 组件创建完成
  7. 项目中:
    1) 异步请求接口数据
    2) 数据修改
    beforeMount
  8. 组件即将挂载
  9. 判断根实例组件是否有el选项,如果没有,那么手动挂载,判断根实例组件中的其他子组件是否有template选项,如果没有,那么使用outerHTML插入
  10. 项目中:
    1) 异步请求接口数据
    2) 数据修改
    mounted
  11. 组件挂载结束
  12. 使用真实DOM替换VDOM
  13. 项目中
    1) 异步请求接口数据
    2) 数据修改
    3) 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化(静态数据渲染来的) )

总结: 初始化过程中在项目中使用
数据请求:created
DOM操作: mounted
数据修改: beforeMount created mounted
运行中阶段:有2个钩子函数 : 触发条件是: 当data选项中的数据发生改变时
beforeUpdate:
内部操作 : vdom生成和diff的对比
我们可以不使用
updated
Rdom已经生成,可以进行异步数据请求得到的dom渲染的第三方库实例化
销毁阶段: 有2个钩子函数
beforeDestory: 组件即将销毁,准备调用 $destroy() 方法
destoryed: 组件销毁结束

这两个钩子函数没有什么去别,功能很相似

项目中:
这两个钩子函数都可以用来做善后,把一些计时器,第三方库实例化出来的实例

组件销毁的两种方式:

  1. 使用$destroy()方法(内部销毁)
    缺点: 会将组件的模板也保留下来
  2. 使用开关销毁(外部销毁)
    v-if
    这种类型的销毁不会留有模板

有一个钩子函数可以不写,这个钩子函数就是我们 render 函数

  1. 生命周期中钩子函数的触发条件是什么?
  2. 项目中如何使用?
  3. 名词解释:
    钩子函数: 钩子函数就是options配置项中的一个方法,在特定的触发条件( 时机 )下会自动触发
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值