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 相关文章推荐
jquery isType() 类型判断代码
Feb 14 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
JavaScript实现缓动动画
Nov 25 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
PHP array操作10个小技巧分享
2011/06/23 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php数据访问之增删改查操作
2016/05/09 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
layui table动态表头 改变表格头部 重新加载表格的方法
2019/09/21 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
Python中生成器和yield语句的用法详解
2015/04/17 Python
python实现红包裂变算法
2016/02/16 Python
Python的re模块正则表达式操作
2016/05/25 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
tensorflow如何批量读取图片
2019/08/29 Python
优秀管理者获奖感言
2014/02/17 职场文书
装修设计师求职信
2014/02/26 职场文书
信息总监管理职责范本
2014/03/08 职场文书
售后客服工作职责
2014/06/16 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
2014年测量员工作总结
2014/12/12 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
部分武汉产收音机展览
2022/04/07 无线电