Detaillierte Einführung in das Listen-Rendering in VueJS

Dieser Artikel bietet Ihnen eine detaillierte Einführung in die Listendarstellung in Vuejs. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Verwenden Sie v-for, um ein Array einem Satz von Elementen zuzuordnen

Wir verwenden den v-for-Befehl, um basierend auf der Optionsliste eines Satzes von Arrays zu rendern . Die v-for-Direktive erfordert eine spezielle Syntax des Formulars „item“ in „items“, wobei „items“ das Quelldatenarray und „item“ ein Alias ​​für die Iteration über die Array-Elemente ist.

<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: &#39;#example-1&#39;,
data: {
items: [
{ message: &#39;Foo&#39; },
{ message: &#39;Bar&#39; }
]
}
})

Im v-for-Block haben wir vollen Zugriff auf die Eigenschaften des übergeordneten Bereichs. v-for unterstützt auch einen optionalen zweiten Parameter, der den Index des aktuellen Elements darstellt.

<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: &#39;#example-2&#39;,
data: {
parentMessage: &#39;Parent&#39;,
items: [
{ message: &#39;Foo&#39; },
{ message: &#39;Bar&#39; }
]
}
})

Sie können anstelle von in auch als Trennzeichen verwenden, da dies die Syntax ist, die Javascript-Iteratoren am nächsten kommt

<p v-for="item of items"></p>

v-for für ein Objekt

Sie können v-for auch verwenden, um die Eigenschaften eines Objekts zu durchlaufen.

<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: &#39;#v-for-object&#39;,
data: {
object: {
firstName: &#39;John&#39;,
lastName: &#39;Doe&#39;,
age: 30
}
}
})

Sie können den zweiten Parameter auch als Schlüsselnamen angeben

<p v-for="(value, key) in object">
{{ key }}: {{ value }}
</p>

Der dritte Parameter ist der Index:

<p v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</p>

Beim Durchlaufen des Objekts ist es so Durchlaufen Sie gemäß den Ergebnissen von Object.key(), es gibt jedoch keine Garantie dafür, dass die Ergebnisse unter verschiedenen JavaScript-Engines konsistent sind

key

Wenn vue.js mit v- aktualisiert wird. Beim Rendern einer Liste von Elementen wird standardmäßig die Strategie der „direkten Wiederverwendung“ verwendet. Wenn die Reihenfolge der Datenelemente geändert wird. Vue verschiebt die DOM-Elemente nicht, um sie an die Reihenfolge der Datenelemente anzupassen, sondern verwendet einfach jedes Element dort wieder und stellt sicher, dass jedes Element an einem bestimmten Index gerendert angezeigt wird. Dies ähnelt track-by="$index" von vue1.x.

Dieser Standardmodus ist effizient, eignet sich jedoch nur für Listenwiedergabeausgaben, die nicht auf dem Unterkomponentenstatus oder dem temporären DOM-Status basieren (z. B. Formulareingabewerte).

Um Vue einen Hinweis zu geben, damit es die Identität jedes Knotens verfolgen und somit vorhandene Elemente wiederverwenden und neu anordnen kann, müssen Sie für jedes Element ein eindeutiges Schlüsselattribut bereitstellen. Der ideale Schlüsselwert ist eine eindeutige ID für jedes Element. Dieses spezielle Attribut entspricht dem Track-By von vue1.x, funktioniert jedoch wie eine Eigenschaft, sodass Sie v-bind verwenden müssen, um den Wert dynamisch zu binden.

<p v-for="item in items" :key="item.id">
<!-- 内容 -->
</p>

Es wird empfohlen, bei Verwendung von v-for so oft wie möglich den Schlüssel anzugeben, es sei denn, das Durchlaufen des Ausgabe-Dom-Inhalts ist sehr einfach oder man kann sich auf das Standardverhalten verlassen, um Leistungsverbesserungen zu erzielen.

Da es sich um einen allgemeinen Mechanismus für Vue zum Identifizieren von Knoten handelt, ist der Schlüssel nicht speziell mit v-for verbunden. Der Schlüssel hat auch andere Verwendungszwecke,

Erkennung von Array-Updates

Kompilierte Methoden

vue enthält kompilierte Methoden, die das Array immer beobachten, sodass sie auch Ansichtsaktualisierungen auslösen.

* push()————In Array

* pop()——— — Außerhalb des Arrays

* Shift()————

* Unshift ()

* splice()——Split array

* sort() ———— Array sortieren

* reverse() ———— Array umdrehen

Array ersetzen

Mutationsmethoden, die das von diesen Methoden aufgerufene ursprüngliche Array ändern. Im Gegensatz dazu gibt es auch nicht-mutationsbasierte Methoden. Zum Beispiel: filter(), concat() und Slice().

Diese ändern nicht das ursprüngliche Array, sondern geben immer ein neues Array zurück. Wenn Sie die Nicht-Mutationsmethode verwenden, können Sie das alte Array

example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})

durch ein neues Array ersetzen Veranlassen Sie Vue, den vorhandenen Dom zu verwerfen und die gesamte Liste neu zu rendern. Glücklicherweise ist dies nicht der Fall. Vue hat einige intelligente und heuristische Methoden implementiert, um die Wiederverwendung von DOM-Elementen zu maximieren. Daher ist das Ersetzen des ursprünglichen Arrays durch ein Array mit denselben Elementen ein sehr effizienter Vorgang.

Hinweise

Aufgrund von JavaScript-Einschränkungen kann Vue die folgenden geänderten Arrays nicht erkennen

1. Wenn Sie einen Index verwenden, um ein Element direkt festzulegen, zum Beispiel: vm.items [ indexOfItem] = newValue

2. Wenn Sie die Länge des Arrays ändern, zum Beispiel: vm.items.length = newLength

var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

Um die erste Art von Problem zu lösen, können die folgenden beiden Methoden den gleichen Effekt wie vm.items[indexOfItem] = newValue erzielen und auch eine Statusaktualisierung auslösen

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用vm.$set实例方法，该方法是全局方法vue.set的一个别名

vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用splice

vm.items.splice(newLength)

splice()方法向/从数组添加/删除项目，然后返回被删除的项目

arrayObject.splice(index,howmany,item1,.....,itemX)

index

必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。

howmany

必需。要删除的项目数量。如果设置为 0，则不会删除项目。

item1, ..., itemX

可选。向数组添加的新项目。

对象更改检测注意事项

还是由于javascript的限制，vue不能检测对象属性的添加或删除

var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
 
vm.b = 2
// `vm.b` 不是响应式

对于已经创建的实例，vue不能动态添加跟级别的响应式属性。但是，可以使用 Vue.set(object, key, value)方法向嵌套对象添加响应式属性。

var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})

你可以添加一个age属性到嵌套的userProfile对象：

Vue.set(vm.userProfile, 'age', 27)

你还可以使用vm.$set实例方法，他只是全局vue.set的别名

vm.$set(vm.userProfile, 'age', 27)

有事你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
你应该这样：
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})

显示过滤/排序结果

有事，我们想要显示一个数组的过滤或排序副本，而不实际改变 或重置原始数据。在这种情况下，可以创建返回过滤或排序 数组的计算属性。

<li v-for="n in evenNumbers">{{ n }}</li>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

在计算属性不使用的情况下，（例如，在嵌套v-for循环中）你可以使用method方法。

data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}

一段取值范围的v-for

v-for也可以取整数。在这种情况下 ，它将重复多刺激模板。

<p>
<span v-for="n in 10">{{ n }} </span>
</p>

v-for on a