Vue_自定义插件

最新推荐文章于 2024-08-23 17:42:11 发布

原创最新推荐文章于 2024-08-23 17:42:11 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

40 篇文章

订阅专栏

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，代码和图如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>插件</title>
</head>
<body>

<div id="test">
  <p v-my-directive="msg"></p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="vue-myPlugin.js"></script>
<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>
</body>
</html>