可以在.vue文件中定义局部使用的过滤器

export default{

  data(){

    return []
  },   filters:{     toUpperCase:function(value){       return value.toUpperCase();
    }  
  } }

如果希望所有的.vue文件都可以使用就可以注册全局过滤器

  Vue.filter('toUpperCase',function(value){

    return value.toUpperCase();
  });  

如果过滤器比较多,可以把所有的过滤器统一写在一个js文件中,再在main.js文件中引入

filter.js

let toUpperCase=value=>{

  return value.toUpperCase();
}
let toLowerCase=value=>{   return value.toLowerCase();
} export {toUpperCase,toLowerCase}

main.js

import * as filters from 'filter.js'

Object.key(filters).each(filter=>{

  Vue.filter(filter,filters[filter]);

});

添加混合mixin

混合是一种灵活的分布式复用Vue组件的方式。混合对象可以包含任何组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件的选项。

1当组件与混合对象含有同名的选项时,这些选项将以恰当的方式混合。

1 同名钩子函数将混合为一个数组,因此都将被调用。另外,混合对象的钩子将在组件自身钩子之前调用

2 值为对象的选项,例如 methodscomponents 和 directives,将被混合为同一个对象。 两个对象键名冲突时,取组件对象的键值对。

Vue.mixin({

  methods:{

    demo:function(){

      alert(1);

    }

  }

});

在组件文件中可以直接this.demo(),调用demo函数

Vue 项目中添加全局过滤器以及全局混合mixin的更多相关文章

  1. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  2. vue项目中添加百度地图功能及解决遇到的问题详解

    第一步,在百度地图开放平台 申请密钥 (如果有密钥可以省略此步骤,朋友有也可以借) 地址:http://lbsyun.baidu.com/ 第二步,创建应用并填写表单(下面链接可参考) http:// ...

  3. 在vue项目中添加特殊字体

    这里的特殊字体,指的是一般用户电脑未安装到本地的字体,要引入这样的字体,首先需要把字体文件下载下来. 就像上图这样的,ttf格式的,然后在项目里添加它. 然后我们在font.css里用@font-fa ...

  4. vue项目中添加单元测试

    从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一 ...

  5. 在vue项目中添加一个html页面,开启本地服务器

    在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...

  6. 在vue项目中添加全局提示框

    1.写一个提示框组件:msg.vue (注明:这里用两个div的原因是成功和失败的提示不能用同一个div,因为他们可能紧接着出现,所以不能从始至终只有一个提示框在工作) 2.写一个调用此组建的js : ...

  7. vue 项目中添加阿里巴巴矢量图

    1. 选择需要的图标,添加到购物车 2. 打开购物车,添加至我的项目 3. 打开项目列表 - 更多操作 - 编辑项目 修改FontClass/Symbol前缀,自定义一个名称,例如:v-icon-cu ...

  8. 在vue项目中添加eslint规则

    自己配置脚手架时候如何安装eslint语法规则, 第一步安装 官方推荐的安装包如下 eslint eslint-config-standard eslint-plugin-standard eslin ...

  9. 在vue项目中如何添加eslint

    随着vue的越做越好,更多的开发者选择使用vue,本篇记录如何在vue项目中添加eslint. 首先第一种就是在vue项目创建初始时就选择了创建,随着初始化一起代入到了项目当中,那么要是一开始觉得es ...

随机推荐

  1. 南阳 oj 表达式求值 题目35 数据结构 NYO题目链接

     建议不会的看别人的代码自己在之上模拟一遍,仅仅要耐心模拟就会做出来 题目链接:http://acm.nyist.net/JudgeOnline/problem.php? pid=35 #incl ...

  2. C 标准库 - <limits.h>

    C 标准库 - <limits.h> 简介 limits.h 头文件决定了各种变量类型的各种属性.定义在该头文件中的宏限制了各种变量类型(比如 char.int 和 long)的值. 这些 ...

  3. php性能监控扩展xhprof

    XHProf是facebook开源出来的一个php轻量级的性能分析工具,跟Xdebug类似,但性能开销更低,还可以用在生产环境中,也可以由程序开 关来控制是否进行profile.总体来说是个不错的工具 ...

  4. redis 3.0.1 在CentOS上的安装

    一.下载 wget http://download.redis.io/releases/redis-3.0.1.tar.gz 二.解压 tar xzf redis-3.0.1.tar.gz 三.进入 ...

  5. 为什么应使用 Node.js

    为什么应使用 Node.js JavaScript 高涨的人气带来了很多变化,以至于如今使用其进行网络开发的形式也变得截然不同了.就如同在浏览器中一样,现在我们也可以在服务器上运行 JavaScrip ...

  6. man screen

    http://www.gnu.org/software/screen/manual/screen.html Screen User's Manual Next: Overview, Previous: ...

  7. MySQL安装过程中出现“APPLY security settings错误”的解决方式

    ***********************************************声明*************************************************** ...

  8. 去除input框的值

    onfocus="this.value=' ';" <input type="text" name="buynum" id=" ...

  9. 多媒体开发之--- Live555 server 获取不到本地ip 全为0

    今天把wis-streamer live555 移植到8148上面跑起来了,运行testOnDemandRTSPServer的时候发现,本地IP地址居然为0.0.0.0; 于是乎就跟踪调试了下,看看它 ...

  10. 谈谈加载(Loading)的那点事

    谈谈加载(Loading)的那点事 2013/10/12 | 分类: 设计 | 0 条评论 | 标签: 交互设计, 加载 分享到:33 原文出处: 搜狐焦点 对于加载(loading),想必大家都不陌 ...