开发vue全局插件的4种方式
定义全局插件的步骤
- 定义全局插件 pluginsUtil.js
Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:
export default {
install (Vue, options) {
// 具体4种方式,写在此处
}
}
- main.js里引入并使用
import pluginsUtil from './pluginsUtil'
Vue.use(pluginsUtil)
- 组件内调用
vue全局插件的4种方式
- Vue.mixin 方式
注册全局混合对象
Vue.mixin({
data () {
return {
someValue1: 'some value1:mixin的data里的值'
}
}
})
- Vue.prototype 方式
定义 Vue 原型上的属性
Vue.prototype.someValue2 = 'someValue2:Vue.prototype上的值'
Vue.prototype.getDate = function () {
let dateNew = new Date()
return dateNew
}
- Vue.filter 方式
定义全局过滤器
Vue.filter('vcntFormat', function (cnt) {
return cnt >= 100000 ? Math.floor(cnt / 10000) + '万' : cnt
})
- Vue.directive 方式
定义全局自定义指令
Vue.directive('myfocus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
开发vue全局插件的4种方式的更多相关文章
- jQuery中开发插件的两种方式
jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...
- MyEclipse安装插件的几种方式(适用于Eclipse或MyEclipse其他版本)
MyEclipse2014安装插件的几种方式(适用于Eclipse或MyEclipse其他版本) 2014-04-28 21:09 MyEclipse 阿超 19171 views 众所周知M ...
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- MyEclipse2014安装插件的几种方式(适用于Eclipse或MyEclipse其他版本)
农历 乙未 羊年 十一月初九 周六 2015年12月19日 14:29 编辑者:刘军 标题: 服务器的搭建请参考该文:<Win7 x64 svn 服务器搭建> ============== ...
- 黑马vue---56-58、vue组件创建的三种方式
黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...
- Eclipse安装svn插件的几种方式
Eclipse安装svn插件的几种方式 1.在线安装: (1).点击 Help --> Install New Software... (2).在弹出的窗口中点击add按钮,输入Name(任意) ...
- Eclipse安装svn插件的几种方式 转帖....
Eclipse安装svn插件的几种方式 1.在线安装: (1).点击 Help --> Install New Software... (2).在弹出的窗口中点击add按钮,输入Name(任意) ...
- eclipse 安装插件的几种方式
eclipse 安装插件的几种方式 1.使用url在线安装 ,最方便最快捷 help - install new software 接下来就是同意协议之类的,next ne ...
- iOS开发 跳转场景的三种方式
iOS开发 跳转场景的三种方式 2012年10月17日, 15:32 假设A跳转到B,三种方法:1.按住ctrl键,拖动A上的控件(比如说UIButton)到B上,弹出菜单,选择Modal.不需要写任 ...
随机推荐
- UVA-12304 Race(递推)
题目大意:求n个人比赛的所有可能的名次种数.比如:n=2时,有A第一B第二.B第一A第二.AB并列第一三种名次. 题目解析:既然是比赛,总有第一名.第一名的人数可能是i (1≤i≤n),则剩下待定的人 ...
- 第一个 MVC 应用程序(下半部分)
2.4 创建一个简单的数据录入应用程序 本章的其余部分将通过一个简单的数据录入应用程序来考查 MVC 的更多基本特性.本小节打算分步进行,目的是演示 MVC 的运用. B1.设计一个数据模型 在 MV ...
- java容器——Collection接口
Collection是Set,List接口的父类接口,用于存储集合类型的数据. 2.方法 int size():返回集合的长度 void clear():清除集合里的所有元素,将集合长度变为0 Ite ...
- SQL Server SqlCacheDependency 缓存依赖
SQL server数据缓存依赖有两种实现模式,轮询模式,通知模式. 1 轮询模式实现步骤 此模式需要SQL SERVER 7.0/2000/2005版本以上版本都支持 主要包含以下几步: 1. ...
- vue 表格导出excel
首先要install两个依赖, 1 npm install -S file-saver xlsx 2 npm install -D script-loader 在项目src目录下新建一个文件夹ven ...
- AE项目打包
Holinz AE项目打包 打包详细信息:Setup Factory 7.0打包软件,VS2005+AE92下的Winform项目1.依赖项: Dot Net Framework20 AO ...
- <xsd:import>
最近研究wsdl文件发现在生成客户端代码时报错了, WSDLException (at /wsdl:definitions/wsdl:types/xsd:schema): faultCode=OTHE ...
- 移动前端开发之viewport的深入理解 --- 待续
在移动设备上进行网页的重构或开发, 只有明白了viewport的概念 才能 响应 各种 不同分辨率 的移动设备 一.viewport的概念 通俗的讲,移动设备上的viewport就是设备的屏幕上能用 ...
- 源代码管理:SVN源代码管理器在ASP.NET VS中的使用注意事项
一共有三个软件 1.ASP.NET下SVN有三个是不受管理的,bin文件夹,obj文件夹,.user类型文件,位置在TortoiseSVN的Settings下面的Subversion下的[Global ...
- AR.Drone 2.0四轴飞机体验:最好的玩具航拍器
http://digi.tech.qq.com/a/20140513/007458.htm?pgv_ref=aio2012&ptlang=2052 AR.Drone 2.0四轴飞机体验:最好的 ...