出处http://blog.csdn.net/qq20004604

Vue插件

1、概述

简单来说,插件就是指对Vue的功能的增强或补充。

比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一段代码等

2、使用方法

总体流程应该是:

【声明插件】——【写插件】——【注册插件】——【使用插件】

写插件和声明插件是同步的,然后注册到Vue对象中(不用担心重复注册),最后在写Vue组件的时候使用写的插件

声明插件

先写一个js文件,这个js文件就是插件文件,里面的基本内容如下:

/*   说明:
* 插件文件:service.js
* 作者:王冬 QQ:20004604
* */
export default {
install: function (Vue, options) {
// 添加的内容写在这个函数里面
}
};

其中install的第一个参数Vue表示的是Vue的实例,第二个参数表示的是一些设置选项。

Vue实例好理解,就是Vue对象。

而options设置选项就是指,在调用这个插件时,可以传一个对象。

例如这个对象有一个属性float,然后在写插件的一个方法/变量时,我需要输出一个数字,然后写一个if判断语句,

假如options.float为true时,输出浮点数;

假如为false或undefined(即没传参)时,输出为整数。

具体怎么添加,之后再说。

注册插件

如果使用过Vue-router,就很好理解,通过import引入后,然后通过 Vue.use(插件名) 注册插件;

例如,我们通常在main.js里引入各种东西,并且组件的根实例也在这里

//main.js
import Vue from 'vue'
import App from './App.vue' //关键是这两行
import service from './service.js'
Vue.use(service) new Vue({
el: '#app',
render: (h) => h(App)
})

如代码中注释所说,关键是通过import导入service文件,然后在创建根组件之前,让Vue对象通过use方法来注册插件service。

通过这样简单的两步,就可以使用插件了。

3、写插件、使用插件

按照官方文档,写插件有四种方法,先给出官方的代码:

//以下内容都是添加到上面install的函数里面的

// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (options) {
// 逻辑...
}

先给出最常用的:【4. 添加实例方法】的写法和使用方法

3.1【添加实例方法或属性】

1、核心思想:

通过prototype来添加方法和属性。

2、写:

//让输出的数字翻倍,如果不是数字或者不能隐式转换为数字,则输出null
Vue.prototype.doubleNumber = function (val) {
if (typeof val === 'number') {
return val * 2;
} else if (!isNaN(Number(val))) {
return Number(val) * 2;
} else {
return null
}
}

3、用:

假设有这样一个组件:

<template>
<div>
{{num}}
<button @click="double">点击后让左边的数字翻倍</button>
</div>
</template>
<script>
export default{
data(){
return {
num: 1
}
},
methods: {
double: function () {
//这里的this.doubleNumber()方法就是上面写的组件里的方法
this.num = this.doubleNumber(this.num);
}
}
}
</script>

我们便可以通过点击button按钮,让num的值,在每次点击都翻倍了。

4、假如添加的是属性:

例如:

Vue.prototype.number = 1;

会发生什么事情呢?

1、不管是【按值传递类型】还是【按引用传递类型】,该变量都不会被不同组件所共享,更准确的说,假如有A、B两个组件。A组件里的number数值改变,B组件里的number数值是不会跟着改变的。因此不要想着引用这样一个变量,然后修改了A中的值,B里也自动跟着改变了;
2、当组件里没有该属性时,调用时,显示的是通过插件获取的值;
当组件里有该属性时,调用时,显示的是组件里该属性的值;
由此而推,函数也是这样的,组件里的同名函数总是会覆盖插件提供的函数。

3.2【添加全局方法或属性】

1、核心思想:

就是给Vue对象添加一个属性。

初次接触很容易和上面3.1弄混,实际上,3.1是给组件里使用的,而3.2是给Vue对象使用的。

例如,假如添加一个方法test(),那么:

通过3.1添加,是在组件里,通过this.test()来调用

通过3.2添加,是在外面,通过Vue实例,如Vue.test()来调用

2、写:

//放在哪里参考上面
Vue.test = function () {
alert("123")
}

3、用:

//注意先导入Vue对象才能使用
Vue.test()

使用时会执行对应的方法,比如这里就是alert弹窗

4、其他:

别问我如果和Vue本身属性同名会发生什么事情,我没试过=.=

