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 パッケージのソース コードを参照できます。 りー

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

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

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

AMDのインストール

require

.jsのインストール例

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

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

// 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.use() を通じてグローバルにインストール

npm install xe-utils vxe-utils --save

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

例

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

ミキシング機能

ファイル ./customs.js

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

例 ./main.js

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

例

Home.vue

import Vue from 'vue'
import XEUtils from 'xe-utils'
import customs from './customs'
XEUtils.mixin(customs)
Vue.use(VXEUtils, XEUtils)
// 调用自定义扩展函数
XEUtils.custom1()

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

推奨書籍:

プロジェクトをパッケージ化した後に Vue が更新されて 404 が表示された場合はどうすればよいですか?

vue-router のビルド中にルーティング インターフェイスが異常です

vue2 の対処方法.0 ルーティングにルータービューが表示されない

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