Vue插件写、用详解(附demo)


Posted in Javascript onMarch 20, 2017

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)
      }
    }
  }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
JS获取scrollHeight问题想到的标准问题
May 27 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
安装vue-cli的简易过程
May 22 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 #Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 #Javascript
vue.js事件处理器是什么
Mar 20 #Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 #Javascript
Vue.js基础学习之class与样式绑定
Mar 20 #Javascript
详解Vue中添加过渡效果
Mar 20 #Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 #Javascript
You might like
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
js字符编码函数区别分析
2011/12/28 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
javascript中的this详解
2014/12/08 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
vue实现倒计时功能
2021/03/24 Vue.js
财务管理专业推荐信
2013/11/19 职场文书
中专三年学习的个人自我评价
2013/12/12 职场文书
初三语文教学计划
2015/01/22 职场文书