vue扩展——使用vue插件添加全局方法属性

时间: 2018-03-13阅读: 8408标签: vue

在使用vue构建一些大型项目的时候,会发现许多组件会共用到一些函数或常量,我们需要把它提取出来,每次需要的时候调用一次就可以了,避免每个组件都重新写再一篇的麻烦。这就需要写一个插件,在vue.prototype上挂载我们需要的全局方法属性,比如vue.prototype.const={}就是项目中的常量,vue.prototype.utils={}就是项目的方法。下面就详细介绍下基于vue-cli的架子如何开发。


1、新建插件文件Plugins.js

export default{
    install(vue){
    	vue.prototype.$const={//常量
            URL:"http://www.fly63.com/",//项目请求接口的url
        }
        vue.prototype.$utils={//全局方法
            getUrlParam:function(name) {//获取url中的参数
		var reg = new RegExp('(^|&?)' + name + '=([^&]*)(&|$)', 'i');
		var r = window.location.href.substr(1).match(reg);
		if (r != null) {
			return decodeURI(r[2]);
		 }
		return undefined;
	    },
       }
    }
}


2、main.js入口函数,配置如下:

import Plugins from './assets/js/Plugins.js'// 引入

vue.use(Plugins) //通过全局方法 vue.use() 使用插件


3、在组件中的使用:

created:function(){
	console.log(this.$const.URL);//调用常量
        var name=this.$utils.getUrlParam('name');//调用方法
},


就怎么简单的完成我们的需求,插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种:

  1. 添加全局方法或者属性,如: vue-custom-element

  2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch

  3. 通过全局 mixin 方法添加一些组件选项,如: vue-router

  4. 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。

  5. 一个库,提供自己的 API,同时提供上面提到的一个或多个功能,如 vue-router




站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/498

vue中使用v-for时为什么不能用index作为key?

Vue 和 React 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。Vue 和 React 的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设

vue watch监听对象的使用_实现首次不触发、深度监听

vue中的watch是一个对象,所以一定要当成对象来用,它有键-值组成,其中键就是你要监控的那个数据。这篇文章介绍:vue如何实现首次不触发watch,vue如何实现数据的深度监听?

Vue 中的作用域插槽

什么时候使用作用域插槽呢?当子组件循环或某一部分的dom结构应该由外部传递进来的时候,我们要用作用域插槽,使用作用域插槽,子组件可以向父组件的作用域插槽里传递数据,父组件如果想接收这个数据,必须在外层使用template模版占位符,同时通过slot-scope对应的属性名字,来接收你传递过来的数据

Vue的理解:Vue.js新手入门指南

从一个从未接触过除HTML+CSS+JavaScript+JQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目,我总结了一些知识和经验想与大家分享。

vue history模式刷新出现404

vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑。但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示了(404)。

如何理解vue中的v-bind?

若不是动态属性,首先为其增加驼峰化后的监听,然后再为其增加一个连字符的监听,例如v-bind:foo-bar.sync,首先v-on:update:fooBar,然后v-on:update:foo-bar。v-on监听是通过addHandler加上的。

Vue组件的三种调用方式

主要讲Vue三种方式调用组件:v-model或者.sync显式控制组件显示隐藏,通过js代码调用,通过Vue指令调用,在写组件的时候很多写法、灵感来自于element-ui

Vue的href动态拼接绑定

:href前面要加“:”或者v-bind: 字符串要用单引号“ \\\'\\\' ”包住 加上了冒号是为了动态绑定数据,等号后面可以写变量。 如果不使用冒号,等号后面就可以写字符串等原始类型数据。这是就无法进行动态绑定数据了

Vue中mixin怎么理解?

mixin是为了让可复用的功能灵活的混入到当前组件中,混合的对象可以包含任意组件选项(生命周期,指令之类等等), mixin翻译过来叫混合,高级的词汇可以叫插件入侵

谈谈vue的render函数?

使用vue 这么长时间,对vue 对源码了解还是不多,作为一个不甘平庸的前端小白,决定奋起,那么今天我们就来谈谈vue 的render 函数;打开源码,我发现render 函数返回一个VNode; 可是我们并未在模版中写render 呀,这又是一个什么样的过程呢?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广