Ein ausführlicher Chat über Betriebsdaten und Methoden in Vue

Vue ist eines der beliebtesten JavaScript-Frameworks in der modernen Webentwicklung. Seine Verwendung kann die Entwicklungseffizienz und Wartbarkeit erheblich verbessern und einige komplexe Aufgaben erheblich vereinfachen. Der Kern von Vue ist datengesteuert und die Daten werden von Vue verwaltet. In Vue gibt es zwei Arten von Daten, nämlich Eigenschaften und reaktive Eigenschaften. Eine Eigenschaft bezieht sich auf einen oder mehrere Werte in einem Objekt, und eine reaktive Eigenschaft bezieht sich auf eine Eigenschaft, an die alle Eigenschaften gebunden sind seine Ansicht. Gleichzeitig bietet Vue auch viele Methoden zum Betreiben von Daten. Diese Methoden können problemlos mit komplexen Datenstrukturen wie Objekten und Arrays umgehen, wodurch die Datenpflege flexibler und effizienter wird.

1. Eigenschaften

Eine Eigenschaft in Vue ist ein oder mehrere Werte in einem Objekt, zum Beispiel:

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

Die oben genannten Code können wir durch Zugriff auf vm.message erhalten. In Vue können wir ihn auch über die Methode $data abrufen Attributwerte in diesem Fall, zum Beispiel: 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>

Das Festlegen der Attributwerte im Objekt erfordert auch die Beachtung einiger Details. Vue erlaubt keine direkte Änderung der Attributwerte im Objekt, aber Sie müssen die von Ihnen selbst bereitgestellten Vue-Methoden verwenden, zum Beispiel:

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

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

2. Responsive Eigenschaften

Reaktive Eigenschaften sind eine Art von Eigenschaft, die sich sofort widerspiegeln kann Änderungen an allen Daten, wenn sich die Dateneigenschaften in der Ansicht ändern, an die sie gebunden sind. Für responsive Eigenschaften in Vue müssen Sie die von Vue bereitgestellte Methode Vue.observable() verwenden, um die zu verfolgenden Daten als Parameter zu übergeben, zum Beispiel:

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

  })
}

Wenn wir im obigen Beispiel das Nachrichten- oder Zählattribut in reactiveData ändern, werden die Änderungen sofort mit der App-Komponente synchronisiert, ohne Methoden wie setState zu verwenden.

3. Datenbindung

Datenbindung ist eine Kernfunktion in Vue. Sie kann durch Datenbindung eine Verbindung zwischen der Ansicht und den Daten herstellen und so für mehr Effizienz und Komfort sorgen. Entwicklungsmethode. In Vue kann die Datenbindung in drei Methoden unterteilt werden: Interpolation, Bindungsausdruck und Bindungs-HTML.

1. Interpolation

Interpolation ist eine einfache und bequeme Möglichkeit, Variablen in das DOM einzufügen. Durch Interpolation können im DOM anzuzeigende Daten eingefügt werden. Der Interpolationsausdruck wird zwischen zwei Sätzen von Interpolationssymbolen {{ }} platziert, zum Beispiel:

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

Wenn der Wert von das Nachrichtenattribut Wenn Änderungen auftreten, wird es im DOM entsprechend aktualisiert.

2. Bindungsausdruck

Bindungsausdruck kann Variablen in DOM-Attribute einfügen. Bindungsausdrücke werden mit der Anweisung v-bind ausgeführt, zum Beispiel:

rrreee

Im obigen Beispiel binden wir ein Objekt, das sich in image befindet Die Daten im Attribut befinden sich im Attribut src. Wenn sich image ändert, wird gleichzeitig auch src aktualisiert. #🎜🎜##🎜🎜#3. Bindung von HTML#🎜🎜##🎜🎜#Bindung von HTML kann HTML-Code über die v-html-Direktive in das DOM einfügen. Dies ist eine sehr leistungsstarke Funktion, aber nicht sehr sicher, da sie zu Cross-Site-Scripting-Angriffen (XSS) führen kann, wenn Sie nicht vorsichtig sind. In Vue können wir den folgenden Code verwenden, um Benutzereingaben zu filtern: #🎜🎜#rrreee#🎜🎜# 4. Methoden #🎜🎜##🎜🎜# In Vue werden einige Methoden bereitgestellt, um Daten bequem zu bearbeiten sind unten aufgeführt: #🎜🎜##🎜🎜#1, $set und $delete#🎜🎜##🎜🎜#In Vue löst das direkte Ändern der Eigenschaften eines Objekts keine Aktualisierung der Ansicht aus. Daher ist dies erforderlich um die Methode $set zu verwenden, um manuell neue Attribute hinzuzufügen und die Aktualisierung der Ansicht auszulösen. Ebenso können wir die Methode $delete verwenden, um ein Attribut zu löschen, zum Beispiel: #🎜🎜#rrreee#🎜🎜#2, $nextTick#. 🎜🎜# #🎜🎜#Nach dem Ändern von Daten in der Vue-Life-Hook-Funktion kann der entsprechende DOM-Vorgang erst ausgeführt werden, wenn Vue das DOM rendert und aktualisiert. Wenn Sie einige DOM-Informationen benötigen, nachdem Vue das DOM gerendert hat, müssen Sie $nextTick verwenden, zum Beispiel: #🎜🎜#rrreee#🎜🎜#3, watch#🎜🎜##🎜🎜#watch kann Daten überwachen und Ändern Sie es, wenn es sich ändert. Führen Sie entsprechende Vorgänge aus, wenn das Nachrichtenattribut geändert wird, zum Beispiel: #🎜🎜#rrreee#🎜🎜#Der obige Code hört auf das Nachrichtenattribut und kann einige Vorgänge ausführen, wenn es sich ändert. #🎜🎜##🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#In diesem Artikel werden die Daten und Methoden in Vue vorgestellt. Dabei sind Eigenschaften und Reaktivität die Kernbestandteile von Vue, und die Datenbindung ist ein weiterer wichtiger Bestandteil von Vue. und listet außerdem einige gängige Methoden zum Bearbeiten von Daten auf. Da sich die Zeiten ändern, wird Vue weiterhin aktualisiert und iteriert. Immer mehr Entwickler entscheiden sich für die Verwendung von Vue. Ich glaube, dass die Zukunft von Vue immer besser wird. #🎜🎜#

Das obige ist der detaillierte Inhalt vonEin ausführlicher Chat über Betriebsdaten und Methoden in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!