Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-04-11 16:58:58
original
3109 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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)
})
Copier après la connexion

Méthode d'installation du module ES6

npm install xe-utils vxe-utils --save
Copier après la connexion

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')
Copier après la connexion

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')
Copier après la connexion

Fonction mixte

Fichier ./customs.js

export function custom1 () {
 console.log('自定义函数')
}
Copier après la connexion

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()
Copier après la connexion

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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!