从零开始学习Vue（五）| 一起学系列

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

• 自定义全局指令
  • 指的是可以被任意Vue实例或组件使用的指令
  • Vue.directive('自定义属性名称',{参数对象})
• 自定义局部指令
  • 指的是可以在当前Vue实例或组件内使用的指令
• 过滤器
  • 过滤器用于进行文本内容格式化处理
  • 过滤器可以在插值表达式和v-bind中使用
  • 全局过滤器
    • 可以在任意Vue实例中使用
    • 使用方法
    • 可以将一个数据传入到多个过滤器中进行处理
      
    • 一个过滤器可以传入多个参数
      
  • 局部过滤器
    • 只能在当前Vue实例中使用
  • 也可以使用多个过滤器，传递多个参数
  • 当全局过滤器和局部过滤器重名时，局部过滤器会生效
• 计算属性
  • Vue.js的视图不建议书写复杂逻辑，这样不利于维护
    
  • 封装函数是很好的方式，但有时重复的计算会消耗不必要的性能
    
  • 核心问题：提高计算执行效率。计算属性使用时为属性形式，访问时会自动执行对应函数
  • methods与computed区别
    • computed具有缓存型，methods没有
    • computed通过属性名访问，methods需要调用
    • computed仅适用于计算操作
• 计算属性的案例
  • 准备一个数组，根据数组数据创建列表；要求：当数据大于10时创建li，否则不创建
  • v-if与v-for结合：不推荐v-if与v-for同时应用于同一个元素，执行效率低
  • v-for与methods结合：函数被调用了多次，影响性能，只适用于使用一次
  • v-for与computed属性结合
• 计算属性的setter
  • 计算属性默认只有getter，Vue.js也允许给计算属性设置setter
  • 示例代码

本期的内容就到这里啦！让我们明天一起继续学习Vue.js吧!