Utilisation de la bibliothèque de fonctions xe-utils dans vue (tutoriel détaillé)

Cet article présente principalement la méthode spécifique d'utilisation de la bibliothèque de fonctions xe-utils dans Vue. Je vais maintenant le partager avec vous et vous donner une référence.

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 :

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)

Dans l'instance de vue, transmettez ceci.$ La fonction appelée par 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, plus Une petite version compressée 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

Exemple d'installation de require.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

via Vue.use ( ) pour installer globalement

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

instance vue pour monter des propriétés personnalisées

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(&#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>

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Utilisation du code JS pour créer des codes QR et générer des fonctions (tutoriel détaillé)

Une brève discussion sur vue. js import Méthodes de la bibliothèque CSS (elementUi)

Utiliser la méthode d'utilisation pour enregistrer les composants globaux et les directives globales de Vue

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!