vue使用插件和自定义插件

自定义一个插件.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>