Using xe-utils function library in vue (detailed tutorial)

This article mainly introduces the specific method of using vue's xe-utils function library. Now I will share it with you and give you a reference.

This article introduces the specific method of using xe-utils function library in vue and shares it with everyone. The details are as follows:

After the installation is completed, it will be automatically mounted on the vue instance: this.$utils(function library )

Supported mounting function list: this.$browse (browser kernel judgment) this.$locat (used to read and write address bar parameters)

In the vue instance, pass this.$ The function this called by utils points to the current vue instance by default.

CDN installation

Use script mode to install, VXEUtils will be defined as a global variable

For production environment, please use vxe-utils.min.js, update A small compressed version can bring a faster speed experience.

cdnjs Get the latest version

Click to browse the source code of all published npm packages.

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

unpkg Get the latest version

Click to browse the source code of all published npm packages

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

AMD installation

require.js Installation example

// 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 installation method

npm install xe-utils vxe-utils --save

Install globally through 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 instance mounts custom properties

Example

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')

Mixed function

File./ customs.js

export function custom1 () {
 console.log('自定义函数')
}

Example./main.js

import Vue from 'vue'
import XEUtils from 'xe-utils'
import customs from './customs'
XEUtils.mixin(customs)
Vue.use(VXEUtils, XEUtils)
// 调用自定义扩展函数
XEUtils.custom1()

Example

Home.vue

<template>
 <p>
  <ul>
   <li v-for="item in list" :key="item.id">{{ item.dateStr }}或者{{ $utils.dateToString(item.date) }}</li>
  </ul>
 </p>
</template>
<script>
export default {
 data () {
  return {
   list: []
  }
 },
 methods: {
  init () {
   this.$ajax.getJSON(&#39;services/user/list&#39;, {id: 123})
   .then(data => {
    this.list = data.map(item => {
     item.dateStr = this.$utils.dateToString(item.date, &#39;MM/dd/yyyy&#39;)
    })
   }).catch(data => {
    this.list = []
   })
  }
 },
 created () {
  this.init()
 }
}
</script>

The above is what I compiled For everyone, I hope it will be helpful to everyone in the future.

Related articles:

Use JS code to create QR codes and generate functions (detailed tutorial)

A brief discussion on vue.js import Methods of css library (elementUi)

Methods of using use to register Vue global components and global directives

The above is the detailed content of Using xe-utils function library in vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!