基于vue2 自定义过滤器和自定义指令（replace的es6替换值用法）

本文主要是介绍基于vue2 自定义过滤器和自定义指令（replace的es6替换值用法），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.使用场景在，有数据时间或者数据是不适宜展示的内容，就可以使用过滤器来去修改展示的数据而不去改变原有的数据去过滤。

属性filters就是一个vue用于定义方法过滤器（替换相当于replace()原理实现）

//自定义过滤器
{{p.st | dateFormat('MM月DD日 hh时')}} //第一个是形参传递，给第二个方法过滤的值
//自定义指令:v-format指令的名字是:format
<div class="time" v-format:red.16="p.et">提货时间:{{p,et}}</div>
<div class="time" v-format:click.16="p.et">提货时间:{{p.et}}</div>
//这样的指令通过绑定值就会对显示的指令值进行过滤

'MM月DD日'.replace(/(MM)|(DD)/g,function(_s){
     if(_s === 'MM') return '09'
     if(_s === 'DD') return '01'
})
// '09月01日'
//这样的替换原理是replace方法带有两个参数是原替换新的方法参数构成（也是过滤器方法）
//根据正则或者去匹配字符返回，这是ES6的特点用法

//replaceall()是不同于它的替换第一个，而all是指所有匹配字符去替换

vue的过滤器属性写法有两种，一种是全局注入方法，和页面级过滤器。

注册全局插件，插件中可以有过滤器，指令，全局组件

需要去引入再进行实例vue注册

import Components from './components'
Vue.use(Components)
//在之前需要写好的插件进行导出使用

//插件是有两种定义方法：函数插件、对象插件
//在插件里，所有的全局注册都是需要一个一个的去注册，不能一次性注册多个
funcrion plugin(VueConstructor){
  //注册一个过滤器 -- 第一个参数是过滤器的名字，第二个参数是过滤器的实现方法
VueConstructor.filter('dateFormat',dateFormat)
  //注册一个指令 -- 第一个是指令的名字，第二个参数是过滤器的实现方法，也可以是一个对象（实现指令的生命周期）
//VueConstructor.directive('format',{
 inserted(el,bindData,newDom,oldDom){
  //可以调用通用方法来获取事件
  let res=dateFormat(bindDate.value,'MM月DD日 hh时mm分')
 //它是把所有的东西都给到开发，需要开发区对虚拟dom进行渲染等控制
 //还可以给元素赋值
  el.innerText=`提货事件:${res}`
}
})
}
//导出默认插件对象
export default plugin

在自定义指令时一般在复杂的组件开发的时候才会用到

指令也是有生命周期的 -- beforeMount、mounted、beforeUpdate、updated、beforeDestory

可以使用对象的形式来进行指令开法

自定义指令--- directives属性

指令方法五个形参：元素标签对象，指令数据对象，更新后的虚拟dom对象，更新前的虚拟dom对象

format(el,bindData,newDom,oldDom)

2.自定义指令是在复杂组件开发的时候使用

format:{
  //bind钩子函数 -- 指令和元素进行挂载绑定 -> beforeMount
  bind(){
},
 //相当于mounted生命周期 - - 常用的生命周期
 inserted(el,bindData){
 //bindData对象时绑定到指令的所有数据
 //这就需要获取
}
  update(){},
  //组件完成更新后的生命周期 -- 常用生命周期
  componentUpdated(){},
  //它常用在解绑的时候对事件绑定进行注销等业务 
  unbind(){}
}

这篇关于基于vue2 自定义过滤器和自定义指令（replace的es6替换值用法）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！