Maison > Article > interface Web > 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('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>
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)
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!