Heim > Web-Frontend > js-Tutorial > Hauptteil

Verwenden der Funktionsbibliothek xe-utils in Vue (ausführliches Tutorial)

亚连
Freigeben: 2018-06-01 09:37:02
Original
3826 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die spezifische Methode zur Verwendung der xe-utils-Funktionsbibliothek in vue vorgestellt. Jetzt werde ich sie mit Ihnen teilen und Ihnen eine Referenz geben.

In diesem Artikel wird die spezifische Methode zur Verwendung der xe-utils-Funktionsbibliothek in Vue vorgestellt und für alle freigegeben. Die Details lauten wie folgt:

Nach Abschluss der Installation wird sie automatisch bereitgestellt auf der Vue-Instanz: this.$utils(Funktionsbibliothek)

Liste der unterstützten Mountfunktionen: this.$browse (Beurteilung des Browserkernels) this.$locat (wird zum Lesen und Schreiben von Adressleistenparametern verwendet)

Übergeben Sie dies in der Vue-Instanz.$ Die von Utils aufgerufene Funktion verweist standardmäßig auf die aktuelle Vue-Instanz.

CDN-Installation

Verwenden Sie zur Installation die Skriptmethode. VXEUtils wird als globale Variable definiert.

Für die Produktionsumgebung verwenden Sie bitte vxe-utils. min.js, mehr Eine kleine komprimierte Version kann ein schnelleres Geschwindigkeitserlebnis bringen.

cdnjs Holen Sie sich die neueste Version

Klicken Sie hier, um den Quellcode aller veröffentlichten npm-Pakete zu durchsuchen.

<script src="https://cdn.jsdelivr.net/npm/vxe-utils@1.3.4/dist/vxe-utils.js"></script>
Nach dem Login kopieren

unpkg Holen Sie sich die neueste Version

Klicken Sie hier, um den Quellcode aller veröffentlichten npm-Pakete zu durchsuchen

<script src="https://unpkg.com/vxe-utils@1.3.4/dist/vxe-utils.js"></script>
Nach dem Login kopieren

AMD-Installation

require.js-Installationsbeispiel

// require 配置
require.config({
 paths: {
  // ...,
  &#39;xe-utils&#39;: &#39;./dist/xe-utils.min&#39;,
  &#39;vxe-utils&#39;: &#39;./dist/vxe-utils.min&#39;
 }
})
// ./main.js 安装
define([&#39;Vue&#39;, &#39;xe-utils&#39;, &#39;vxe-utils&#39;], function (Vue, XEUtils, VXEUtils) {
 Vue.use(VXEUtils, XEUtils)
})
Nach dem Login kopieren

ES6-Modul-Installationsmethode

npm install xe-utils vxe-utils --save
Nach dem Login kopieren

Globale Installation über Vue.use()

import Vue from &#39;vue&#39;
import XEUtils from &#39;xe-utils&#39;
import VXEUtils from &#39;vxe-utils&#39;
Vue.use(VXEUtils, XEUtils)
// 通过vue实例的调用方式
const dateStr = this.$utils.dateToString(new Date(), &#39;yyyy-MM-dd&#39;)
const date = this.$utils.stringToDate(&#39;11/20/2017 10:10:30&#39;, &#39;MM/dd/yyyy HH:mm:ss&#39;)
Nach dem Login kopieren

vue-Instanz mountet benutzerdefinierte Eigenschaften

Beispiel

import Vue from &#39;vue&#39;
import XEUtils from &#39;xe-utils&#39;
import VXEUtils from &#39;vxe-utils&#39;
import customs from &#39;./customs&#39;
XEUtils.mixin(customs)
Vue.use(VXEUtils, XEUtils, {mounts: [&#39;locat&#39;, &#39;browse&#39;, &#39;cookie&#39;]})
this.$locat // this.$locat.origin
this.$browse // this.$browse[&#39;-webkit&#39;] true
this.$cookie // this.$cookie(&#39;name&#39;, &#39;value&#39;)
Nach dem Login kopieren

Gemischte Funktion

Datei./Zoll. js

export function custom1 () {
 console.log(&#39;自定义函数&#39;)
}
Nach dem Login kopieren

Example./main.js

import Vue from &#39;vue&#39;
import XEUtils from &#39;xe-utils&#39;
import customs from &#39;./customs&#39;
XEUtils.mixin(customs)
Vue.use(VXEUtils, XEUtils)
// 调用自定义扩展函数
XEUtils.custom1()
Nach dem Login kopieren

Example

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>
Nach dem Login kopieren

Das Obige habe ich zusammengestellt Für alle hoffe ich, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Verwenden von JS-Code zum Erstellen von QR-Codes und Generieren von Funktionen (ausführliches Tutorial)

Eine kurze Diskussion über vue. js import Methoden der CSS-Bibliothek (elementUi)

Verwenden Sie die Methode use, um globale Vue-Komponenten und globale Anweisungen zu registrieren

Das obige ist der detaillierte Inhalt vonVerwenden der Funktionsbibliothek xe-utils in Vue (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage