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 相关文章推荐
offsetParent 算法分析
Apr 05 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
BootStrap中的表单大全
Sep 07 Javascript
微信开发 微信授权详解
Oct 21 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
详解Vue中CSS样式穿透问题
Sep 12 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
php中simplexml_load_file函数用法实例
2014/11/12 PHP
php实现三级级联下拉框
2016/04/17 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
JavaScript中的私有成员
2006/09/18 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
python复制文件的方法实例详解
2015/05/22 Python
python生成IP段的方法
2015/07/07 Python
python 的列表遍历删除实现代码
2020/04/12 Python
python列表的常用操作方法小结
2016/05/21 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python已协程方式处理任务实现过程
2019/12/27 Python
Pytorch高阶OP操作where,gather原理
2020/04/30 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
Otel.com:折扣酒店预订
2017/08/24 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
客服主管岗位职责
2013/12/13 职场文书
业务部主管岗位职责
2014/01/29 职场文书
《尊严》教学反思
2014/02/11 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
党员教师一句话承诺
2014/05/30 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
见习报告怎么写
2014/10/31 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
公司开业主持词
2015/07/02 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL