Vue插件的简单示例。

最新推荐文章于 2023-07-02 05:55:18 发布

LuckXinXin

最新推荐文章于 2023-07-02 05:55:18 发布

阅读量341

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/LuckXinXin/article/details/104801407

版权

Vue 专栏收录该内容

165 篇文章 10 订阅

订阅专栏

自定义插件的JS代码：

(function (window) {

  // 定义插件对象
  const MyPlugin = {}
  // 插件对象必须有一个install方法
  MyPlugin.install = function (Vue, options) {
    console.log('install()', options)

    // 1. 添加全局方法或属性
    Vue.myGlobalMethod = function () {
      console.log('Vue.myGlobalMethod()')
    }

    // 2. 添加一个全局资源(asset)
    Vue.directive('my-directive', (el, binding) => {
      el.textContent = '------' + binding.value
    })

    // 4. 添加一个实例方法
    Vue.prototype.$myMethod = function () {
      console.log('vm.$myMethod()')
    }
  }

  //暴露插件对象
  window.MyPlugin = MyPlugin
})(window)

主代码，要将自定义的JS引入：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>VUE的插件</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  
</head>
<body>

  <div id='test'>
    <p v-my-directive='msg'></p>
  </div>
   <!-- 引入自定义插件的js代码 -->
  <script src="vue-myPlugin.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    Vue.use(MyPlugin, {name:"luckxinxin" })
    Vue.myGlobalMethod()
    const vm = new Vue({
      el: '#test',
      data: {
        msg: 'luckxinxin'
      }
    })

    vm.$myMethod()

  </script>
</body>
</html>

运行结果：

在这里插入图片描述

大家可以自己尝试运行一下

LuckXinXin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue插件的简单示例。

自定义插件的JS代码：(function (window) { // 定义插件对象 const MyPlugin = {} // 插件对象必须有一个install方法 MyPlugin.install = function (Vue, options) { console.log('install()', options) // 1. 添加全局方法或属性 ...
复制链接

扫一扫

专栏目录