3.3【注入组件】

1、核心思想:

就像写Vue组件时,那样写,方法名保持一致,其会在执行组件对应的方法名之前执行。

2、写:

例如:

Vue.mixin({
created: function () {
console.log("组件开始加载")
}
})

然后这里的代码会在每个组件(包括根组件)的created执行之前执行。

可以自行在每个组件的created方法里写一段console.log来查看测试

可以和【实例属性】配合使用,用于调试或者控制某些功能

// 注入组件
Vue.mixin({
created: function () {
if (this.NOTICE)
console.log("组件开始加载")
}
})
// 添加注入组件时,是否利用console.log来通知的判断条件
Vue.prototype.NOTICE = false;

【注入给非Vue实例本身就有的方法】:

假如是写给例如methods属性的某个方法,例如以下注入:

Vue.mixin({
methods: {
test: function () {
console.log("mixin test");
}
}
})

那么,组件里若本身有test方法,并 不会 先执行插件的test方法,再执行组件的test方法。

而是只执行其中一个,并且优先执行组件本身的同名方法。这点需要注意

3、用:

不需要手动调用,在执行对应的方法时会被自动调用的(并且先调用插件里的,再调用组件本身的)

4、其他:

1、如果同时有多个插件注入一个方法(例如created,那么会先执行先注入的那个方法,再依次执行后注入的,最后执行组件本身的)
2、注意,像methods属性下的方法,并不会在组件注入后每个都执行,而是只执行一个,并且优先执行组件本身的。

3.4【添加全局资源】

1、核心思想:

添加方法和正常添加方法类似,甚至几乎一样。

可以添加【自定义指令】、【过滤器】、【过渡等】,这里以【过滤器】为例

2、写:

//时间格式化过滤器,输入内容是number或者Date对象,输出是YYYY-MM-DD HH-MM-SS
Vue.filter('formatTime', function (value) {
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
return new Date(value).Format("yyyy-MM-dd hh:mm:ss");
})

3、用:

和正常使用一样用就行了,so easy。例如:

{{num|formatTime}}

4、其他:

可以用这个找各种有意思的功能,作为插件写好,然后需要的地方导入就行,超级方便!

4、示例demo

附一个有简单功能的示例demo,提供参考使用

/*  说明:
* 插件demo,供学习使用
* 本页面用于提供各种处理服务
* 作者:王冬 QQ:20004604
* */
export default {
install: function (Vue, options) {
// 1. 添加全局方法或属性
// 略 // 2. 添加全局资源
// 时间格式化过滤器,输入内容是number或者Date对象,输出是YYYY-MM-DD HH-MM-SS
Vue.filter('formatTime', function (value) {
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
return new Date(value).Format("yyyy-MM-dd hh:mm:ss");
}) // 2. 添加全局资源
// 添加注入组件时,是否利用console.log来通知的判断条件,也是组件实例属性
Vue.prototype.NOTICE = true; // 3. 注入组件
// 注入组件,插件加载开始前提示
Vue.mixin({
created: function () {
if (this.NOTICE)
console.log("组件开始加载")
},
methods: {
test: function () {
console.log("mixin test");
}
}
}) // 4. 添加实例方法
// 返回数字是输入数字的两倍,如果不是数字或者不能隐式转换为数字,则输出null
// 组件实例方法
Vue.prototype.doubleNumber = function (val) {
if (typeof val === 'number') {
return val * 2;
} else if (!isNaN(Number(val))) {
return Number(val) * 2;
} else {
return null
}
} // 4. 添加实例方法
// 服务组,将实例方法整合到$service中,避免命名冲突
Vue.prototype.$service = {
//电话号码合法性检查
telNumberCheck: function (tel) {
var pattern = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
return pattern.test(tel)
}
}
}
};

