Explication détaillée des étapes d'utilisation de la bibliothèque de fonctions xe-utils dans vue

Cette fois, je vais vous donner une explication détaillée des étapes d'utilisation de la bibliothèque de fonctions xe-utils dans Vue. Quelles sont les précautions pour utiliser la bibliothèque de fonctions xe-utils dans Vue. un cas pratique, jetons un coup d'oeil.

Cet article présente la méthode spécifique d'utilisation de la bibliothèque de fonctions xe-utils dans Vue et la partage avec tout le monde. Les détails sont les suivants :

. Une fois l'installation terminée, elle sera automatiquement montée sur l'instance de vue : this.$utils (bibliothèque de fonctions)

Liste des fonctions de montage prises en charge : this.$browse (jugement du noyau du navigateur) this.$locat (utilisé pour lire et écrire les paramètres de la barre d'adresse)

Les fonctions appelées via this.$utils dans une instance de vue pointent par défaut vers l'instance de vue actuelle.

Installation CDN

Utilisez le mode script pour installer, VXEUtils sera défini comme une variable globale

Dans l'environnement de production, veuillez utiliser vxe-utils.min.js, une version compressée plus petite, qui peut apporter une expérience plus rapide.

cdnjs Obtenez la dernière version

Cliquez pour parcourir le code source de tous les packages npm publiés.

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

unpkg Obtenez la dernière version

Cliquez pour parcourir le code source de tous les packages npm publiés

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

Installation AMD

requireExemple d'installation .js

// 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)
})

Méthode d'installation du module ES6

npm install xe-utils vxe-utils --save

Installer globalement via 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')

L'instance Vue monte des attributs personnalisés

Exemple

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

Fonction mixte

Fichier ./customs.js

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

Exemple ./main.js

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

Exemple

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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Que dois-je faire si Vue s'actualise et affiche 404 après avoir empaqueté le projet ?

Construire en vue-router L'interface de routage est anormale

Comment gérer le routage vue2.0 qui n'affiche pas la vue du routeur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!