关闭

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

时间: 2018-03-13阅读: 9125标签: 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框架开发出现页面空白、白屏的解决方法总汇

使用Vue-cli脚手架开发单页应用时出现页面空白的情况:1.npm run build打包页面空白,2. iOS的Safari下无法打开网页,3.升级vue2+部分手机访问出现页面空白,4.升级vue2+IP访问页面空白,5.Vue在IE下显示空白问题,6.Vue只在iOS 10出现白屏问题

Vue项目打包常见问题整理

Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘。js 路径问题、img 路径问题、favicon.ico 问题、IE9+ 兼容性问题、禁止生成 .map 文件

Vue常用经典开源项目汇总参考-海量

本文主要是收集与整理Vue相关的开源资料,以供需要的朋友参考。主要包含以下几方面的内容:UI组件、开发框架、实用库、服务端、辅助工具、应用实例、Demo示例

尤雨溪:Vue Function-based API RFC【转】

将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计。组件 API 设计所面对的核心问题之一就是如何组织逻辑,以及如何在多个组件之间抽取和复用逻辑。

Vue.use到底是什么?

我们在使用Vue做项目开发的时候,看到不少轮子都是通过Vue.use来进行使用,感觉甚是高大上。不过Vue.use到底是什么鬼?不妨来看个究竟。

vue中修改Modal的重置功能怎么写?

工作中遇到弹出模态框形式的修改功能,模态框里面是Form表单,Form表单中的内容是从后台获取的,这时候用户修改完没有提交,而是想重置然后重新修改,怎么办呢?

简单理解vue中的$nextTick

Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick,则可以在回调中获取更新后的DOM(dom的改变是发生在nextTick()之后),这个方法作用是当数据被修改后使用这个方法

Vue组件中prop属性使用说明

props 把数据传给子组件!prop是组件数据的一个字段,期望从父作用域传下来。子组件需要显式地用 props 选项。props的大小写、静态的和动态的 Prop、传入一个数字、传入一个布尔值、Vue的组件中的props属性单向数据流

对Vue.js的认知

MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。

Vue2.0用户权限控制解决方案

Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案,通过对路由、视图、请求三个层面的控制,使开发者可以实现任意颗粒度的用户权限控制。

点击更多...

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