Shang Silicon Valley's vue journey 17-custom plug-ins in vue and the use of plug-ins

Introduction

	掌握:
		1.自定义插件，参考vuejs文档中的模板
		2.(自定义)插件的使用
	
	注意:实例方法和函数对象方法两者是有些区别的: 
		①方法名字上面，前者加$符号。
		②调用上面，前者通过vue示例来调用方法。后者通过Vue.xxx()来调用

Code sample
1.html file code:

<div id="app">
 	<!-- 使用(自定义)插件中的 自定义指令 -->
	<p v-my-directive="msg"></p>
 </div>
 
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/Myplugin(自定义插件).js" type="text/javascript" charset="utf-8"></script>
<script>
	//声明使用插件
	Vue.use(MyPlugin);// 内部会执行MyPlugin.install()
	const vm = new Vue({
     
     
		el:"#app",
		data:{
     
     
			msg:"hello world"
		}
	})
	
	//使用插件中的全局方法
	Vue.myGlobalMethod();
	
	//使用插件中的 实例方法
	vm.$myMethod();
</script>

2. The code of the plug-in MyPlugin.js

/*
vue插件库--自定义

//下列模板参考于vue.js + 修改优化
*/

(function(){
    
    
//定义需要向外暴露的插件对象
const MyPlugin = {
    
    }
// 插件对象必须要有一个install()
MyPlugin.install = function (Vue, options) {
    
    
  
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    
    
    // 逻辑...
	console.log("Vue函数对象的方法myGlobalMethod()");
  }

  // 2. 添加全局资源（例如自定义指令、过滤函数filter()等等）
  Vue.directive('my-directive', function(el,binding){
    
    
	  el.innerHTML =  binding.value.toUpperCase();
  })

  // 3. 注入组件选项
  // Vue.mixin({
    
    
  //   created: function () {
    
    
  //     // 逻辑...
  //   }
  //   ...
  // })

  // 4. 添加实例方法(实例方法名之前要用$符号，来区分函数对象Vue的方法)
  Vue.prototype.$myMethod = function () {
    
    
    // 逻辑...
	console.log("Vue对象的实例方法$MyMethods");
  }
}
	//向外暴露
	window.MyPlugin = MyPlugin;
})()