Detailed explanation of the steps for using xe-utils function library in vue

This time I will bring you a detailed explanation of the steps for using the xe-utils function library in vue. What are the precautions for using the xe-utils function library in vue. The following is a practical case, let's take a look.

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

After the installation is completed, it is 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)

Functions called via this.$utils in a vue instance point to the current vue instance by default.

CDN Installation

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

In the production environment, please use vxe-utils.min.js, a smaller compressed version, which 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('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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to deal with Vue refreshing and displaying 404 after packaging the project

Build in vue-router Routing interface exception

vue2.0 routing does not display router-view how to deal with it

The above is the detailed content of Detailed explanation of the steps for using xe-utils function library in vue. For more information, please follow other related articles on the PHP Chinese website!