zoukankan      html  css  js  c++  java
  • 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)
     
  • 相关阅读:
    在Spring Boot中使用数据库事务
    Data Consistency Primer
    在Spring Boot中输出REST资源
    Android开发——进程间通信之Messenger
    初识在Spring Boot中使用JPA
    设计模式——享元模式详解
    回首2016,展望2017
    [转]OpenStack Keystone V3
    [原]Openstack之identity server(keystone)
    [原]secureCRT 改变显示宽度
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12466918.html
Copyright © 2011-2022 走看看