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

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 サイトの他の関連記事を参照してください。