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

2022-03-07 01:00:07 阅读：179 来源： 互联网

标签：es6 插件自定义 format -- replace 指令过滤器

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(){}
}

标签：es6,插件,自定义,format,--,replace,指令,过滤器
来源： https://www.cnblogs.com/cc-font/p/15974318.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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