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!