微信扫一扫打赏支持

vue参考---自建vue插件

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)

 

 

 

 

 
posted @ 2020-03-12 07:18  范仁义  阅读(674)  评论(0)  编辑  收藏  举报