自定义插件
说明
1) Vue 插件是一个包含 install 方法的对象
2) 通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等
代码展示：
vue-myPlugin.js
/*** 自定义 Vue 插件*/(function() {const MyPlugin = {}MyPlugin.install = function(Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function() {alert('Vue 函数对象方法执行')}// 2. 添加全局资源Vue.directive('my-directive', function(el, binding) {el.innerHTML = "MyPlugin my-directive " + binding.value})// 3. 添加实例方法Vue.prototype.$myMethod = function() {alert('vue 实例对象方法执行')}}window.MyPlugin = MyPlugin})()
Demo14_1.14.3.html
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><div id="demo"><!-- 使用自定义指令 --><p v-my-directive="msg"></p></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript" src="js/vue-myPlugin.js"></script><script type="text/javascript">// 使用自定义插件Vue.use(MyPlugin)var vm = new Vue({el: '#demo',data: {msg: 'jd'}})// 调用自定义的静态方法Vue.myGlobalMethod()// 调用自定义的对象方法vm.$myMethod()</script></body></html>
