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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
Javascript hasOwnProperty 方法 &amp; in 关键字
Nov 26 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
JavaScript实现星级评分
Jan 12 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 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入门小知识
2008/03/24 PHP
使用php统计字符串中中英文字符的个数
2013/06/23 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
Open and Print a Word Document
2007/06/15 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
使用控制台破解百小度一个月只准改一次名字
2015/08/13 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
简析Python的闭包和装饰器
2016/02/26 Python
Python实现简单的四则运算计算器
2016/11/02 Python
python 基础教程之Map使用方法
2017/01/17 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
Python饼状图的绘制实例
2019/01/15 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
python实现简单井字棋小游戏
2020/03/05 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
关于python中导入文件到list的问题
2020/10/31 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
党员先进事迹材料
2014/12/19 职场文书
公务员政审材料
2014/12/23 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
Python开发五子棋小游戏
2022/05/02 Python
Python sklearn分类决策树方法详解
2022/09/23 Python