定义全局插件的步骤

  1. 定义全局插件 pluginsUtil.js

    Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:
export default {
install (Vue, options) {
// 具体4种方式,写在此处
}
}
  1. main.js里引入并使用
import pluginsUtil from './pluginsUtil'
Vue.use(pluginsUtil)
  1. 组件内调用

vue全局插件的4种方式

  1. Vue.mixin 方式

    注册全局混合对象
        Vue.mixin({
data () {
return {
someValue1: 'some value1:mixin的data里的值'
}
}
})
  1. Vue.prototype 方式

    定义 Vue 原型上的属性
        Vue.prototype.someValue2 = 'someValue2:Vue.prototype上的值'
Vue.prototype.getDate = function () {
let dateNew = new Date()
return dateNew
}
  1. Vue.filter 方式

    定义全局过滤器
        Vue.filter('vcntFormat', function (cnt) {
return cnt >= 100000 ? Math.floor(cnt / 10000) + '万' : cnt
})
  1. Vue.directive 方式

    定义全局自定义指令
        Vue.directive('myfocus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})

开发vue全局插件的4种方式的更多相关文章

  1. jQuery中开发插件的两种方式

    jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

  2. MyEclipse安装插件的几种方式(适用于Eclipse或MyEclipse其他版本)

    MyEclipse2014安装插件的几种方式(适用于Eclipse或MyEclipse其他版本)  2014-04-28 21:09  MyEclipse  阿超  19171 views 众所周知M ...

  3. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  4. MyEclipse2014安装插件的几种方式(适用于Eclipse或MyEclipse其他版本)

    农历 乙未 羊年 十一月初九 周六 2015年12月19日 14:29 编辑者:刘军 标题: 服务器的搭建请参考该文:<Win7 x64 svn 服务器搭建> ============== ...

  5. 黑马vue---56-58、vue组件创建的三种方式

    黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...

  6. Eclipse安装svn插件的几种方式

    Eclipse安装svn插件的几种方式 1.在线安装: (1).点击 Help --> Install New Software... (2).在弹出的窗口中点击add按钮,输入Name(任意) ...

  7. Eclipse安装svn插件的几种方式 转帖....

    Eclipse安装svn插件的几种方式 1.在线安装: (1).点击 Help --> Install New Software... (2).在弹出的窗口中点击add按钮,输入Name(任意) ...

  8. eclipse 安装插件的几种方式

        eclipse 安装插件的几种方式   1.使用url在线安装 ,最方便最快捷   help - install new software       接下来就是同意协议之类的,next ne ...

  9. iOS开发 跳转场景的三种方式

    iOS开发 跳转场景的三种方式 2012年10月17日, 15:32 假设A跳转到B,三种方法:1.按住ctrl键,拖动A上的控件(比如说UIButton)到B上,弹出菜单,选择Modal.不需要写任 ...

随机推荐

  1. UVA-12304 Race(递推)

    题目大意:求n个人比赛的所有可能的名次种数.比如:n=2时,有A第一B第二.B第一A第二.AB并列第一三种名次. 题目解析:既然是比赛,总有第一名.第一名的人数可能是i (1≤i≤n),则剩下待定的人 ...

  2. 第一个 MVC 应用程序(下半部分)

    2.4 创建一个简单的数据录入应用程序 本章的其余部分将通过一个简单的数据录入应用程序来考查 MVC 的更多基本特性.本小节打算分步进行,目的是演示 MVC 的运用. B1.设计一个数据模型 在 MV ...

  3. java容器——Collection接口

    Collection是Set,List接口的父类接口,用于存储集合类型的数据. 2.方法 int size():返回集合的长度 void clear():清除集合里的所有元素,将集合长度变为0 Ite ...

  4. SQL Server SqlCacheDependency 缓存依赖

     SQL server数据缓存依赖有两种实现模式,轮询模式,通知模式. 1  轮询模式实现步骤 此模式需要SQL SERVER 7.0/2000/2005版本以上版本都支持 主要包含以下几步:  1. ...

  5. vue 表格导出excel

    首先要install两个依赖, 1 npm install -S file-saver xlsx 2  npm install -D script-loader 在项目src目录下新建一个文件夹ven ...

  6. AE项目打包

    Holinz AE项目打包 打包详细信息:Setup Factory 7.0打包软件,VS2005+AE92下的Winform项目1.依赖项:    Dot Net Framework20    AO ...

  7. <xsd:import>

    最近研究wsdl文件发现在生成客户端代码时报错了, WSDLException (at /wsdl:definitions/wsdl:types/xsd:schema): faultCode=OTHE ...

  8. 移动前端开发之viewport的深入理解 --- 待续

    在移动设备上进行网页的重构或开发, 只有明白了viewport的概念 才能 响应 各种  不同分辨率 的移动设备 一.viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用 ...

  9. 源代码管理:SVN源代码管理器在ASP.NET VS中的使用注意事项

    一共有三个软件 1.ASP.NET下SVN有三个是不受管理的,bin文件夹,obj文件夹,.user类型文件,位置在TortoiseSVN的Settings下面的Subversion下的[Global ...

  10. AR.Drone 2.0四轴飞机体验:最好的玩具航拍器

    http://digi.tech.qq.com/a/20140513/007458.htm?pgv_ref=aio2012&ptlang=2052 AR.Drone 2.0四轴飞机体验:最好的 ...