Vue_自定义插件

1、引入自定义的vue-myPlugin.js文件，js文件名称自定义，代码如下：

/*
* 自定义Vue的插件库
* */
(function (window) {
  //需要向外暴露的插件对象
  const MyPlugin = {}
  //插件对象必须要有一个install()
  MyPlugin.install = function (Vue, options) {
    // 1. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
      console.log('Vue函数对象的myGlobalMethod()')
    }

    // 2. 添加全局资源
    Vue.directive('my-directive',function (el, binding) {
      el.textContent = binding.value.toUpperCase();
    })

    // 3. 添加实例方法
    Vue.prototype.$myMethod = function () {
      console.log('vm $myMethod()')
    }
  }
  //向外暴露
  window.MyPlugin = MyPlugin
})(window)

2、html页面引入自定义的vue-myPlugin.js文件，并且声明使用插件vue-myPlugin.js，代码和图如下：

  
  插件




  





  // 声明使用插件(安装插件: 调用插件的install())
  Vue.use(MyPlugin) // 内部会调用插件对象的install()

  const vm = new Vue({
    el: '#test',
    data: {
      msg: 'HaHa'
    }
  })
  Vue.myGlobalMethod()
  vm.$myMethod()

  new Object()

3、效果图：