Vue系列十三：插件

超、凢脫俗 2022-01-30 06:27 258阅读 0赞

一、自定义插件

1.  Vue 插件是一个包含 install 方法的对象
2.  通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

(function (window) {
      const MyPlugin = {}
      MyPlugin.install = function (Vue, options) {
        // 1. 添加全局方法或属性
        Vue.myGlobalMethod = function () {
          console.log('Vue函数对象的myGlobalMethod()')
        }
    
        // 2. 添加全局资源
        Vue.directive('my-directive',function (el, binding) {
          el.textContent = 'my-directive----'+binding.value
        })
    
        // 4. 添加实例方法
        Vue.prototype.$myMethod = function () {
          console.log('vm $myMethod()')
        }
      }
      window.MyPlugin = MyPlugin
    })(window)

二、页面使用插件

<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>

发表评论取消回复

表情：

评论列表（有 0 条评论，258人围观）

还没有评论，来说两句吧...

相关阅读

相关 IDEA插件系列（11）：Translation插件——翻译插件

1. 插件介绍可以翻译词汇、语句，十分方便。 2. 安装方式第一种安装方式是使用IDEA下载插件进行安装 ![在这里插入图片描述][c793ec14892

小灰灰/ 2024年03月31日 17:01/ 0 赞/ 127 阅读

相关 vue源码(三)-vue组件插件开发

vue源码(三)-vue组件插件开发插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种： 1. 添加全局方法或者属性。如: [vu

不念不忘少年蓝@/ 2023年06月15日 11:12/ 0 赞/ 136 阅读

相关 Qt系列文章之三十六(自定义Qt Designer插件)

文章目录前言创建Qt Designer Widget插件项目插件项目各文件的功能实现 MyBattery

女爷i/ 2022年09月03日 06:28/ 0 赞/ 186 阅读

相关 VS Code系列：（三）插件篇

前置知识本文推荐插件，主要针对 web前端开发；部分插件可能会因为版本更新等原因，会有所变化；通用插件 HTML CSS Support html 标

女爷i/ 2022年03月08日 08:28/ 0 赞/ 287 阅读

相关 Jenkins系列(三)：安装插件

Jenkins系列目录 [Jenkins系列(一)：在CentOS下的下载及安装Jenkins][Jenkins_CentOS_Jenkins] [Jenkins系列(二)

浅浅的花香味﹌/ 2022年03月07日 07:50/ 0 赞/ 388 阅读

相关 Mybatis系列十三：PageHelper分页插件

官方文档：[https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wikis/zh/HowToUse.md]

朱雀/ 2022年02月16日 04:37/ 0 赞/ 233 阅读

相关 Mybatis系列二十：插件开发

MyBatis在四大对象的创建过程中，都会有插件进行介入。插件可以利用动态代理机制一层层的包装目标对象，而实现在目标对象执行目标方法之前进行拦截的效果。 MyBatis

深碍√TFBOYSˉ_/ 2022年02月13日 08:55/ 0 赞/ 248 阅读

相关 Vue系列十六：vue组件

一、组件由三个部分组成 1、模板页面 <template> </template> 2、 JS 模块对象 <script>

电玩女神/ 2022年01月30日 06:51/ 0 赞/ 252 阅读

相关 Vue系列十三：插件

一、自定义插件 1. Vue 插件是一个包含 install 方法的对象 2. 通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等

超、凢脫俗/ 2022年01月30日 06:27/ 0 赞/ 259 阅读

相关 mybatis generator插件系列--lombok插件（减少百分之九十bean代码）

转自： [https://blog.csdn.net/u011936655/article/details/82723688][https_blog.csdn.net_u011

我不是女神ヾ/ 2022年01月22日 15:11/ 0 赞/ 285 阅读