初心者のための VueJs VueJs パーツのデータ バインディング

前のブログ/記事では、コンポーネントを作成、インポート、使用する方法を学びました。今回は、コンポーネントのデータ バインディングについて説明します。

コンポーネント内でのデータの使用

コンポーネント内のデータの定義
データは data() 関数で定義され、オブジェクトとして返されます。
以下に例を示します:

data() {
  return {
    message: 'Hello World!'
  };
}

ディレクティブによるバインド

v-bind: HTML 属性をデータにバインドします。

<img v-bind:src="imageUrl" alt="Example Image">

v-model: v-model ディレクティブは、フォーム入力での双方向のデータ バインディングに使用されます。入力値と Vue インスタンス データの同期が維持されます。基本的に、v-model は @input (変更をリッスンする) と :value (入力値を設定する) を組み合わせます。例:

<input v-model="message" />

これは以下と同等です:

<input :value="message" @input="message = $event.target.value" />

:value と @input を個別に使用する方法は次のとおりです:

<input :value="message" @input="message = $event.target.value" />

v-if ディレクティブは、ブール値に基づいて要素を条件付きでレンダリングします。条件が true の場合、要素はレンダリングされます。 false の場合、そうではありません。例:

<p v-if="isVisible">This is visible!</p>

v-for ディレクティブは、配列またはオブジェクトをループして要素をレンダリングするために使用されます。パフォーマンスを向上させるために、各要素に一意のキーを与えることができます。例:

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

v-on
v-on ディレクティブは、要素上のイベントをリッスンするために使用されます。便宜上、省略形の @ を使用できます。例:

<button v-on:click="handleClick">Click me!</button>

これは次のように短縮できます:

<button @click="handleClick">Click me!</button>

以上が初心者のための VueJs VueJs パーツのデータ バインディングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。