suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Einführung in das Listen-Rendering in VueJS

Detaillierte Einführung in das Listen-Rendering in VueJS

不言
不言Original
2018-08-14 16:47:382843Durchsuche

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: [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
}
})
vm.items[1] = &#39;x&#39; // 不是响应性的
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: &#39;Anika&#39;
}
}
})

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

Vue.set(vm.userProfile, &#39;age&#39;, 27)

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

vm.$set(vm.userProfile, &#39;age&#39;, 27)

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

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

显示过滤/排序结果

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

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

类似于v-if,你也可以利用带有v-for的d477f9ce7bf77f53fbcf36bec1b69b7a渲染多个元素。

<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="pider" role="presentation"></li>
</template>
</ul>

v-for with v-if

当他们处于同一节点，v-for的优先级比v-if更高，这意味着v-if将分别重复运行与每个v-for循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用。

<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>

上面的代码只传递了未完成的 todos。

而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 d477f9ce7bf77f53fbcf36bec1b69b7a)上。如：

<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>

一个组件的v-for

了解组件相关知识，查看组件。完全可以先跳过他，以后再回来 查看。

在自定义组件里，你可以像任何普通元素一样用v-for.

<my-component v-for="item in items" :key="item.id"></my-component>

当在组件中使用 v-for 时，key 现在是必须的。

然而，任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里。

我们要用props:

<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index"
v-bind:key="item.id"
></my-component>

不自动将item注入到组件里的原因是，这会使得组件与v-for的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

<p id="todo-list-example">
<form v-on:submit.prevent="addNewTodo">
<label for="new-todo">Add a todo</label>
<input
v-model="newTodoText"
id="new-todo"
placeholder="E.g. Feed the cat"
>
<button>Add</button>
</form>
<ul>
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-on:remove="todos.splice(index, 1)"
></li>
</ul>
</p>

注意这里的is="todo-item"属性。这种做法在使用dom模板时是十分必要的。因为在ff6d136ddc5fdfeffaf53ff6ee95f185元素内只有25edfb22a4f469ecb59f1190150159c6元素 会被看做有效内容。这样做实现的效果与c20b531f5b99ef8837ce29ced08ba7cd相同。但是可以避开一些潜在的浏览器解析错误。

<p id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed the cat"
    >
    <button>Add</button>
  </form>
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</p>

注意这里的 is="todo-item" 属性。这种做法在使用 DOM 模板时是十分必要的，因为在 ff6d136ddc5fdfeffaf53ff6ee95f185 元素内只有 25edfb22a4f469ecb59f1190150159c6 元素会被看作有效内容。这样做实现的效果与 c20b531f5b99ef8837ce29ced08ba7cd 相同，但是可以避开一些潜在的浏览器解析错误。查看 DOM 模板解析说明 来了解更多信息。

Vue.component(&#39;todo-item&#39;, {
  template: &#39;\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\&#39;remove\&#39;)">Remove</button>\
    </li>\
  &#39;,
  props: [&#39;title&#39;]
})
 
new Vue({
  el: &#39;#todo-list-example&#39;,
  data: {
    newTodoText: &#39;&#39;,
    todos: [
      {
        id: 1,
        title: &#39;Do the dishes&#39;,
      },
      {
        id: 2,
        title: &#39;Take out the trash&#39;,
      },
      {
        id: 3,
        title: &#39;Mow the lawn&#39;
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = &#39;&#39;
    }
  }
})

相关推荐：

js实现页面间数据传递的代码

reac如何t实现更换皮肤颜色的功能

 jQuery中的方法有哪些?jQuery中常用的方法（附代码）

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das Listen-Rendering in VueJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery vue.js Object if sort for Filter 循环 Length JS 对象 作用域 dom ul li
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So bedienen und verwenden Sie MySQL in NodeJS (mit Code)Nächster Artikel：So bedienen und verwenden Sie MySQL in NodeJS (mit Code)

In Verbindung stehende Artikel

Mehr sehen