Explication détaillée de la façon d'implémenter la liaison bidirectionnelle des données à l'aide de Vue

Dans Vue.js, la liaison de données bidirectionnelle est une fonctionnalité très puissante. Elle peut maintenir les données et les vues synchronisées, permettant aux développeurs d'exploiter les données plus facilement. Dans cet article, nous présenterons comment utiliser Vue.js pour implémenter la liaison bidirectionnelle de données.

1. Comprendre la liaison bidirectionnelle

Tout d'abord, nous devons comprendre le principe de la liaison bidirectionnelle. Dans Vue.js, les données et les vues sont connectées via ViewModel (modèle de vue). Lorsque les données changent, le ViewModel met automatiquement à jour la vue. Lorsque la vue change, le ViewModel mettra automatiquement à jour les données. [Recommandations associées : Tutoriel vidéo vuejs, Développement frontal Web]

2. Utilisez la directive v-model

Vue.js fournit la directive v-model pour réaliser une liaison bidirectionnelle des données. La directive v-model peut être utilisée pour lier des valeurs pour former des éléments et des composants.

Par exemple, l'utilisation de la directive v-model sur un élément d'entrée peut réaliser une liaison bidirectionnelle de données :

<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>

Dans l'exemple ci-dessus, nous avons utilisé un élément d'entrée pour lier l'attribut de message, en utilisant {{ message }} Display données liées.

Lorsque nous saisissons du texte, les données et la vue seront automatiquement mises à jour simultanément. C'est ainsi que la directive v-model implémente la liaison de données bidirectionnelle.

3. Utilisez des composants personnalisés pour réaliser une liaison bidirectionnelle

En plus des éléments de formulaire, nous pouvons également utiliser des composants personnalisés pour réaliser une liaison bidirectionnelle de données.

Tout d'abord, nous devons définir un composant personnalisé et lier les données à l'aide de la directive v-model. Ensuite, nous devons définir un accessoire nommé value dans le composant et utiliser la méthode $emit() dans le composant pour déclencher un événement nommé input. De cette façon, vous pouvez utiliser la directive v-model dans le composant parent pour lier la valeur du composant personnalisé.

Par exemple, voici un composant de zone de saisie de nombre personnalisé :

<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>

Dans l'exemple ci-dessus, nous utilisons un élément d'entrée pour lier l'attribut value et utilisons la méthode $emit() pour déclencher un nom lors de la saisie Pour l'entrée événement.

Maintenant, nous pouvons utiliser la directive v-model dans le composant parent pour lier la valeur du composant personnalisé :

<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>

Dans le développement front-end, la liaison bidirectionnelle des données est une exigence très courante. En tant que framework JavaScript populaire, Vue.js fournit un moyen très pratique de réaliser une liaison bidirectionnelle de données. Cet article présentera comment Vue.js implémente la liaison bidirectionnelle des données.

4. Détournement de données

Vue.js utilise le piratage de données pour réaliser une liaison bidirectionnelle des données. Il détourne les méthodes setter et getter des propriétés d'objet en utilisant la méthode Object.defineProperty() dans ES5. De cette façon, lorsque les propriétés de l'objet changent, Vue.js peut écouter la modification et synchroniser la modification avec la vue.

Par exemple, nous pouvons définir une classe nommée Person puis détourner ses propriétés via la méthode 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)

Dans le code ci-dessus, nous détournons le nom et l'âge de la classe Person via Object.defineProperty( ) propriété de méthode. Lorsque nous attribuons une valeur à l'attribut name de l'objet personne, la méthode setter est déclenchée et « paramètre nom » est affiché. Lorsque nous lisons l'attribut nom de l'objet personne, la méthode getter est déclenchée et « obtenir le nom » est affiché. Output et _name sont renvoyés. La valeur de l'attribut.

5. Moteur de modèles

Vue.js utilise un moteur de modèles pour analyser les modèles DOM et générer du DOM virtuel. Virtual DOM est un objet JavaScript léger utilisé pour décrire la véritable arborescence DOM. Vue.js implémente la liaison bidirectionnelle des données en opérant sur le DOM virtuel.

Par exemple, nous pouvons définir un objet contenant les attributs de nom et d'âge et utiliser le moteur de modèle Vue.js pour le restituer sur la page :

<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 Explication détaillée de Object.defineProperty()

Vue.js. Le principe de base de la mise en œuvre de la liaison bidirectionnelle est d'utiliser la méthode Object.defineProperty() pour surveiller les modifications des données. Cette méthode reçoit trois paramètres, à savoir l'objet, le nom d'attribut et le descripteur d'attribut. Nous pouvons utiliser cette méthode pour définir une propriété et effectuer certaines opérations dans le getter et le setter de la propriété.

Les étapes pour implémenter la liaison bidirectionnelle dans Vue.js sont les suivantes :

1. Créez une instance Vue et définissez un objet de données contenant les données nécessitant une liaison bidirectionnelle. Par exemple :

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

2. En HTML, la liaison bidirectionnelle des données est obtenue à l'aide de la directive v-model. Par exemple :

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

3. Dans l'instance Vue, utilisez la méthode Object.defineProperty() pour surveiller les modifications apportées à la propriété de message dans l'objet de données, comme indiqué ci-dessous :

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

Dans le code ci-dessus, nous utilisons une variable en commençant par un _message de soulignement pour stocker les données réelles. Dans les getters et les setters, nous obtenons et définissons des données en accédant à _message, et nous pouvons effectuer certaines opérations dans les setters.

另外，在 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入门教程、编程基础视频）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!