Vue插件编写、用法详解(附demo)
Vue插件编写、用法详解(附demo)
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)的更多相关文章
- linux管道命令grep命令参数及用法详解---附使用案例|grep
功能说明:查找文件里符合条件的字符串. 语 法:grep [-abcEFGhHilLnqrsvVwxy][-A<显示列数>][-B<显示列数>][-C<显示列数>] ...
- Vue 国际化 vue-i18n 用法详解
vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n 兼容性: 支持 Vue.js 2.x 以上版本 安装方法:(此处只演示 npm) npm insta ...
- jQuery插件编写步骤详解
如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...
- linux wget 命令用法详解(附实例说明)
Linux wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,尤其对于网络管理员,经常要下载一些软件或从远程服务器恢复备份到本地服务器 Linux wget是一个下 ...
- 纯真IP数据库格式详解 附demo
纯真版IP数据库,优点是记录多,查询速度快,它只用一个文件QQWry.dat就包含了所有记录,方便嵌入到其他程序中,也方便升级.缺点是你想要编辑它却是比较麻烦的,由于其文件格式的限制,你要直接添加IP ...
- Vue props用法详解
Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数 ...
- Vue1.0用法详解
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 ...
- 2020了你还不会Java8新特性?(五)收集器比较器用法详解及源码剖析
收集器用法详解与多级分组和分区 为什么在collectors类中定义一个静态内部类? static class CollectorImpl<T, A, R> implements Coll ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
随机推荐
- flask的配置项及获取
1 修改/新增配置项的3种方法 # 配置参数的使用方式 # 1. 使用配置文件 # app.config.from_pyfile("config.cfg") # 2. 使用对象配置 ...
- Android 连接.net WebService 工具类代码
安卓代码: import android.os.Handler;import android.os.Message; import org.ksoap2.SoapEnvelope;import org ...
- Java基础-异常处理机制 及异常处理的五个关键字:try/catch/finally/throw /throws
笔记: /** 异常处理机制: 抓抛模型 * 1."抛", 一旦抛出,程序终止! printStackTrace()显示异常路径! * 2."抓", 抓住异常 ...
- 解析.conf配置文件
解析.conf配置文件 解析.conf配置文件 解析.conf配置文件
- 10—mybatis 通用mapper插件 pagehelper 分页
spring boot真的太好用了,大家以后多多使用,今天来说说pagehelper 来做mybatis分页,我用的是spring boot 做的开发,后面会把源码发出来. pagehelper(ht ...
- python-windows安装相关问题
1.python的环境配置,有些时候是没有配置的,需要在[系统环境]-[path]里添加. 2.安装pip:从官网下载pip包,然后到包目录==>python setup.py install ...
- 快速搭建FTP服务器
快速搭建一个本地的FTP服务器 如果需要开发FTP文件上传下载功能,那么需要在本机上搭建一个本地FTP服务器,方便调试.第一步:配置IIS Web服务器1.1 控制面板中找到“程序”并打开 1.2 ...
- 执行mysql脚本文件
一般都是连接mysql执行sql语句: 在命令行下输入 mysql -h localhost -u root -p回车,然后输入密码即可; 或直接运行mysql自带的连接工具,然后输入密码即可. 执行 ...
- Illegal mix of collations (utf8mb4_general_ci,IMPLICIT) and (utf8mb4_unicode_ci,IMPLICIT) for operation '<>'
1.问题 今天又在mysql中遇到了,吐血. 2.解决方案 SQL最后加上 COLLATE utf8mb4_unicode_ci SELECT t2.cust_id as cust_id_ex,t1. ...
- mysql数据表结构查询
select * from ( select '表名', '字段名', '字段类型', '默认值', '是否可空', '注释', '主键' UNION ( SELECT a.TABLE_NAME '表 ...