一. 基础
1. 注册全局组件
- 应用场景:多出使用的公共性能组件,就可以注册成全局组件,减少冗余代码
- 全局API
Vue.component('组件名','组件对象')
2.附加功能:过滤器&监视改动
- filter || filters
- 全局过滤器(给数据添油加醋显示):
Vue.filter('过滤器名',过滤器方式fn)
- 组件内过滤器
filters:{'过滤器名',过滤器方式fn}
- 将数据进行添油加醋的操作
- 过滤器分为两种
- 1.组件内的过滤器(组件内有效)
- 2.全局过滤器(所有组件共享)
- 先注册,后使用
- 组件内
filters:{过滤器名:过滤器fn}
最终fn内通过return产出最终的数据
- 使用方式是
{{原有数据|过滤器名}}
- 需求
- 页面input框输入字符串,反转字符串输出,按参数显示label(中英文)
- 过滤器fn:
- 声明
function(data,argv1,argv2...){}
- 使用
{{数据|过滤器名(参数1,参数2)}}
- watch监视单个
- computed 监视多个
- computed:{监视的业务名:funcion(){ return 显示一些内容 }}
**总结**
* 全局:组件/过滤器,让大家直接使用,全局不带s
* 过滤器:function(原始数据,参数1,参数2){ return 结果; }
** 调用{{'数据' | 过滤器名(参数1,参数2)}}
* watch单个监视
* computed群体监视
3.slot
- 内置的组件
- slot就是子组件里给DOM留下的坑
- <子组件>DOM<子组件>
- slot动态的DOM、props是动态的数据
4.组件生命周期
- 需要频繁的创建和销毁组件
- 组件缓存
- 内置组件中
keep-alive
- 被其包裹的组件,在v-if=false的时候,不会被销毁,而是停用
- v-if=true不会创建,而是激活
- 避免频繁创建组件对象的性能损耗
- 成对比较
- created 和 beforeCreate
- mounted 和 beforeMounte
- updated 和 beforeUpdate
- 频繁销毁创建的组件使用内置组件
<keep-alive></keep-alive>
包裹
activated(){ // 激活的keep-alive v-if="true"
console.log('activated')
},
deactivated(){ // 停用的keep-alive v-if="false"
console.log('deactivated')
},
beforeDestroy(){ // 销毁前 v-if="false"
console.log('beforeDestroy')
},
destroy(){ // 销毁后 v-if="false"
console.log('destroy')
}