VUE复习了解-02

1、过滤器

如果私有过滤器和全局过滤器名称一致,优先调用私有过滤器。

自定义全局过滤器

VUE复习了解-02

自定义局部过滤器

VUE复习了解-02

2、padStart() or padEnd()方法使用

ES6新增方法。

如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。

x'.padStart(5, 'ab') // 'ababx'

'x'.padStart(4, 'ab') // 'abax'

 

'x'.padEnd(5, 'ab') // 'xabab'

'x'.padEnd(4, 'ab') // 'xaba'

3、自定义指令

自定义全局指令

Vue.directive()定义全局指令 

参数1:指令的名称,在定义的时候不要加上v- 前缀

但是在调用的时候要加上 v-前缀进行调用

参数2:是一个对象,关于指令的相关操作

VUE复习了解-02

VUE复习了解-02

自定义私有指令

VUE复习了解-02

/**************************************************************** 简写模式 **************************************************************/

VUE复习了解-02

4、生命周期

(1)beforeCreate   //表示实例完全被创建出来,data和methods中的数据还没有初始化。

(2)created   //data 和 methods 都已经初始化了。

(3)beforeMount() //模板已经在内存中编译完成了,但是还没有渲染到页面中

(4)mounted() //内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面。 

(5)beforeUpdate //当执行beforeUpdate的时候,页面中的显示的数据,还是旧的,此时data数据是最新的。页面还没和数据保持同步。

(6)update //update事件执行的时候,页面和data数据已经保持同步了,都是最新的。

  (7) beforeDestroy //Vue实例已经从运行阶段,进入到了销毁阶段。实例身上所有data和所有methods,已经过滤器、指令都可用状态,此时,还没有真正执行销毁的过程。

(8)destroyed //组件已经被完全销毁了。此时,组件中所有的数组、方法、指令、过滤器都已经不可用。