vue使用插件和自定义插件

weblog 2417 0 0
自定义一个插件.js
(function(){
	//需要向外暴露的插件对象
	const MyPlugin={};
	MyPlugin.install = function (Vue, options) {
	  // 1. 添加全局方法或属性
	  Vue.myGlobalMethod = function () {
	  	console.log("------");
	  	console.log(Vue)
	  	console.log("myGlobalMethod");
	  }
	
	  // 2. 添加全局资源
	  //自定义指令
	  Vue.directive('my-up', {
	    bind (el, binding, vnode, oldVnode) {
	      el.textContent=binding.value.toLowerCase();
	    }
	  })
	  // 4. 添加实例方法
	  Vue.prototype.$myMethod = function (methodOptions) {
	  	console.log("$myMethod")
	  }
	}
	window.MyPlugin=MyPlugin
})()
使用自定义的插件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.min.js"></script>
		<script src="js/vue-plugin.js"></script>
	</head>
	<body>
		<div id="app">
			<span v-my-up="msg"></span>
		</div>
		<script>
			//声明使用插件
			Vue.use(MyPlugin);//内部会调用 install方法 传入Vue
			Vue.myGlobalMethod();//调用全局方法
			var v=new Vue({
				el:'#app',
				data:{
					msg:'This is China'
				}
			})
			v.$myMethod();//调用对象方法
		</script>
	</body>
</html>

 


猜你喜欢
框架 1744 maven项目使tomcat71.pom文build finalNamedz/finalName plugins plugin
rabbitmq,springboot 1996 客户端应程序。 为了消费事,应程序需要声明一个队列,并绑到一个系统指的交换器去消费消息。 在默认的虚拟主机上声明了一个topic类型的exchange(交换器
算法基础 2115 什么是jxlsjxls是一个简单的、轻量级的excel导出库,使的标记在excel模板文中来输出格式布局。其实java中成熟的excel导出工具有pol、jxl,但他们都是使java
weblog 2805 vue内置指令最后两个指令测试!DOCTYPEhtmlhtml head metacharset="UTF-8" title/title scriptsrc="js/vue.min.js
rabbitmq 1210 /auth/topic配置文中依次配置了auth_backends.1=internalauth_backends.2=http,意思是优先使内部认证,如果内部认证没有找到户,则请求http认证
jenkins 1997 一台服务器上打包部署的,本文介绍使PublishOverSSH,将项目发布到远程服务器。  本次模拟使三台服务器,分别是jenkins服务器A:192.168.127.128,专门于下载代码
算法基础 12101 径,当有类名,方法名匹配时也会出现。所以有时搜索的延时较长。二、idea安装RestfulToolkit使时完全匹配Controller控制层的url路径,不会出现干扰项,所以非常推荐。安装
official 1049 续介绍在rabbitmq容器中安装rabbitmq_delayed_message_exchange使的方法。安装下载与rabbitmq版本相符的,下载地址:https://github
目录
没有一个冬天不可逾越,没有一个春天不会来临。最慢的步伐不是跬步,而是徘徊,最快的脚步不是冲刺,而是坚持。