VUE课程---24、插件
一、总结
一句话总结：
vue里可以自定义插件，在插件里可添加全局方法和属性、添加全局指令、添加实例方法等等操作。
(function (window) { const MyPlugin={}; MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { console.log('Vue函数对象的myGlobalMethod()') }; // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { el.textContent = 'my-directive： '+binding.value; } }); // 4. 添加实例方法 Vue.prototype.$myMethod = function (methodOptions) { console.log('vm实例方法$myMethod()') }; }; window.MyPlugin = MyPlugin; })(window);
1、vue使用插件注意？
vue使用插件要声明使用的插件，例如Vue.use(MyPlugin)来声明使用vue的MyPlugin插件，这在内部会调用插件对象的install()方法
Vue.use(MyPlugin); // 内部会调用插件对象的install() Vue.myGlobalMethod(); //调用MyPlugin插件全局的myGlobalMethod方法 vm.$myMethod(); //调用MyPlugin插件实例的$myMethod方法
二、插件
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>插件</title> 6 </head> 7 <body> 8 <!-- 9 10 --> 11 <div id="app"> 12 <p>{{msg}}</p> 13 <p v-my-directive="msg"></p> 14 </div> 15 <script src="../js/vue.js"></script> 16 <script src="vue-myPlugin.js"></script> 17 <script> 18 // 声明使用插件(安装插件: 调用插件的install()) 19 Vue.use(MyPlugin); // 内部会调用插件对象的install() 20 //MyPlugin在插件内部已经暴露给了window，所以可以直接用 21 22 let vm = new Vue({ 23 el: '#app', 24 data: { 25 msg: '我有一只小毛驴，我永远也不骑' 26 } 27 }); 28 //console.log(vm); 29 //console.log(Vue.myGlobalMethod); 30 Vue.myGlobalMethod(); //调用MyPlugin插件全局的myGlobalMethod方法 31 vm.$myMethod(); //调用MyPlugin插件实例的$myMethod方法 32 </script> 33 </body> 34 </html>
插件：vue-myPlugin.js
1 (function (window) { 2 const MyPlugin={}; 3 MyPlugin.install = function (Vue, options) { 4 // 1. 添加全局方法或属性 5 Vue.myGlobalMethod = function () { 6 console.log('Vue函数对象的myGlobalMethod()') 7 }; 8 9 // 2. 添加全局资源 10 Vue.directive('my-directive', { 11 bind (el, binding, vnode, oldVnode) { 12 el.textContent = 'my-directive： '+binding.value; 13 } 14 }); 15 16 17 // 4. 添加实例方法 18 Vue.prototype.$myMethod = function (methodOptions) { 19 console.log('vm实例方法$myMethod()') 20 }; 21 }; 22 window.MyPlugin = MyPlugin; 23 })(window);
