vue知识集锦(三）

2019-09-25 本文已影响0人鸡毛菜菜子

自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。自定义指令可以操作DOM，并且是可复用的。

自官网https://cn.vuejs.org/v2/guide/custom-directive.html

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind、inserted、update、componentUpdated、unbind。指令钩子函数有以下这些参数el、binding、vnode 和 oldVnode。其中binding包含以下属性name、value、oldValue、expression、arg、modifiers。除了 el 之外，其它参数都应该是只读的，切勿进行修改。指令的参数可以是动态的例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

自定义指令最常见的用法

1、在图片未完成加载前，用随机的背景色占位，图片加载完成后才直接渲染出来。

2、自定义指令的第二用处是用于集成第三方插件。

比如写文档通常会用到highlight.js，我们可以直接将其封装为一个自定义指令，这样highlight.js就变成了Vue的一个新功能

但凡遇到第三方插件如何与Vue.js集成的问题，都可以尝试用自定义指令实现

渲染函数

render 函数即渲染函数，它是个函数，它的参数也是个函数——即 createElement。用于需要写大量重复代码的插槽上。

https://blog.csdn.net/sansan_7957/article/details/83014838

过滤器

简单介绍一下过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从['abc','abd','ade']数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变成‘Hello World’，那么可用过滤器给值‘Hello’后面添加上‘ World’；或者把时间节点改为时间戳等等都可以使用过滤器。