vue使用xe-utils函数库的具体方法
本文介绍了vue使用xe-utils函数库的具体方法,分享给大家,具体如下:
安装完成后自动挂载在vue实例:this.$utils(函数库)
支持挂载函数列表:this.$browse(浏览器内核判断)this.$locat(用于读写地址栏参数)
在vue实例中通过this.$utils调用的函数this默认指向当前vue实例。
CDN安装
使用script方式安装,VXEUtils会定义为全局变量
生产环境请使用vxe-utils.min.js,更小的压缩版本,可以带来更快的速度体验。
cdnjs获取最新版本
点击浏览已发布的所有npm包的源代码。
unpkg获取最新版本
点击浏览已发布的所有npm包的源代码
AMD安装
require.js安装示例
//require配置 require.config({ paths:{ //..., 'xe-utils':'./dist/xe-utils.min', 'vxe-utils':'./dist/vxe-utils.min' } }) //./main.js安装 define(['Vue','xe-utils','vxe-utils'],function(Vue,XEUtils,VXEUtils){ Vue.use(VXEUtils,XEUtils) })
ES6Module安装方式
npminstallxe-utilsvxe-utils--save
通过Vue.use()来全局安装
importVuefrom'vue' importXEUtilsfrom'xe-utils' importVXEUtilsfrom'vxe-utils' Vue.use(VXEUtils,XEUtils) //通过vue实例的调用方式 constdateStr=this.$utils.dateToString(newDate(),'yyyy-MM-dd') constdate=this.$utils.stringToDate('11/20/201710:10:30','MM/dd/yyyyHH:mm:ss')
vue实例挂载自定义属性
示例
importVuefrom'vue' importXEUtilsfrom'xe-utils' importVXEUtilsfrom'vxe-utils' importcustomsfrom'./customs' XEUtils.mixin(customs) Vue.use(VXEUtils,XEUtils,{mounts:['locat','browse','cookie']}) this.$locat//this.$locat.origin this.$browse//this.$browse['-webkit']true this.$cookie//this.$cookie('name','value')
混合函数
文件./customs.js
exportfunctioncustom1(){ console.log('自定义函数') }
示例./main.js
importVuefrom'vue' importXEUtilsfrom'xe-utils' importcustomsfrom'./customs' XEUtils.mixin(customs) Vue.use(VXEUtils,XEUtils) //调用自定义扩展函数 XEUtils.custom1()
示例
Home.vue
{{item.dateStr}}或者{{$utils.dateToString(item.date)}}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。