vue で xe-utils を使用する方法

今回は、vue で xe-utils を使用する方法と、vue で xe-utils を使用する際の 注意事項 を​​説明します。実際のケースを見てみましょう。

この記事では、Vue で xe-utils 関数ライブラリを使用する具体的な方法を紹介し、皆さんに共有します。詳細は次のとおりです:

インストールが完了すると、vue インスタンスに自動的にマウントされます: this.$ utils (関数ライブラリ)

関数のマウントをサポート リスト: this.$browse (ブラウザカーネル判定) this.$locat (アドレスバーパラメータの読み書きに使用)

vue インスタンスの this.$utils を通じて呼び出される関数デフォルトでは現在の vue インスタンスを指します。

CDN インストール

インストールにはスクリプト メソッドを使用します。VXEUtils はグローバル

変数 として定義されます。

運用環境には vxe-utils.min.js を使用してください。小さい圧縮バージョンの方が高速なエクスペリエンスを実現できます。

cdnjs 最新バージョンを入手します

クリックして、公開されているすべての npm パッケージのソース コードを参照します。

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

unpkg 最新バージョンを入手

クリックして公開されているすべてのnpmパッケージのソースコードを参照

require

.jsのインストール例

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

ES6モジュールのインストール方法リーリー

Vue.use() を通じてグローバルにインストール

// 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)
})

vue インスタンスはカスタムプロパティをマウントします

Example

npm install xe-utils vxe-utils --save

混合関数

File./customs.js

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')

Example./main.jsリー例

Home.vue

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')

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:

vue2.0ルーティングでルータービューが表示されない問題の解決策

vue.jsのラベル属性に変数パラメータを挿入する方法

以上がvue で xe-utils を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。