これは vue で何を指しているのでしょうか?

Vue では、この点はコンテキストによって異なります。メソッドは現在の Vue インスタンスを指します。テンプレートは、データ、プロパティ、計算されたプロパティ、メソッドなどのコンポーネント コンテキストを指します。デフォルトでは、イベント ハンドラーは DOM 要素を指します。この要素は、bind または v-on 修飾子を通じて Vue インスタンスにバインドできます。グローバル オブジェクトは Vue ルート インスタンスを指し、グローバル設定とメソッドにアクセスできます。

これは Vue で何を指しますか

Vue では、this キーワードは何を指しますか使用されるコンテキストに応じて、異なるオブジェクトに変換されます。

1. メソッドと計算プロパティ

メソッドと計算プロパティでは、this は現在の Vue インスタンスを指します。これは、インスタンスのデータとメソッドにアクセスできることを意味します。例:

<code class="javascript">methods: {
  logThis() {
    console.log(this);
  },
},</code>

logThis メソッドを呼び出すと、this は現在の Vue インスタンスを指します。

2. テンプレート

テンプレートでは、this は、次のプロパティを含む現在のコンポーネントのコンテキスト オブジェクトを指します。

• #$data: コンポーネントのデータ オブジェクト
• $props: コンポーネントによって受け取られるプロパティ
• $computed : コンポーネントの計算されたプロパティ
• $methods : コンポーネントのメソッド

たとえば、次のテンプレートでは:

<code class="html"><template>
  <p>{{ this.$data.message }}</p>
</template></code>

この .$data.message は、コンポーネント data オブジェクトの message プロパティにアクセスします。

3. イベント ハンドラー

イベント ハンドラーでは、

this はイベントをトリガーした DOM 要素を指します。ただし、this は、bind または v-on 修飾子を使用して現在の Vue インスタンスにバインドできます。

例:

<code class="javascript">methods: {
  handleClick(event) {
    console.log(this); // 指向 Vue 实例
  },
},</code>

<code class="html"><button @click="handleClick">Click Me</button></code>

4. グローバル オブジェクト

Vue ルート インスタンスの外側で、

this はグローバル オブジェクトを指します。 Vue オブジェクト。これは、グローバル設定と次のようなメソッドにアクセスできることを意味します:

<code class="javascript">console.log(this.$options.components); // 打印注册的全局组件
this.$mount(app); // 挂载 Vue 根实例</code>

以上がこれは vue で何を指しているのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。