开发插件
插件通常会为 Vue 添加全局功能。插件的范围没有限制—一般有下面几种:
- 添加全局方法或者属性,这个还是比较常用的。
- 添加全局资源:指令/过滤器/过度等。
- 通过全局 mixin 方法添加一些组件选项。
- 添加 Vue 实例方法,通过把他们添加到 Vue.prototype 上实现。
- 一个库,提供自己的 API ,同事提供上面提到的一个或多个功能。
Vue.js 的插件有一个公开方法 install
。这个方法的第一个参数是 Vue
构造器,第二个参数是一个可选的选项对象:
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
添加实例方法或属性
核心思想是:通过
prototype
来添加方法和属性。
写一个最常见的公用方法,日期时间的格式化:
dataUtil.js
import moment from 'moment';
/*获取日期的标准化格式*/
function getStandardDate(val){
if(val==undefined) return '';
if(val==null||val=='') return '';
return moment(val).format("YYYY-MM-DD");
}
/*获取时间的标准化格式*/
function getStandardTime(val){
if(val==undefined) return '';
if(val==null||val=='') return '';
return moment(val).format("YYYY-MM-DD HH:mm:ss");
}
export default{
getStandardDate:getStandardDate,
getStandardTime:getStandardTime
};
main.js
import utilDate from './util/dateUtil'
Vue.prototype.utilDate=utilDate;
在组件中调用该方法就是
this.utilDate.getStandardDate(val)
this.utilDate.getStandardTime(val)
添加全局方法或属性
核心思想:就是给 Vue 对象添加一个方法或属性。
和“添加实例方法或属性”区别是,添加实例方法或属性是给组件内部使用的,相当于组件Methods里定义的方法,而添加全局方法或属性是给Vue对象使用的。
例如:有一个方法test(),那么:
通过添加实例方法或属性添加,是在组件里,通过this.test()来调用
通过添加全局方法或属性添加,是在外面通过Vue实例,如Vue.test()来调用
- 写:
Vue.test= function (){ alert(2) }
- 用:
Vue.test()
添加全局资源
和正常方法类似,甚至几乎一样,可以添加【自定义指令】【过滤器】【过渡】等,这里以【过滤器】为例
main.js
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
你可以在一个组件的选项中定义本地的过滤器:
//把字母字符串的第一个字母转化为大写
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
或者在创建 Vue 实例之前全局定义过滤器:
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
注入组件
核心思想:就像写Vue组件时,那样写,方法名保持一致,其会在执行组件对应的方法名之前执行,或者不需要这种需求,只是简单注入到各个组件methods中.但在实际项目中用到的比较少.