How to use xe-utils in vue

This time I will show you how to use xe-utils in vue, and what are the precautions for using xe-utils 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 will be automatically mounted on the vue instance: this.$utils (Function library)

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

Passed in the vue instance The function this called by this.$utils points to the current vue instance by default.

CDN installation

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

variable

Please use vxe-utils for production environment .min.js, a smaller 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

Through Vue.use() Global installation

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 mounting 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:

Solution to the problem that vue2.0 routing does not display router-view

How to use vue.js in the label attribute Insert variable parameters

The above is the detailed content of How to use xe-utils in vue. For more information, please follow other related articles on the PHP Chinese website!