Vue3 の JSX 構文: より柔軟なテンプレートの記述方法

Vue3 の JSX 構文: より柔軟なテンプレート作成方法

Vue は、現在最も人気のあるフロントエンド フレームワークの 1 つであり、応答性の高いデータ バインディングだけでなく、コンポーネント化機能も備えています。 Vue3 では、JSX 構文が正式に導入され、直感的で柔軟な機能を備えたこの構文は、Vue3 ユーザーにテンプレートを作成する新しい方法をもたらします。

それでは、JSX 構文とは何でしょうか?実際、JSX は JS の略語で、テンプレート言語に似ています。コード内に HTML 構造を直接記述します。DOM 要素だけでなくコンポーネントもサポートします。 JSX は、フロントエンド エンジニアリングのエクスペリエンスを向上させ続ける人気の高いイノベーションであり、Vue3 ではテンプレートの記述方法にも JSX が導入されています。

Vue3 の JSX 構文は、「Vue3 jsx」と呼ばれ、React の JSX 構文とよく似ていますが、Vue の特性によりよく一致させるために、Vue3 の JSX 構文にはいくつかの違いがあります。 。単一のファイル コンポーネントを作成することで、Vue3 での JSX 構文の使用を実証できます。

<template>
  <div class="box">
    <h1 id="title">{{ title }}</h1>
    <p>这是一个用Vue3 JSX编写的组件。</p>
    <button onClick={ handleClick }>点击我！</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      title: 'Vue3 JSX',
    }
  },
  methods: {
    handleClick() {
      alert('Clicked!')
    }
  }
})
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

Vue3 で JSX 構文を使用すると、「vue」 から import {defineComponent} を介してコンポーネントに defineComponent メソッドをインポートできることがわかります。は Vue3 で新しく追加されたメソッドで、コンポーネントのインスタンスを指定します。同時に、コンポーネント インスタンスのデータ、メソッド、その他の属性を定義します。コンポーネント テンプレートでは、二重括弧 {{}} を使用してデータをバインドすることも、関数を通じてメソッドをバインドすることもできます名前。

同様に、Vue3 もコンポーネントのネストをサポートしています。Vue3 のコンポーネント化のアイデアを組み合わせて、次のように新しいコンポーネントを導入できます:

<template>
  <div class="box">
    <h1 id="title">{{ title }}</h1>
    <p>这是一个用Vue3 JSX编写的组件。</p>
    <button onClick={ handleClick }>点击我！</button>
    <child-component></child-component>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import ChildComponent from './child-component'

export default defineComponent({
  data() {
    return {
      title: 'Vue3 JSX',
    }
  },
  methods: {
    handleClick() {
      alert('Clicked!')
    }
  },
  components: {
    ChildComponent
  }
})
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

ご覧のとおり、JSX 構文を使用する場合、サブコンポーネントは、コンポーネント テンプレートにタグを追加し、それをコンポーネントの components 設定に導入するだけです。

要約すると、Vue3 で JSX 構文を使用すると、次の利点が得られます。

1. より直感的: HTML 要素とコンポーネントを JSX 構文で直接記述できるため、より直感的になります。テンプレートの構造を反映します。
2. シンプルで使いやすい: Vue3 の JSX 構文は React の構文とほぼ同じであるため、開発者は簡単に始めることができます。
3. グローバル共有: JSX 構文を使用する従来の Vue コンポーネントは、モジュール間で再利用できます。
4. 柔軟な組み合わせ: JSX 構文は従来の Vue コンポーネント テンプレートと組み合わせて使用​​できるため、開発者は特定の状況に応じてテンプレート メソッドを選択できます。

つまり、Vue3 で JSX 構文を使用することは、より柔軟なテンプレート方法であり、より直感的で、シンプルで、使いやすく、組み合わせが容易であり、Vue3 ユーザーに優れた開発エクスペリエンスを提供します。 。

以上がVue3 の JSX 構文: より柔軟なテンプレートの記述方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。