（十三）插件

最新推荐文章于 2024-03-27 23:19:31 发布

吱吱不倦小子

最新推荐文章于 2024-03-27 23:19:31 发布

阅读量197

点赞数

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

本文链接：https://blog.csdn.net/u013109501/article/details/114380316

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.定义插件（初学者使用比较少）

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

2.插件使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>13_插件</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>

吱吱不倦小子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
（十三）插件

1.定义插件（初学者使用比较少）(function (window) { //向外暴露的插件对象 const MyPlugin = {} MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { console.log('Vue函数对象的myGlobalMethod()') } // 2. 添加全局资源
复制链接

扫一扫