Comment utiliser xe-utils dans vue

Cette fois, je vais vous montrer comment utiliser xe-utils dans vue. Quelles sont les précautions pour utiliser xe-utils dans vue. Voici des cas pratiques, jetons un 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 est terminée. sera automatiquement monté sur l'instance de vue : this.$utils (Bibliothèque de fonctions)

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

Passé dans l'instance de vue La fonction this appelée par this.$utils pointe par défaut vers l'instance de vue actuelle.

Installation CDN

Utilisez la méthode de script pour installer, VXEUtils sera défini comme une variable globale

Pour l'environnement de production, veuillez utiliser vxe-utils .min.js, une version compressée plus petite, peut apporter une expérience de vitesse 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')

Propriétés personnalisées de montage d'instance Vue

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

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

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 :

Résoudre le problème selon lequel le routage vue2.0 n'affiche pas la vue du routeur

Comment utiliser vue.js dans les attributs de la balise Insérer des paramètres variables

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!