Une discussion approfondie sur les données et méthodes d'exploitation en vue

Vue est l'un des frameworks JavaScript les plus populaires dans le développement Web moderne. Son utilisation peut considérablement améliorer l'efficacité et la maintenabilité du développement et simplifier considérablement certaines tâches complexes. Le cœur de Vue est basé sur les données et les données sont gérées par Vue. Dans Vue, il existe deux types de données, à savoir les propriétés et les propriétés réactives. Une propriété fait référence à une ou plusieurs valeurs dans un objet, et une propriété réactive fait référence à une propriété qui peut réagir immédiatement lorsqu'elle change. sa vue. Dans le même temps, Vue fournit également de nombreuses méthodes pour exploiter les données. Ces méthodes peuvent facilement gérer des structures de données complexes telles que des objets et des tableaux, rendant la maintenance des données plus flexible et efficace.

1. Propriétés

Une propriété dans Vue est une ou plusieurs valeurs dans un objet, par exemple :

var vm = new Vue({
  data: {
    message: 'Hello Vue!'
  }
})

Dans le code ci-dessus, nous pouvons accéder à vm.message Obtenir le Bonjour Vue !. Dans Vue, nous pouvons également obtenir toutes les valeurs d'attribut​​dans l'instance via la méthode $data, par exemple : vm.message来获取到Hello Vue!，在Vue中我们也可以通过$data方法来获取该实例中所有的属性值，例如：

console.log(vm.$data) // 输出 {message: "Hello Vue!"}

设定对象中的属性值也需要注意一些细节，Vue不允许直接对对象中的属性值进行修改，而是需要使用Vue自己提供的方法，例如：

vm.message = 'Hello World!' // 不会修改message的值
vm.$set(vm.obj, 'newProp', 123) // 增加一个名为newProp的属性并设置值为123
vm.$delete(vm.obj, 'propToDelete') // 删除一个名为propToDelete的属性

二、响应式属性

响应式属性（reactive property）是一种能够在数据变化时立即将变化反应到所有绑定于它的视图上的属性。Vue中的响应式属性，需要使用Vue提供的Vue.observable()方法，将要追踪的数据作为参数传递进去，例如：

// 定义一个简单的响应式对象
var reactiveData = Vue.observable({
  message: 'Hello Vue!',
  count: 0
})

// 修改响应式对象中的值
reactiveData.message = 'Hello World!'
reactiveData.count++

// 在函数组件中使用reactiveData
var App = {
  render() {
    return `
      <div>
        <p>${reactiveData.message}</p>
        <p>${reactiveData.count}</p>
      </div>
    `
  }
}

在上述的例子中，当我们修改reactiveData中的message或count属性时，变化会立刻同步到App组件中，不需要使用诸如setState之类的方法。

三、数据绑定

数据绑定是Vue中的一个核心特性，可以通过数据绑定将视图与数据建立起联系，提供更加高效、方便的开发方式。在Vue中，数据绑定可以分为三种方式，分别是插值、绑定表达式和绑定HTML。

1、插值

插值是一种简单、便捷的方式，它可以将变量插入到DOM中。插值可以在DOM中插入要显示的数据，插值表达式放在两组插值符号{{ }}之间，例如：

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

当message属性的值发生变化的时候，它在DOM中就会被相应的更新。

2、绑定表达式

绑定表达式可以在DOM的属性中插入变量。绑定表达式使用指令v-bind来进行，例如：

<img v-bind:src="image" />

在上述的例子中，我们绑定了一个位于image属性中的数据在src属性中。当image改变时，src也会同步更新。

3、绑定HTML

绑定HTML可以通过v-html

<div v-html="$sanitize(html)"></div>

dans le paramètre Valeurs d'attribut de l'objet. ​​vous devez également faire attention à certains détails. Vue ne permet pas la modification directe des valeurs d'attribut​​dans l'objet, vous devez plutôt utiliser les méthodes fournies par Vue elle-même, telles que :

vm = new Vue({
  data: {
    a: 1
  }
})

// `vm.a` 是响应式的
vm.$set(vm, 'b', 2) // 该值是响应式的
vm.$delete(vm, 'a') // `vm.a` 不再是响应式的

