close

Data Binding Vue.js: 詳しい説明と具体例

Data Binding は、アプリケーション内のデータとユーザー インターフェイス間の接続を確立できるようにする Vue.js の基本的な機能です。 これにより、モデルとビューの間でデータを動的に更新および同期できるため、シームレスで反応的なユーザー エクスペリエンスが提供されます。

Vue.js では、いくつかのタイプが利用可能です data binding。

 

1. Interpolation

Interpolation {{ }} Vue.js では、テンプレート内の 二重中括弧内に式を埋め込むことができます。

例： 

<div>  
  <p>{{ message }}</p>  
</div>

上の例では、 message はコンポーネントのデータ プロパティです。 の値が message 変更されると、タグ内のコンテンツが <p>  自動的に更新されます。

 

2. One-Way Binding

One-Way Binding コンポーネントのデータ プロパティからユーザー インターフェイスにデータをバインドできます。 データ プロパティの変更はユーザー インターフェイスに反映されますが、その逆は反映されません。 例： 

<div>  
  <p>{{ message }}</p>  
  <button @click="updateMessage">Update</button>  
</div>
data() {  
  return {  
    message: 'Hello Vue.js'  
  };  
},  
methods: {  
  updateMessage() {  
    this.message = 'Updated message';  
  }  
}

「更新」ボタンをクリックすると、 の値が message  変更され、ユーザーインターフェースに表示されます。

 

3. Two-Way Binding

Two-Way Binding モデルとユーザー インターフェイスの間でデータを同期できます。 モデルまたはユーザー インターフェイスでデータが変更されると、両方が自動的に更新されます。

例： 

<div>  
  <input v-model="message" type="text">  
  <p>{{ message }}</p>  
</div>
data() {  
  return {  
    message: 'Hello Vue.js'  
  };  
}

上記の例では、入力に入力された値が変数に更新され message  、逆も同様で、 message  変更されると、入力の値も更新されます。

 

4. Computed Properties

計算プロパティを使用すると、コンポーネント内の他のデータ プロパティに基づいて値を計算できます。

例： 

<div>  
  <p>Full Name: {{ fullName }}</p>  
</div>
data() {  
  return {  
    firstName: 'John',  
    lastName: 'Doe'  
  };  
},  
computed: {  
  fullName() {  
    return this.firstName + ' ' + this.lastName;  
  }  
}

上の例では、 は と fullName から計算される計算プロパティです 。 変更が あった 場合 も更新されます。 firstName lastName firstName lastName fullName

 

5 Watchers.:

Watchers 特定のデータ プロパティの変更を監視し、変更が発生したときに非同期または複雑なアクションを実行できます。

例： 

<div>  
  <p>Count: {{ count }}</p>  
</div>
data() {  
  return {  
    count: 0  
  };  
},  
watch: {  
  count(newValue, oldValue) {  
    // Perform action when count changes  
    console.log('Count changed:', newValue, oldValue);  
  }  
}

上記の例では、 の値が count 変更されるたびに、ウォッチャーがトリガーされ、対応するアクションを実行します。

これらの手法を利用すると Data Binding 、Vue.js の柔軟性を活用して、モデルとユーザー インターフェイスの間でデータを直接的かつ効率的な方法で簡単に管理および同期できます。

 

これらの data binding テクニックを利用すると、Vue.js アプリケーションで動的でインタラクティブなユーザー インターフェイスを作成できます。 data binding Vue.js は、データの管理と更新のプロセスを簡素化する 強力で柔軟なシステムを提供します。 data binding これらのそれぞれのアプローチを検討し、Vue.js プロジェクトにどのように実装できるかを見てみましょ う。