Home > Article > Web Front-end > 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('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>
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!