これは vue で何を意味するのでしょうか?

Vue では、this の参照はコンテキスト オブジェクトに依存します。コンポーネント インスタンスでは、this は現在のコンポーネント インスタンスを参照します。イベント ハンドラーでは、これはイベントのターゲット要素を指します。カスタム ディレクティブでは、これはディレクティブ関数内のコンテキスト オブジェクトを指します。テンプレート内メソッドでは、これは現在のコンポーネント インスタンスを指します。

#Vue の this

Vue.js の場合、

this 値 のコンテキスト オブジェクトは現在のコンテキストのコンテキスト オブジェクトに依存します。これは通常、次のことを指します:

コンポーネント インスタンス

this が内部で使用される場合コンポーネント 、現在のコンポーネント インスタンスを指します。これにより、コンポーネントは、

データ
• メソッド
• 計算されたプロパティ
• ライフサイクル フック

にアクセスできるようになります。たとえば、次のコンポーネントでは、

this.message はコンポーネント インスタンスの message データ プロパティを参照します:

<code class="vue"><template>
  <div>{{ this.message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script></code>

イベント ハンドラー

this がイベント ハンドラーで使用される場合、イベントの target 要素を参照します。たとえば、次のコードでは、this はボタン要素を参照します。

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

<script>
export default {
  methods: {
    handleClick() {
      console.log(this) // 输出按钮元素
    }
  }
}
</script></code>

カスタム ディレクティブ

When

this is in the self 定義ディレクティブ内で使用される場合、ディレクティブのバインド、挿入、または更新関数内のコンテキスト オブジェクトを参照します。これにより、ディレクティブは以下にアクセスできるようになります:

バインドされた要素
• 要素に添付されたプロパティ
• Vue インスタンス (
• this.vm 経由)

内部テンプレート メソッド

内部テンプレート メソッドでは、

this は現在のコンポーネント インスタンスを参照します。これにより、コンポーネント スクリプト内と同様に、テンプレート内でコンポーネントのデータとメソッドにアクセスできるようになります。たとえば、次のコードは、テンプレート内のコンポーネントの greet() メソッドを呼び出します。

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