vue自定义指令

1.自定义指令:

Vue.js中,除了预定义的13个指令外,还允许用户自定义扩展指令。

 

创建自定义指令:

①Vue.directive("指令名",{   

       inserted(el){//当元素被加载到DOM树触发...

       el为当前一个写有v-指令的DOM元素对象

       函数中,执行原生的DOM API                 

      }

})

②强调:'指令名'不用加v-前缀!只有在v-html中使用,才加前缀

 

使用自定义指令:

①<any    v-指令名></any>

②强调:必须前边加v-

 

自定义指令本质:是一个包含一组钩子函数的对象

什么是钩子函数:一个对象的不同生命时期的某个时刻,会自动调用的函数---称为"生命周期钩子函数"

 

①为什么:对象在生命周期的某个阶段,可能都需要我们帮助完成一些特殊功能。

②只要希望在对象的生命周期中某个阶段,对对象执行一些操作时

③如何:指令的选项对象提供了如下生命周期钩子函数:---了解

    (1)bind:当自定义指令绑定到元素上时调用

    (2)inserted:当绑定了自定义指令的元素插入到DOM时自动调用。

    (3)update:元素绑定的数据发生了更新时自动调用。

    (4)componentUpdated:元素的子组件发生更新时自动调用

    (5)unbind:元素与自定义指令解除绑定时调用。

 

2.过滤器(Filter):

什么是:在接收原始数据后,执行再加工。

强调:vue官方没有提供任何预定义过滤器,只能自定义。

何时:有些数据,经常需要加工后再显示给用户时

如何:

①创建自定义过滤器:

   Vue.filter("过滤器名",function(val){

        ....val 接收当前要处理的模型数据的原始值

        return .... ;

   })

②使用自定义过滤器

方法1:{{数据:过滤器名}}

方法2:<any  :title="数据 | 过滤器名">

③创建带参数过滤器

定义带参数过滤器:

Vue.filter('过滤器名',function(val,参数1,...){ 

       ...val接收当前要处理的模型数据的原始值

       return ....;

  })

强调:过滤器可以像管道一样拦截起来,先后执行   {{数据 | 过滤器1 | 过滤器2 | ...}}

原文地址:https://www.cnblogs.com/sna-ling/p/13190111.html