Vue 项目中添加全局过滤器以及全局混合mixin
可以在.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 值为对象的选项,例如 methods
, components
和 directives
,将被混合为同一个对象。 两个对象键名冲突时,取组件对象的键值对。
Vue.mixin({
methods:{
demo:function(){
alert(1);
}
}
});
在组件文件中可以直接this.demo(),调用demo函数
Vue 项目中添加全局过滤器以及全局混合mixin的更多相关文章
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- vue项目中添加百度地图功能及解决遇到的问题详解
第一步,在百度地图开放平台 申请密钥 (如果有密钥可以省略此步骤,朋友有也可以借) 地址:http://lbsyun.baidu.com/ 第二步,创建应用并填写表单(下面链接可参考) http:// ...
- 在vue项目中添加特殊字体
这里的特殊字体,指的是一般用户电脑未安装到本地的字体,要引入这样的字体,首先需要把字体文件下载下来. 就像上图这样的,ttf格式的,然后在项目里添加它. 然后我们在font.css里用@font-fa ...
- vue项目中添加单元测试
从网上找了很多例子关于单元测试,都是如何新建项目的时候的添加单元测试,用vue-cli中怎么添加,但是我的项目已经生成了,不能再一次重新初始化,这时如何添加单元测试,这里面遇到了好多坑,写在这里记录一 ...
- 在vue项目中添加一个html页面,开启本地服务器
在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...
- 在vue项目中添加全局提示框
1.写一个提示框组件:msg.vue (注明:这里用两个div的原因是成功和失败的提示不能用同一个div,因为他们可能紧接着出现,所以不能从始至终只有一个提示框在工作) 2.写一个调用此组建的js : ...
- vue 项目中添加阿里巴巴矢量图
1. 选择需要的图标,添加到购物车 2. 打开购物车,添加至我的项目 3. 打开项目列表 - 更多操作 - 编辑项目 修改FontClass/Symbol前缀,自定义一个名称,例如:v-icon-cu ...
- 在vue项目中添加eslint规则
自己配置脚手架时候如何安装eslint语法规则, 第一步安装 官方推荐的安装包如下 eslint eslint-config-standard eslint-plugin-standard eslin ...
- 在vue项目中如何添加eslint
随着vue的越做越好,更多的开发者选择使用vue,本篇记录如何在vue项目中添加eslint. 首先第一种就是在vue项目创建初始时就选择了创建,随着初始化一起代入到了项目当中,那么要是一开始觉得es ...
随机推荐
- 南阳 oj 表达式求值 题目35 数据结构 NYO题目链接
建议不会的看别人的代码自己在之上模拟一遍,仅仅要耐心模拟就会做出来 题目链接:http://acm.nyist.net/JudgeOnline/problem.php? pid=35 #incl ...
- C 标准库 - <limits.h>
C 标准库 - <limits.h> 简介 limits.h 头文件决定了各种变量类型的各种属性.定义在该头文件中的宏限制了各种变量类型(比如 char.int 和 long)的值. 这些 ...
- php性能监控扩展xhprof
XHProf是facebook开源出来的一个php轻量级的性能分析工具,跟Xdebug类似,但性能开销更低,还可以用在生产环境中,也可以由程序开 关来控制是否进行profile.总体来说是个不错的工具 ...
- 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 三.进入 ...
- 为什么应使用 Node.js
为什么应使用 Node.js JavaScript 高涨的人气带来了很多变化,以至于如今使用其进行网络开发的形式也变得截然不同了.就如同在浏览器中一样,现在我们也可以在服务器上运行 JavaScrip ...
- man screen
http://www.gnu.org/software/screen/manual/screen.html Screen User's Manual Next: Overview, Previous: ...
- MySQL安装过程中出现“APPLY security settings错误”的解决方式
***********************************************声明*************************************************** ...
- 去除input框的值
onfocus="this.value=' ';" <input type="text" name="buynum" id=" ...
- 多媒体开发之--- Live555 server 获取不到本地ip 全为0
今天把wis-streamer live555 移植到8148上面跑起来了,运行testOnDemandRTSPServer的时候发现,本地IP地址居然为0.0.0.0; 于是乎就跟踪调试了下,看看它 ...
- 谈谈加载(Loading)的那点事
谈谈加载(Loading)的那点事 2013/10/12 | 分类: 设计 | 0 条评论 | 标签: 交互设计, 加载 分享到:33 原文出处: 搜狐焦点 对于加载(loading),想必大家都不陌 ...