欢迎光临
我的个人博客网站

Vue组件开发中过滤器以及自定义插件

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)
            // 更多选项请上https://cn.vuejs.org/v2/api/#Vue-directive查看 } }),
  // 还可以加入公共组件的引入


  Vue.component('com-a',comA) } }

 

 

      

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue组件开发中过滤器以及自定义插件
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