开发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.不需要写任 ...
随机推荐
- HDU-2829 Lawrence (DP+四边形不等式优化)
题目大意:有n个敌方军火库呈直线排列,每个军火库有一个值vi,并且任意相邻的两个库之间都有通道相连.对于任意一条连起来的军火库链,它对我方的威胁可以用函数w(i,j)表示为:w(i,j)=vi*sum ...
- 用POI导出excel时,较长的数字不想被自动变为科学计数法的解决方式(转)
做过很多次导出excel了.都碰到一个问题,内容里如果包含一个比较长的数字,比如订单号“2546541656596”,excel会自动变成科学计数法... 弄过好几次都没有解决,最近又要导出excel ...
- PHP header函数设置http报文头示例详解
//定义编码 header( 'Content-Type:text/html;charset=utf-8 '); //Atom header('Content-type: application/at ...
- consumer的DubboClientHandler线程池
1. 创建线程池 创建线程池的调用栈如下: SimpleDataStore把线程池存放在map中. public class NettyClient extends AbstractClient { ...
- java并发编程:线程安全管理类--原子操作类--AtomicReferenceFieldUpdater<T,V>
1.类 AtomicReferenceFieldUpdater<T,V> public abstract class AtomicReferenceFieldUpdater<T,V& ...
- photoshop cc 智能切图
这节分享一个photoshop cc 开始有的自动生成图标的方法 psd练习文件 http://pan.baidu.com/s/1pL2dwL1 1 工具:我这里用的是photoshop cc 201 ...
- 微信小程序wx.chooseImage和wx.previewImage的综合使用(图片上传可以限制个数)
本例从微信小程序的组件扒下来的. WXML: <view class="weui-cell"> <view class="weui-cell__bd&q ...
- cas 认证管理器
CAS-默认的认证管理器:AuthenticationManagerImpl <bean id="authenticationManager" class="org ...
- 用MyEclipse JPA创建项目(二)
MyEclipse 3.15 Style——在线购买低至75折!火爆开抢>> [MyEclipse最新版下载] 本教程介绍了MyEclipse中的一些基于PA的功能. 阅读本教程时,了解J ...
- mysql 函数 事务
mysql 中提供了许多内置函数 CHAR_LENGTH(str) 返回值为字符串str 的长度,长度的单位为字符.一个多字节字符算作一个单字符. 对于一个包含五个二字节字符集, LENGTH()返回 ...