vue.js及项目实战[笔记]— 02 vue.js基础

一. 基础

1. 注册全局组件

• 应用场景：多出使用的公共性能组件，就可以注册成全局组件，减少冗余代码
• 全局APIVue.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.组件生命周期

• 需要频繁的创建和销毁组件
  • 比如页面中部分内容显示与隐藏，但是用的是v-if
• 组件缓存
  • 内置组件中keep-alive
  • 被其包裹的组件，在v-if=false的时候，不会被销毁，而是停用
  • v-if=true不会创建，而是激活
  • 避免频繁创建组件对象的性能损耗
• 成对比较
  • created 和 beforeCreate
    • A 可以操作数据 ，B 数据没有初始化
  • mounted 和 beforeMounte
    • A 可以操作DOM ，B 还未生成DOM
  • updated 和 beforeUpdate
    • A 可以获取最终数据 ， B 可以二次修改
  • 频繁销毁创建的组件使用内置组件<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')
}