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车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
js获取当前路径的简单示例代码
Jan 08 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
JS中微信小程序自定义底部弹出框
Dec 22 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
使用JavaScript实现node.js中的path.join方法
Aug 12 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
微信小程序如何实现五星评价功能
Oct 15 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 编写的日历
2006/10/09 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
PHP生成和获取XML格式数据的方法
2016/03/04 PHP
使用js判断数组中是否包含某一元素(类似于php中的in_array())
2013/12/12 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
详解angular路由高亮之RouterLinkActive
2018/04/28 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
vue中activated的用法
2021/01/03 Vue.js
Python3实现连接SQLite数据库的方法
2014/08/23 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
python检测IP地址变化并触发事件
2018/12/26 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
一道写SQL的面试题和答案
2013/11/19 面试题
实习护理工作自我评价
2013/09/25 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
连锁超市项目计划书
2014/09/15 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
考察邀请函范文
2015/01/31 职场文书
沈阳故宫导游词
2015/01/31 职场文书
社区党支部承诺书
2015/04/29 职场文书
辩护意见书
2015/06/04 职场文书
入党函调证明材料
2015/06/19 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
javascript的setTimeout()使用方法总结
2021/11/20 Javascript