1.开发插件
install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象
 
MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
 
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
 
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
 
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}
 
2.插件的使用
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成:
 
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
 
//也可以传递参数:
Vue.use(MyPlugin, { someOption: true })
 
new Vue({
  //... options
})
 
 
3.案例1:给字体添加颜色
重点:先定义一个MyPlugin对象,这个Vue官网中没有写,需要特别注意。
let MyPlugin = {}
MyPlugin.install = function (Vue, options) {
   Vue.directive('color', function (el, binding) {
      el.style.color = binding.value || options.x
   })
}
Vue.use(MyPlugin, { x: 'red' })
   const vm = new Vue({
   el: '#root'
})
 
<div v-color="'blue'">hello</div>
 
4.案例2:在项目中使用插件
在图片加载出来之前,给一个随机的背景颜色。
1.建一个文件plugin.js     写好插件并暴露
let MyPlugin = {}
MyPlugin.install = function (Vue, options) {
Vue.directive('img',{
inserted(el,binding){
var color = Math.floor(Math.random()*1000000);
el.style.backgroundColor = "#"+color;
var img = new Image();
img.src = binding.value;
img.onload = function(){
el.src = binding.value;
}
}
})
}
export default MyPlugin
 
之后在main.js文件中引入
import MyPlugin from 'utils/plugin'
Vue.use(MyPlugin)
 
大功告成!
 
 
 
 
 

Vue 自定义一个插件的用法、小案例及在项目中的应用的更多相关文章

  1. 一个简单的Maven小案例

    Maven是一个很好的软件项目管理工具,有了Maven我们不用再费劲的去官网上下载Jar包. Maven的官网地址:http://maven.apache.org/download.cgi 要建立一个 ...

  2. Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作

    Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作 1>. 创建一个控制台程序2>. 添加一个 ADO.NET实体数据模型,选择对应的数据库与表(Studen ...

  3. vue自定义一个过滤器

    vue如何自定义一个过滤器 html代码: <div id="app"> <input type="text" v-model="m ...

  4. 用一个性能提升了666倍的小案例说明在TiDB中正确使用索引的重要性

    背景 最近在给一个物流系统做TiDB POC测试,这个系统是基于MySQL开发的,本次投入测试的业务数据大概10个库约900张表,最大单表6千多万行. 这个规模不算大,测试数据以及库表结构是用Dump ...

  5. IDEA下集成tomcat7插件将tomcat内嵌到web项目中

    新建一个maven web项目 修改pom.xml文件 <build> <plugins> <!-- 配置Tomcat插件: 就是本地部署,将tomcat 内嵌到 web ...

  6. 监听器应用【统计网站人数、自定义session扫描器、踢人小案例】

    从第一篇已经讲解过了监听器的基本概念,以及Servlet各种的监听器.这篇博文主要讲解的是监听器的应用. 统计网站在线人数 分析 我们在网站中一般使用Session来标识某用户是否登陆了,如果登陆了, ...

  7. 一个DRF框架的小案例

    第一步:安装DRF DRF需要以下依赖: Python (2.7, 3.2, 3.3, 3.4, 3.5, 3.6) Django (1.10, 1.11, 2.0) DRF是以Django扩展应用的 ...

  8. vue自定义一个v-model

    目标 js <template> <my-form v-model="form"> </my-form> </template> & ...

  9. [分享]一个String工具类,也许你的项目中会用得到

    每次做项目都会遇到字符串的处理,每次都会去写一个StringUtil,完成一些功能. 但其实每次要的功能都差不多: 1.判断类(包括NULL和空串.是否是空白字符串等) 2.默认值 3.去空白(tri ...

随机推荐

  1. Android Native crash日志分析

    在Android应用crash的类型中,native类型crash应该是比较难的一种了,因为大家接触的少,然后相对也要多转几道工序,所有大部分对这个都比较生疏.虽然相关文章也有很多了,但是我在刚开始学 ...

  2. python:数据库连接操作入门

    模块 import pymssql,pyodbc 模块说明 pymssql和pyodbc模块都是常用的用于SQL Server.MySQL等数据库的连接及操作的模块,当然一些其他的模块也可以进行相应的 ...

  3. C#多线程编程的同步也线程安全

    前一篇文章记录了简单的多线程编程的几种方式,但是在实际的项目中,也需要等待多线程执行完成之后再执行的方法,这个就叫做多线程的同步,或者,由于多个线程对同一对象的同时操作造成数据错乱,需要线程安全.这篇 ...

  4. Java开发笔记(四十五)成员属性与成员方法

    前面介绍了许多数据类型,除了基本类型如整型int.双精度型double.布尔型boolean之外,还有高级一些的如包装整型Integer.字符串类型String.本地日期类型LocalDate等等,那 ...

  5. 利用scrollintoview方法模拟聊天室收到新消息

    这段时间再写一个聊天的功能,基本的原理已经通了,剩下的就是细化功能和实现了.原理通了不代表就能解决了这个问题,今天就遇到了一个小问题,就是在接收到新的消息以后,最新的消息不能显示在消息区域,而是跑到了 ...

  6. 一文搞懂TCP与UDP的区别

    摘要:计算机网络基础 引言 网络协议是每个前端工程师都必须要掌握的知识,TCP/IP 中有两个具有代表性的传输层协议,分别是 TCP 和 UDP,本文将介绍下这两者以及它们之间的区别. 一.TCP/I ...

  7. 深入理解JavaScript作用域和作用域链

    前言 JavaScript 中有一个被称为作用域(Scope)的特性.虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,本文我会尽我所能用最简单的方式来解释作用域和作用域链,希望大家有所收获! ...

  8. Windchill基本业务对象-文档

    文档的类型: (1)WTDocumetManster :是文档的主要信息,一个文档只有一条记录:(2)WTDocument:是文档小版本记录,每一个文档小版本都有一条记录: 备注:(1)文档大版本记录 ...

  9. iOS----------UITextField实现过滤选中状态拼音

    2018年上班的第二天,就这样背了一个大锅.我们项目中有一个搜索功能,在这一期的版本中,为了增强优化,去除了过滤空格的请求,这样或许能增加很好的用户体验,恰恰相反,偷鸡不成蚀把米.没想到苹果系统的输入 ...

  10. Android为TV端助力 完全解析模拟遥控器按键

    public class VirturlKeyPadCtr { private static Instrumentation mInstrumentation; public static void ...