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

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

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

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

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

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

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

これは次と同等です:

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

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

This is visible!

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

• {{ item.name }}

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

Click me!

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

Click me!