Vue ドキュメントのグローバルメソッド呼び出しとマウントメソッドの概要-Vue.js-php.cn

Vue ドキュメントのグローバルメソッド呼び出しとマウントメソッドの概要

王林

リリース： 2023-06-20 18:50:26

オリジナル

3989 人が閲覧しました

Vue.js は、開発者が Vue.js アプリケーションを簡単に操作できるようにする多くのグローバルメソッドとプロパティを提供する人気の JavaScript フレームワークです。この記事では、開発者がこのフレームワークをより効果的に使用できるように、Vue.js ドキュメント内のグローバルメソッド呼び出しおよびマウントメソッドを紹介します。

グローバルメソッド呼び出し

Vue.js では、グローバルメソッドは Vue コンストラクター関数で定義されたメソッドを参照します。これらのメソッドは、Vue オブジェクトをインスタンス化せずに、アプリケーション内のどこからでも呼び出すことができます。グローバルメソッドは、マウントされたメソッドとアンマウントされたメソッドの 2 つのタイプに分類されます。

アンマウントされたグローバルメソッド

Vue.extend(options)

Vue.extend() メソッドを使用すると、サブコンポーネントコンストラクターを定義し、このコンストラクター関数を返すことができます。渡されるオプションオブジェクトは、コンポーネントのデータ、メソッド、計算、監視、ライフサイクル関数、その他のオプションを含むコンポーネントオプションです。

Vue.extend() メソッドを使用してコンポーネントコンストラクターを定義します。

var MyComponent = Vue.extend({
  template: '<div>这是一个组件</div>'
})

ログイン後にコピー

Vue.nextTick(callback)

Vue が DOM を更新した後にコールバック関数を実行します。コールバック関数の this はインスタンスオブジェクトを指します。このメソッドは Promise オブジェクトを返します。

Vue.nextTick() メソッドを使用します:

Vue.nextTick(function () {
  // 操作 DOM
})

ログイン後にコピー

Vue.set(target, key, value) および Vue.delete(target, key)

Vue.set( ) メソッドは、ターゲットオブジェクトにプロパティをリアクティブに追加します。 Vue.delete() メソッドは、ターゲットオブジェクトからプロパティをリアクティブに削除します。

Vue.set() メソッドと Vue.delete() メソッドを使用します。

Vue.set(vm.someObject, 'b', 2)
Vue.delete(vm.someObject, 'a')

ログイン後にコピー

Vue.directive(id, [定義])

グローバルディレクティブを定義します。

Use Vue.directive() メソッド:

Vue.directive('my-directive', {
  bind (el, binding, vnode, oldVnode) {
    // 操作 DOM
  }
})

ログイン後にコピー

マウントされたグローバルメソッド

Vue オブジェクトのいくつかのメソッドを呼び出すことで、グローバルメソッドを Vue.prototype にマウントできます。 Vue上で。

Vue.use(plugin)

Vue.js プラグインをインストールします。

Vue.use() メソッドを使用します。

// 引入插件
import myPlugin from './my-plugin'

// 安装插件
Vue.use(myPlugin)

ログイン後にコピー

Vue.mixin(mixin)

混合オプションを各 Vue インスタンスにマージするグローバルミックスインを定義します。

Vue.mixin() メソッドを使用します:

Vue.mixin({
  created: function () {
    console.log('全局混入')
  }
})

ログイン後にコピー

Vue.component(id, [定義])

グローバルコンポーネントを定義します。

Vue.component() メソッドを使用します:

Vue.component('my-component', {
  template: '<div>这是一个组件</div>'
})

ログイン後にコピー

グローバルメソッドのマウント

グローバルメソッドを Vue.prototype または Vue にマウントするだけでなく、マウントすることもできます。インスタンスオブジェクトに追加すると、コンポーネント内でグローバルメソッドを使用できるようになります。

Vue.mixin() メソッドを使用してグローバルメソッドをコンポーネントインスタンスにマウントするか、コンポーネントオプションのメソッドまたは計算された属性を使用してグローバルメソッドを呼び出します。

Vue.mixin はグローバルメソッドのマウントを実装します

var myGlobalMethod = function () {
  // 全局方法
}

Vue.mixin({
  created: function () {
    this.myGlobalMethod = myGlobalMethod
  }
})

ログイン後にコピー

メソッド内でグローバルメソッドを呼び出す

methods: {
  doSomething() {
    this.myGlobalMethod()
  }
}

ログイン後にコピー

computed 内でグローバルメソッドを呼び出す

computed: {
  computedProperty() {
    return this.myGlobalMethod()
  }
}

ログイン後にコピー

要約

Vue.js は、開発者がアプリケーションを簡単に操作できるようにする多くのグローバルメソッドとプロパティを提供します。グローバルメソッドはマウント型とアンマウント型の 2 種類に分けられ、マウント型のグローバルメソッドはコンポーネント内で直接使用できます。 Vue.mixin() メソッドを通じて、グローバルメソッドをインスタンスオブジェクトにマウントしたり、コンポーネントオプションのメソッドと計算された属性を使用してグローバルメソッドを呼び出すことができます。グローバルメソッドを使用すると開発効率が向上しますが、グローバルメソッドの悪用を避けるためにコードの読みやすさと保守しやすさに注意を払う必要があります。

以上がVue ドキュメントのグローバルメソッド呼び出しとマウントメソッドの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。