Using xe-utils function library in vue (detailed tutorial)-JS Tutorial-php.cn

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

亚连

Release： 2018-06-01 09:37:02

Original

3804 people have browsed it

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>

Copy after login

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>

Copy after login

AMD installation

require.js Installation example

// require 配置
require.config({
 paths: {
  // ...,
  &#39;xe-utils&#39;: &#39;./dist/xe-utils.min&#39;,
  &#39;vxe-utils&#39;: &#39;./dist/vxe-utils.min&#39;
 }
})
// ./main.js 安装
define([&#39;Vue&#39;, &#39;xe-utils&#39;, &#39;vxe-utils&#39;], function (Vue, XEUtils, VXEUtils) {
 Vue.use(VXEUtils, XEUtils)
})

Copy after login

ES6 Module installation method

npm install xe-utils vxe-utils --save

Copy after login

Install globally through Vue.use()

import Vue from &#39;vue&#39;
import XEUtils from &#39;xe-utils&#39;
import VXEUtils from &#39;vxe-utils&#39;
Vue.use(VXEUtils, XEUtils)
// 通过vue实例的调用方式
const dateStr = this.$utils.dateToString(new Date(), &#39;yyyy-MM-dd&#39;)
const date = this.$utils.stringToDate(&#39;11/20/2017 10:10:30&#39;, &#39;MM/dd/yyyy HH:mm:ss&#39;)

Copy after login

vue instance mounts custom properties

Example

import Vue from &#39;vue&#39;
import XEUtils from &#39;xe-utils&#39;
import VXEUtils from &#39;vxe-utils&#39;
import customs from &#39;./customs&#39;
XEUtils.mixin(customs)
Vue.use(VXEUtils, XEUtils, {mounts: [&#39;locat&#39;, &#39;browse&#39;, &#39;cookie&#39;]})
this.$locat // this.$locat.origin
this.$browse // this.$browse[&#39;-webkit&#39;] true
this.$cookie // this.$cookie(&#39;name&#39;, &#39;value&#39;)

Copy after login

Mixed function

File./ customs.js

export function custom1 () {
 console.log(&#39;自定义函数&#39;)
}

Copy after login

Example./main.js

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

Copy after login

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>

Copy after login

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

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!