vue使用xe-utils函数库的具体方法


Posted in Javascript onMarch 06, 2018

本文介绍了vue使用xe-utils函数库的具体方法,分享给大家,具体如下:

安装完成后自动挂载在vue实例:this.$utils(函数库)

支持挂载函数列表:this.$browse(浏览器内核判断) this.$locat(用于读写地址栏参数)

在 vue 实例中通过 this.$utils 调用的函数 this 默认指向当前vue实例。

CDN 安装

使用 script 方式安装,VXEUtils 会定义为全局变量

生产环境请使用 vxe-utils.min.js,更小的压缩版本,可以带来更快的速度体验。

cdnjs 获取最新版本

点击浏览已发布的所有 npm 包的源代码。

<script src="https://cdn.jsdelivr.net/npm/vxe-utils@1.3.4/dist/vxe-utils.js"></script>

unpkg 获取最新版本

点击浏览已发布的所有 npm 包的源代码

<script src="https://unpkg.com/vxe-utils@1.3.4/dist/vxe-utils.js"></script>

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

<template>
 <div>
  <ul>
   <li v-for="item in list" :key="item.id">{{ item.dateStr }}或者{{ $utils.dateToString(item.date) }}</li>
  </ul>
 </div>
</template>

<script>
export default {
 data () {
  return {
   list: []
  }
 },
 methods: {
  init () {
   this.$ajax.getJSON('services/user/list', {id: 123})
   .then(data => {
    this.list = data.map(item => {
     item.dateStr = this.$utils.dateToString(item.date, 'MM/dd/yyyy')
    })
   }).catch(data => {
    this.list = []
   })
  }
 },
 created () {
  this.init()
 }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
详解Layer弹出层样式
Aug 21 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 #jQuery
angular4 JavaScript内存溢出问题
Mar 06 #Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 #Javascript
vue中本地静态图片路径写法
Mar 06 #Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 #Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
Mar 06 #Javascript
React BootStrap用户体验框架快速上手
Mar 06 #Javascript
You might like
xml在joomla表单中的应用详解分享
2012/07/19 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
Python中的Numpy入门教程
2014/04/26 Python
python基于property()函数定义属性
2020/01/22 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
美国性感女装网站:bebe
2017/03/04 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
建筑专业毕业生推荐信
2013/11/21 职场文书
小区门卫岗位职责范本
2014/08/24 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
领导欢迎词范文
2015/01/26 职场文书
孟佩杰观后感
2015/06/17 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
浅谈Python数学建模之固定费用问题
2021/06/23 Python
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
python之django路由和视图案例教程
2021/07/26 Python
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android