Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie XE-Utils in Vue

php中世界最好的语言
Freigeben: 2018-03-28 17:17:45
Original
2169 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie xe-utils in vue verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von xe-utils in vue?

In diesem Artikel wird die spezifische Methode zur Verwendung der xe-utils-Funktionsbibliothek in Vue vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

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

Unterstützt das Mounten der Funktionsliste: this.$browse (Beurteilung des Browserkernels) this.$locat (wird zum Lesen und Schreiben von Adressleistenparametern verwendet )

In der Vue-Instanz übergeben. Die von this.$utils aufgerufene Funktion verweist standardmäßig auf die aktuelle Vue-Instanz.

CDN-Installation

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

Für die Produktionsumgebung definiert. Bitte verwenden Sie vxe-utils .min.js, eine kleinere komprimierte Version, die ein schnelleres Geschwindigkeitserlebnis bieten kann.

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

erforderlich.js-Installationsbeispiel

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

ES6-Modul-Installationsmethode

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

Global installieren über 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')
Nach dem Login kopieren

vue-Instanz-Mounting benutzerdefinierter Eigenschaften

Beispiel

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

Gemischte Funktion

File./customs.js

export function custom1 () {
 console.log('自定义函数')
}
Nach dem Login kopieren

Example./main.js

import Vue from 'vue'
import XEUtils from 'xe-utils'
import customs from './customs'
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('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>
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Behebung des Problems, dass beim Vue2.0-Routing die Router-Ansicht nicht angezeigt wird

So verwenden Sie vue.js in Tag-Attributen Variable Parameter einfügen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie XE-Utils in Vue. 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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!