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

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

青灯夜游

リリース： 2023-04-19 18:49:37

転載

10741 人が閲覧しました

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

#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(&#39;Tom&#39;, 18)

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

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

person.name = &#39;Jerry&#39;
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: &#39;#app&#39;,
  data: {
    person: {
      name: &#39;Tom&#39;,
      age: 18
    }
  }
})

ログイン後にコピー

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

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

javascriptCopy code
var vm = new Vue({
  data: {
    message: &#39;&#39;
  }
})

ログイン後にコピー

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

ログイン後にコピー

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

ログイン後にコピー

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

watch 方法来监听数据的变化。

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

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

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

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