1.如何开发插件?

2.编写自己的vue-myPlugin.js插件库,代码如下:

/**
 * vue的插件库
 * 最好使用匿名函数包裹起来,这样代码会更加规范
 * 里面的实现被隐藏了
 */
(function(){
    //MyPlugin是个变量,需要定义
    //需要向外暴露的插件对象
    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()
        })

        // 4. 添加实例方法
        //怎样给Vue的实例添加方法?实例方法放在原型对象上,原型对象上的方法实例会看的见
        //如何找到原型对象?通过函数的显示原型属性指向原型对象
        //因为函数原型对象上有方法myGlobalMethod,实例上也有方法,怎样区别?通过添加$区别
        Vue.prototype.$myMethod=function(){
            console.log('Vue实例对象的方法$myMethod()')
        }
    }
    //向外暴露插件
    window.MyPlugin=MyPlugin
})()
3.编写test017.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test">
    <p v-my-directive="msg"></p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<!--插件库应该在vue.js下面,要不自己定义的插件库没法用-->
<script type="text/javascript" src="../js/vue-myPlugin.js"></script>
<script type="text/javascript">
    //声明使用插件,需要在自己写的插件库中向外暴露
    //相当于把插件安装上,你想用别人的插件库,下面这句必须有
    Vue.use(MyPlugin)  //内部会执行MyPlugin的install方法并传入参数Vue,即:MyPlugin.install(Vue)

    Vue.myGlobalMethod()

    const vm=new Vue({
        el:'#test',
        data:{
           msg:'吾乃常山赵子龙也!'
        }
    })
    vm.$myMethod()
</script>
</body>
</html>
4.运行截图

(尚017)Vue插件的更多相关文章

  1. vue插件编写与实战

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue ...

  2. 第一个Vue插件从封装到发布

    前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...

  3. 手把手教你写vue插件并发布（二）

    前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html, 说到了一个完整的vue插件开发.发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果 ...

  4. VUE插件大总结

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  5. vue插件大全汇总

    Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...

  6. VUE插件总结

    亲们支持我的新博客哦==>地址(以后更新会尽量在新博客更新,欢迎大家访问加入我的后宫w) ) UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和W ...

  7. Vue插件plugins的基本操作

    前面的话 本文将详细介绍Vue插件plugins的基本操作 开发插件 插件通常会为 Vue 添加全局功能.插件的范围没有限制——一般有下面几种: 1.添加全局方法或者属性,如: vue-custom- ...

  8. 把axios封装为vue插件使用

    前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...

  9. Vue插件写、用详解（附demo）

    出处http://blog.csdn.net/qq20004604 Vue插件 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共 ...

随机推荐

  1. C++ 制作一个“测运”小游戏-rand()函数的应用

    游戏说明: 游戏名:Lucky Guy 玩法说明:有2种模式可以选择,一种是一直选择数字,直到抽到炸弹为止.另一种是在0~9个数字中进行选择,有5个炸弹,最高分为5,抽到炸弹即游戏结束.游戏结束后,可 ...

  2. jquery 如何获取select 选中项的下一个选项的值

    <select> <option value="1" selected="selected">a</option> < ...

  3. 在springMVC的controller中获取request，response对象的一个方法

    ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttr ...

  4. Jupyter交互式工具安装使用

    Jupyter交互式工具安装使用 Jupyter Notebook(此前被称为IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言. 文档:https://jupyter ...

  5. 1+X证书学习日志——javascript打印九九乘法表（基础算法）

    /// 注意要给td加上宽高属性,不然就看不到啦 /// td{ width:100px; height:30px; border:1px solid red; }

  6. fastDFS遇到的并发问题recv cmd: 0 is not correct, expect cmd: 100

    这种异常一般发生在 多线程同时使用一个StorageClient操作文件的情况下.有两种解决办法:1.对StorageClient对象加锁,变成单线程2.每次下载或上传文件时,重新new一个Stora ...

  7. [LeetCode] 448. 找到所有数组中消失的数字 ☆

    描述 给定一个范围在  1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. 您 ...

  8. C#-判断字符是否是全角半角

    C#字符串的全角是指用二个字节来表示的一个字符 C#字符串的半角是用一个字节来表示的一个字符 这样的话我们就可以用string.length 和System.text.Encoding.Default ...

  9. ansible之基础篇(二)

    软件相关模块 yum rpm和yum的区别 rpm:redhat package manager yum 可以解决依赖关系 yum 源配置 使用yum下载时需要先下载epel [epel] name= ...

  10. Linux实验：ssh免密码配置

    [实验目的]    1)了解ssh工具的作用    2)熟悉ssh配置过程    3)理解ssh原理[实验原理]    SSH是目前比较可靠的专为远程登录会话和其他网络服务提供安全的协议.不同主机之间 ...