Vueを使ったデータの双方向バインディングの実装方法を詳しく解説

Vue.js では、双方向データ バインディングは非常に強力な機能であり、データとビューの同期を維持できるため、開発者はより便利にデータを操作できます。この記事では、Vue.jsでデータの双方向バインディングを実装する方法を紹介します。

#1. 双方向バインディングの理解

まず、双方向バインディングの原理を理解する必要があります。 Vue.jsでは、データとビューはViewModel（ビューモデル）を介して接続されます。データが変更されると、ViewModel はビューを自動的に更新します。ビューが変更されると、ViewModel はデータを自動的に更新します。 [関連する推奨事項:

vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

2. v-model コマンドを使用する

Vue .js は、データの双方向バインディングを実装するための v-model ディレクティブを提供します。 v-model ディレクティブを使用して、値をフォーム要素およびコンポーネントにバインドすることができます。

たとえば、input 要素で v-model ディレクティブを使用すると、データの双方向バインディングを実現できます。

<template>
  <div>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: &#39;Hello, Vue.js!&#39;
    }
  }
}
</script>

上の例では、input 要素を使用してメッセージ属性をバインドします。 、バインドされたデータを表示するには、{{ message }} を使用します。

テキストを入力すると、データとビューが同期して自動的に更新されます。これは、v-model ディレクティブが双方向のデータ バインディングを実装する方法です。

3. カスタム コンポーネントを使用して双方向バインディングを実現する

フォーム要素に加えて、カスタム コンポーネントを使用してデータの双方向バインディングを実現することもできます。

まず、カスタム コンポーネントを定義し、v-model ディレクティブを使用してデータをバインドする必要があります。次に、コンポーネント内で value という名前のプロップを定義し、コンポーネント内で $emit() メソッドを使用して input という名前のイベントをトリガーする必要があります。このようにして、親コンポーネントで v-model ディレクティブを使用してカスタム コンポーネントの値をバインドできます。

たとえば、次はカスタム数値入力ボックス コンポーネントです:

<template>
  <div>
    <input type="number" :value="value" @input="$emit(&#39;input&#39;, $event.target.value)">
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    }
  }
}
</script>

上の例では、input 要素を使用して value 属性をバインドし、入力時に $ を使用します。 ) メソッドは、input という名前のイベントをトリガーします。

これで、親コンポーネントの v-model ディレクティブを使用して、カスタム コンポーネントの値をバインドできます。

<template>
  <div>
    <custom-input v-model="count"></custom-input>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import CustomInput from &#39;./CustomInput.vue&#39;

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      count: 0
    }
  }
}
</script>

フロントエンド開発では、データの双方向バインディングが重要です。非常に一般的なニーズ。人気の JavaScript フレームワークである Vue.js は、データの双方向バインディングを実現する非常に便利な方法を提供します。この記事では、Vue.js がデータの双方向バインディングを実装する方法を紹介します。

4. データ ハイジャック

Vue.js はデータ ハイジャックを使用して、データの双方向バインドを実現します。 ES5 の Object.defineProperty() メソッドを使用して、オブジェクト プロパティの setter メソッドと getter メソッドをハイジャックします。このようにして、オブジェクトのプロパティが変更されると、Vue.js はその変更をリッスンし、その変更をビューに同期できます。

たとえば、Person という名前のクラスを定義し、Object.defineProperty() メソッドを通じてそのプロパティをハイジャックできます。

class Person {
  constructor(name, age) {
    this._name = name
    this._age = age
  }

  get name() {
    return this._name
  }

  set name(name) {
    this._name = name
  }

  get age() {
    return this._age
  }

  set age(age) {
    this._age = age
  }
}

let person = new Person('Tom', 18)

Object.defineProperty(person, 'name', {
  get() {
    console.log('getting name')
    return this._name
  },
  set(name) {
    console.log('setting name')
    this._name = name
  }
})

