Vue插件写、用详解_vue.js_脚本之家

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

4、示例demo

1、如果同时有多个插件注入一个方法(例如created,那么会先执行先注入的那个方法,再依次执行后注入的,最后执行组件本身的)

不需要手动调用,在执行对应的方法时会被自动调用的

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

3.2

2、注意,像methods属性下的方法,并不会在组件注入后每个都执行,而是只执行一个,并且优先执行组件本身的。

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

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

声明插件

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

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

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

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

{{num|formatTime}}

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

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

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

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

//放在哪里参考上面Vue.test = function }

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

3.4

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

3.3

3.1

//main.jsimport Vue from 'vue'import App from './App.vue'//关键是这两行import service from './service.js'Vue.usenew Vue({ el: '#app', render: 

1、概述

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

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

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

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

当组件里有该属性时,调用时,显示的是组件里该属性的值;

也就是说,当插件提供一个属性时,组件里没这个属性,就用插件的属性;组件有,就用组件自己的。

Vue.prototype.number = 1;
//以下内容都是添加到上面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  { // 逻辑...}

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

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

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

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

先给出最常用的:的写法和使用方法

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

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

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

Vue.mixin({ created: function () { console.log

由此而推,函数也是这样的,组件里的同名函数总是会覆盖插件提供的函数。

写插件和声明插件是同步的,然后注册到Vue对象中,最后在写Vue组件的时候使用写的插件

Vue插件

注册插件

1、不管是,该变量都不会被不同组件所共享,更准确的说,假如有A、B两个组件。A组件里的number数值改变,B组件里的number数值是不会跟着改变的。因此不要想着引用这样一个变量,然后修改了A中的值,B里也自动跟着改变了;

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

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

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

3、写插件、使用插件

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

2、使用方法

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

2、当组件里没有该属性时,调用时,显示的是通过插件获取的值;

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

可以和配合使用,用于调试或者控制某些功能

假如为false或undefined时,输出为整数。

Vue插件写、用详解_vue.js_脚本之家。例如,假如添加一个方法test(),那么:

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

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

4、假如添加的是属性:

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

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

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

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

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

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

然后这里的代码会在每个组件的created执行之前执行。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图