vue参考---自建vue插件
一、总结
一句话总结：
vue中，我们可以很方便的开发自定义插件，记得使用的时候声明一下就好了Vue.use(MyPlugin)
1、vue中如何开发一个插件？
1、按vue规范写好一个vue插件：MyPlugin
2、在vue中声明使用插件：Vue.use(MyPlugin) // 内部会调用插件对象的install()
3、正常使用vue插件中的方法就好了：1、插件全局方法Vue.myGlobalMethod()；2、插件局部方法vm.$myMethod()
1 <script type="text/javascript"> 2 // 声明使用插件(安装插件: 调用插件的install()) 3 Vue.use(MyPlugin) // 内部会调用插件对象的install() 4 5 const vm = new Vue({ 6 el: '#test', 7 data: { 8 msg: 'HaHa' 9 } 10 }) 11 Vue.myGlobalMethod() 12 vm.$myMethod() 13 14 new Object() 15 </script> 16 17 (function (window) { 18 const MyPlugin = {} 19 MyPlugin.install = function (Vue, options) { 20 // 1. 添加全局方法或属性 21 Vue.myGlobalMethod = function () { 22 console.log('Vue函数对象的myGlobalMethod()') 23 } 24 25 // 2. 添加全局资源 26 Vue.directive('my-directive',function (el, binding) { 27 el.textContent = 'my-directive----'+binding.value 28 }) 29 30 // 4. 添加实例方法 31 Vue.prototype.$myMethod = function () { 32 console.log('vm $myMethod()') 33 } 34 } 35 window.MyPlugin = MyPlugin 36 })(window)
2、vue中实例方法和对象方法都写在原型中，如何区分？
原型实例方法前面可以加一个$符号来区分：例如 Vue.prototype.$myMethod = function () {}
3、vue自定义插件中的全局方法和局部方法的区别是什么？
全局方法直接Vue对象就可以调用（Vue.myGlobalMethod()），局部方法可以用vue实例对象来调用（vm.$myMethod()）
<script type="text/javascript"> // 声明使用插件(安装插件: 调用插件的install()) Vue.use(MyPlugin) // 内部会调用插件对象的install() const vm = new Vue({ el: '#test', data: { msg: 'HaHa' } }) Vue.myGlobalMethod() vm.$myMethod() new Object() </script>
二、vue插件
博客对应课程的视频位置：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>17_插件</title> 6 </head> 7 <body> 8 9 <div id="test"> 10 <p v-my-directive="msg"></p> 11 </div> 12 13 <script type="text/javascript" src="../js/vue.js"></script> 14 <script type="text/javascript" src="vue-myPlugin.js"></script> 15 <script type="text/javascript"> 16 // 声明使用插件(安装插件: 调用插件的install()) 17 Vue.use(MyPlugin) // 内部会调用插件对象的install() 18 19 const vm = new Vue({ 20 el: '#test', 21 data: { 22 msg: 'HaHa' 23 } 24 }) 25 Vue.myGlobalMethod() 26 vm.$myMethod() 27 28 new Object() 29 </script> 30 </body> 31 </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',function (el, binding) { 11 el.textContent = 'my-directive----'+binding.value 12 }) 13 14 // 4. 添加实例方法 15 Vue.prototype.$myMethod = function () { 16 console.log('vm $myMethod()') 17 } 18 } 19 window.MyPlugin = MyPlugin 20 })(window)