Object.defineProperty(person, 'age', {
  get() {
    console.log('getting age')
    return this._age
  },
  set(age) {
    console.log('setting age')
    this._age = age
  }
})

person.name = 'Jerry'
console.log(person.name)

上記のコードでは、Object.defineProperty() を渡します。メソッド Person クラスの name 属性と age 属性をハイジャックします。 personオブジェクトのname属性に値を代入するとsetterメソッドが起動して「名前の設定」が出力され、personオブジェクトのname属性を読み取るとgetterメソッドが起動して「名前の取得」が出力されます。出力と _name が返され、属性の値が返されます。

5. テンプレート エンジン

Vue.js は、テンプレート エンジンを使用して DOM テンプレートを解析し、仮想 DOM を生成します。仮想 DOM は、実際の DOM ツリーを記述するために使用される軽量の JavaScript オブジェクトです。 Vue.js は、仮想 DOM 上で動作することにより、データの双方向バインディングを実装します。

たとえば、名前と年齢のプロパティを含むオブジェクトを定義し、Vue.js テンプレート エンジンを使用してそれをページ上にレンダリングできます:

<div id="app">
  <p>姓名：<input v-model="person.name"></p>
  <p>年龄：<input v-model="person.age"></p>
  <p>您的姓名是：{{ person.name }}</p>
  <p>您的年龄是：{{ person.age }}</p>
</div>

const app = new Vue({
  el: '#app',
  data: {
    person: {
      name: 'Tom',
      age: 18
    }
  }
})

6.Object.defineProperty( ) 詳細な説明

双方向バインディングを実装するための Vue.js の中心原則は、Object.defineProperty() メソッドを使用してデータの変更を監視することです。このメソッドは、オブジェクト、属性名、属性記述子の 3 つのパラメーターを受け取ります。このメソッドを使用してプロパティを定義し、プロパティのゲッターとセッターでいくつかの操作を実行できます。

Vue.js で双方向バインディングを実装する手順は次のとおりです。

Vue インスタンスを作成し、双方向バインディングが必要なデータを含むデータ オブジェクトを定義します。 。例:

javascriptCopy code
var vm = new Vue({
  data: {
    message: ''
  }
})

HTML では、データの双方向バインディングは v-model ディレクティブを使用して実現されます。例:

htmlCopy code
<input type="text" v-model="message">

Vue インスタンスでは、次に示すように、Object.defineProperty() メソッドを使用して、データ オブジェクトのメッセージ プロパティの変更を監視します。 #

javascriptCopy code
Object.defineProperty(vm, 'message', {
  get: function () {
    return this._message
  },
  set: function (newValue) {
    this._message = newValue
    // ...执行一些操作
  }
})

3. 上記のコードでは、アンダースコアで始まる変数 _message を使用して実際のデータを保存します。 getter と setter では、_message にアクセスしてデータを取得および設定し、setter でいくつかの操作を実行できます。

另外，在 Vue.js 中，我们还可以使用 $watch 方法来监听数据的变化。$watch 方法接收两个参数，第一个参数是需要监听的属性，第二个参数是回调函数，回调函数会在数据变化时执行。

下面是一个完整的 Vue.js 双向绑定的示例代码：

<div id="app">
  <input type="text" v-model="message">
  <p>您输入的内容是：{{ message }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

Object.defineProperty(vm, 'message', {
  get: function () {
    return this._message
  },
  set: function (newValue) {
    this._message = newValue
    console.log('您输入的内容是：' + this._message)
  }
})

在上面的代码中，我们创建了一个 Vue 实例，并且使用 v-model 指令来实现数据的双向绑定。然后，我们使用 Object.defineProperty() 方法来监听数据的变化，并且在 setter 中输出数据到控制台。

通过上面的代码示例，我们可以看到 Vue.js 实现数据的双向绑定非常简单，而且使用起来也非常方便。

（学习视频分享：vuejs入门教程、编程基础视频）

以上がVueを使ったデータの双方向バインディングの実装方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。