如何在vue项目中使用xe-utils函数库-创新互联
本篇文章为大家展示了如何在vue项目中使用xe-utils函数库,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联网站建设提供从项目策划、软件开发,软件安全维护、网站优化(SEO)、网站分析、效果评估等整套的建站服务,主营业务为做网站、网站设计,重庆APP开发以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。创新互联深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!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) })
ES6 Module 安装方式
npm install xe-utils vxe-utils --save
通过 Vue.use() 来全局安装
import Vue from 'vue' import XEUtils from 'xe-utils' import VXEUtils from 'vxe-utils' Vue.use(VXEUtils, XEUtils) // 通过vue实例的调用方式 const dateStr = this.$utils.dateToString(new Date(), 'yyyy-MM-dd') const date = this.$utils.stringToDate('11/20/2017 10:10:30', 'MM/dd/yyyy HH:mm:ss')
vue 实例挂载自定义属性
示例
import Vue from 'vue' import XEUtils from 'xe-utils' import VXEUtils from 'vxe-utils' import customs from './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
export function custom1 () { console.log('自定义函数') }
示例 ./main.js
import Vue from 'vue' import XEUtils from 'xe-utils' import customs from './customs' XEUtils.mixin(customs) Vue.use(VXEUtils, XEUtils) // 调用自定义扩展函数 XEUtils.custom1()
示例
Home.vue
- {{ item.dateStr }}或者{{ $utils.dateToString(item.date) }}
上述内容就是如何在vue项目中使用xe-utils函数库,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联成都网站设计公司行业资讯频道。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享标题:如何在vue项目中使用xe-utils函数库-创新互联
本文链接:http://ybzwz.com/article/gsgog.html