2. Réactif. propriétés

Propriété réactive C'est une propriété qui peut immédiatement refléter les modifications apportées à toutes les vues qui y sont liées lorsque les données changent. Pour les propriétés réactives dans Vue, vous devez utiliser la méthode Vue.observable() fournie par Vue pour transmettre les données à suivre en tant que paramètre, par exemple :

mounted() {
  this.$nextTick(() => {
    // DOM 渲染完之后执行的代码

  })
}

Dans l'exemple ci-dessus, lorsque nous modifions reactiveData Lors de l'utilisation de l'attribut message ou count dans le composant App, les modifications seront immédiatement synchronisées avec le composant App, sans qu'il soit nécessaire d'utiliser des méthodes telles que setState.

3. Liaison de données

La liaison de données est une fonctionnalité essentielle de Vue. Elle peut connecter des vues et des données via la liaison de données, offrant une méthode de développement plus efficace et plus pratique. Dans Vue, la liaison de données peut être divisée en trois méthodes, à savoir l'interpolation, l'expression de liaison et la liaison HTML.

1. Interpolation

L'interpolation est un moyen simple et pratique d'insérer des variables dans le DOM. L'interpolation peut insérer des données à afficher dans le DOM. L'expression d'interpolation est placée entre deux ensembles de symboles d'interpolation {{ }}, par exemple :

data () {
  return {
    message: ''
  }
},
watch: {
  message (newVal, oldVal) {
    console.log(`new message is ${newVal}`)
    console.log(`old message is ${oldVal}`)
  }
}

Lorsque la valeur de l'attribut de message change, elle Le DOM sera mis à jour en conséquence.

2. Expressions de liaison

Les expressions de liaison peuvent insérer des variables dans les attributs DOM. Les expressions de liaison sont effectuées à l'aide de l'instruction v-bind, par exemple :

rrreee

Dans l'exemple ci-dessus, nous lions une donnée située dans l'attribut image dans src Attribut . Lorsque image change, src sera également mis à jour simultanément. 🎜🎜3. Liaison HTML🎜🎜La liaison HTML peut insérer du code HTML dans le DOM via la directive v-html. Il s’agit d’une fonctionnalité très puissante, mais peu sécurisée, car elle peut conduire à des attaques de type cross-site scripting (XSS) si vous n’y faites pas attention. Dans Vue, nous pouvons utiliser le code suivant pour filtrer les entrées de l'utilisateur : 🎜rrreee🎜 IV Méthodes 🎜🎜Dans Vue, certaines méthodes sont fournies pour manipuler facilement les données. Certaines méthodes couramment utilisées sont répertoriées ci-dessous : 🎜🎜1 , $set et $. delete🎜🎜Dans Vue, modifier directement les propriétés d'un objet ne déclenchera pas une mise à jour de la vue, nous devons donc utiliser la méthode $set pour ajouter manuellement de nouvelles propriétés et déclencher une mise à jour de la vue. De même, nous pouvons utiliser $. delete pour supprimer un attribut, par exemple : 🎜rrreee🎜2, $nextTick🎜🎜Après avoir modifié les données dans la fonction de hook de vie de Vue, l'opération DOM correspondante ne peut pas être effectuée tant que Vue n'a pas rendu et mis à jour le DOM. Si vous avez besoin d'obtenir des informations DOM après que Vue ait rendu le DOM, vous devez utiliser $nextTick, par exemple : 🎜rrreee🎜3 watch🎜🎜watch peut surveiller une donnée et effectuer les opérations correspondantes lorsqu'elle change, par exemple : 🎜rrreee. 🎜Le code ci-dessus L'attribut de message est surveillé et peut effectuer certaines opérations lorsqu'il change. 🎜🎜Résumé🎜🎜Cet article présente les données et les méthodes de Vue. Les propriétés et la réactivité sont les éléments essentiels de Vue. La liaison de données est une autre partie importante de Vue. Il répertorie également certaines méthodes courantes de manipulation des données. À mesure que les temps changent, Vue continue d'être mise à jour et itérée. De plus en plus de développeurs choisissent d'utiliser Vue. Je pense que l'avenir de Vue sera de mieux en mieux. 🎜

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!