关闭

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

时间: 2018-03-13阅读: 9285标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

Vue.js中 watch 的高级用法

上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName。app.$watch调用后会返回一个值,就是unWatch方法,你要注销 watch 只要调用unWatch方法就可以了

vue与后台交互ajax数据

Vue.js是一套构建用户界面的渐进式的前端框架。 vueJS与后台交互数据的方法我所了解的有以下几种

Vue.use到底是什么?

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

Vue 中的受控与非受控组件

熟悉 React 的开发者应该对“受控组件”的概念并不陌生,实际上对于任何组件化开发框架而言,都可以实现所谓的受控与非受控,Vue 当然也不例外。并且理解受控与非受控对应的需求场景,可以让我们在设计一些基础组件时思路更加清晰,暴露出来的组件 API 也更加合理、统一。

vue2.0/3.0在main.js引入scss文件报错

在vue2.0的main.js中引入scss文件报错原因是:在build文件夹下的webpack.base.conf.js的rules里面添加配置,vue3.0写入.scss文件在mian.js中 import ‘./styles/index.scss‘后出现下图报错解决方法:在vue.config.js文件中添加以下代码

关于Vue.use()使用详解

相信很多人在用Vue使用别人的组件时,会用到 Vue.use() 。例如:Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时,就不需要用 Vue.use(axios),就能直接使用。那这是为什么呐?

简单理解vue中的$nextTick

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

如何理解Vue.js中的ref及$ref,$

首先我们来看一下vue官方是怎么解释的m好了,我知道很多刚接触的vue的小白其实都不太看的懂官方文档在讲什么,下面我用自己的话翻译一下。

Vue.js最佳实践:五招让你成为Vue.js大师

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站

Vuejs讲解之:响应式、过渡效果、过渡状态

Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。

点击更多...

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