Vue中过滤器及自定义插件
想不出来，把官方的拿过来vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示，管道是指 ' | '(回车键上方)，又分为局部过滤器和全局过滤器，语法请客官往下走
全局过滤器语法的话就是:
import Vue from 'vue'Vue.filter('过滤器名称',(value)=>{
console.log(value)
return ''
/**
*value就是在哪里插入，就是哪里的文本
*过滤器中必须返回一个结果，就是对该文本的操作
*
*/
})局部过滤器语法:
data () {
return {
}
},
// 局部过滤器
filters:{
/**
*
*函数写法，支持es6
*函数名字就是过滤器名称
*函数中有一个形参，就是想要操作的文本
*
*/
myFilter(value){
return ''
//就和全局过滤器一样
}
}
在组件中使用:
<div>{{ data中定义的数据 | 定义的过滤器名称 }}</div>
<!-- v-bind中是这样 -->
<div v-bind:id="id | 过滤器名称"></div>
<!--多个使用时是这样的 {{ data | FilterA | FilterB }}-->
<!--还可以接收参数，因为filter本身就是一个函数 像这样{{ data | FilterA('asd',nm) }}-->
相信大家一定用过ui组件库，那么肯定就见过Vue.use()，那么这个use到底是做什么的呢？？？？ 我也不知道，尬不尬，这属于Vue的源码解析，管他呢，能use一个plugin插件就行，就和Vue.use(elementui)这种组件库,我们开始吧
搬运我们黑马社区的讲解：
①：Vue.use是通过initUse这个方法初始化的 ，Vue.use接受一个参数plugin，方法检测了installedPlugins这个数组中是否已经包含想要注册的组件，可知插件只允许被注册一次，二次注册是无效的。
②：调用toArray将转入的参数转换成数组
③：把当前Vue对象this插入转化后的数组前
④：判断plugin中install是否是一个方法，如果是，则传入plugin及转化后的数组；此外，如果plugin本身就是一个方法，则传入转化后的数组，随后执行这个方法，由此可知Vue.use(插件)实际上会调用插件的install方法，并且调用use的时候是可以传参数的。
注：以上还可以知道，vue只会对plugin中的两种情况处理，即要么plugin中有install函数，要么plugin本身就是一个函数。
⑤：将注册后的插件推进installedPlugins，避免重复注册，返回当前实例，代码执行结束。这样写一个插件:
import comA from '@/components/coma.vue'
// 首先需要导出一个对象
export default {
//有一个函数，官方定义的，必须写，安装的英文 函数中有一个Vue的形参
install(Vue){
// 自定义指令 两种写法
Vue.directive('自定义指令名称',/** 可以写一个函数，也可以写一个对象，对象的好处可以调用其他api */{
// 有一个选项
inserted(el){
//el此时就是该元素
console.log(el)
}
}),
// 还可以加入公共组件的引入
Vue.component('com-a',comA)
}
}本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