Vue插件写、用详解(附demo)的更多相关文章

  1. 纯真IP数据库格式详解 附demo

    纯真版IP数据库,优点是记录多,查询速度快,它只用一个文件QQWry.dat就包含了所有记录,方便嵌入到其他程序中,也方便升级.缺点是你想要编辑它却是比较麻烦的,由于其文件格式的限制,你要直接添加IP ...

  2. 【转】JQuery上传插件Uploadify使用详解及错误处理

    转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...

  3. dva框架使用详解及Demo教程

    dva框架的使用详解及Demo教程 在前段时间,我们也学习讲解过Redux框架的基本使用,但是有很多同学在交流群里给我的反馈信息说,redux框架理解上有难度,看了之后还是一脸懵逼不知道如何下手,很多 ...

  4. linux管道命令grep命令参数及用法详解---附使用案例|grep

    功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...

  5. laravel5.5的任务调度(定时任务)详解(demo)

    https://blog.csdn.net/LJFPHP/article/details/80417552 laravel5.5的定时任务详解(demo) 这篇文章写得挺详细的.看了它我基本就会用了 ...

  6. jQuery插件制作方法详解

        jQuery插件制作方法详解   jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...

  7. Vue组件通信方式全面详解

    vue组件通信方式全面详解 众所周知,Vue主要思想就是组件化开发.因为,在实际的项目开发中,肯定会以组件的开发模式进行.形如页面和页面之间需要通信一样,Vue 组件和组件之间肯定也需要互通有无.共享 ...

  8. openlayers3教材详解及demo(完整)

            openlayers3教材详解及demo(完整)        OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计.版本2虽然被广泛使用,但从JavaScri ...

  9. Vue.js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  10. redux-saga框架使用详解及Demo教程

    redux-saga框架使用详解及Demo教程 前面我们讲解过redux框架和dva框架的基本使用,因为dva框架中effects模块设计到了redux-saga中的知识点,可能有的同学们会用dva框 ...

随机推荐

  1. zabbix通过简单命令监控elasticsearch集群状态

    简单命令监控elasticsearch集群状态 原理: 使用curl命令模拟访问任意一个es节点可以反馈的集群状态,集群的状态需要为green curl -sXGET http://serverip: ...

  2. Android开源动画库nineoldandroids

    项目官网地址:http://nineoldandroids.com/ 使用这个库的原因是android3.0之后出了新的animation API,但是android3.0以下的不支持 这个库完成了这 ...

  3. Ex 6_9 某个字符串处理语言提供了一个将字符串一分为二的基本操作..._第六次作业

    设字符串的长度为n,整型数组arr[0. . .n-1]的第一个数和最后一个数为开始点与结束点的位置,中间的数为拆分点的位置,设cost[i,j]为第i个分割点到第j个分割点的最小代价,两个分割点之间 ...

  4. Java基础95 过滤器 Filter

    1.filter 过滤器的概述 filter过滤器:是面向切面编程的一种实现策略,在不影响原来的程序流程的前提下,将一些业务逻辑切入流程中,在请求达到目标之前进行处理,一般用于编码过滤.权限过滤... ...

  5. 【ES】代码例子

    #!/usr/bin/env python #coding=utf-8 from elasticsearch import Elasticsearch from elasticsearch_dsl i ...

  6. each()遍历

    在<jQuery教程/理解选取更新范围>一节中,我们知道:当选择器返回了多个元素时,可以使用一个方法来更新所有的元素,不再需要使用循环. 然后有的时候需要遍历元素,怎么办? 使用each( ...

  7. CentOS 上安装 nodejs v11.0.0

    下载 nodejs 淘宝 nodejs 镜像地址:https://npm.taobao.org/mirrors/node wget 命令下载: wget https://npm.taobao.org/ ...

  8. 【C++ Primer 第10章】 1.概述(算法总结)

    泛型算法 find(vec.beign(), vec.end(), val) //返回指向第一个给定值的元素的迭代器 count(vec.bengin(), vec.end(), val) //返回给 ...

  9. (第1篇)什么是hadoop大数据?我又为什么要写这篇文章?

    摘要: hadoop是什么?hadoop是如何发展起来的?怎样才能正确安装hadoop环境? 这些天,有很多人咨询我大数据相关的一些信息,觉得大数据再未来会是一个朝阳行业,希望能尽早学会.入行,借这个 ...

  10. AOJ 2170 Marked Ancestor[并查集][离线]

    题意: 给你一颗N个节点的树,节点编号1到N.1总是节点的根.现在有两种操作: M v: 标记节点v Q v: 求出离v最近的标记的相邻节点.根节点一开始就标记好了. 现在给一系列操作,求出所有Q操作 ...