第九篇 vue
Posted caix-1987 - 个人博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第九篇 vue相关的知识，希望对你有一定的参考价值。
v-for
我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名
data()
return
items: [ message: \'Foo\' , message: \'Bar\' ]
<li v-for="item in items">
item.message
</li>
在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引
data()
return
parentMessage: \'Parent\',
items: [ message: \'Foo\' , message: \'Bar\' ]
<li v-for="(item, index) in items">
parentMessage - index - item.message
</li>
实际上，你也可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似：
<li v-for=" message in items">
message
</li>
<!-- 有 index 索引时 -->
<li v-for="( message , index) in items">
message index
</li>
你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法
<div v-for="item of items"></div>
v-for 与对象
你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定
data()
return
myObject:
title: \'How to do lists in Vue\',
author: \'Jane Doe\',
publishedAt: \'2016-04-10\'
<ul>
<li v-for="value in myObject">
value
</li>
</ul>
可以通过提供第二个参数表示属性名 (例如 key)
<li v-for="(value, key) in myObject">
key : value
</li>
第三个参数表示位置索引
<li v-for="(value, key, index) in myObject">
index . key : value
</li>
在 v-for 里使用范围值
v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次
<span v-for="n in 10"> n </span>
注意此处 n 的初值是从 1 开始而非 0
上的 v-for
与模板上的 v-if 类似，你也可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块
<ul>
<template v-for="item in items">
<li> item.msg </li>
<li class="divider" role="presentation"></li>
</template>
</ul>
v-for 与 v-if
当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名
<!--
这会抛出一个错误，因为属性 todo 此时
没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
todo.name
</li>
在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)
<template v-for="todo in todos">
<li v-if="!todo.isComplete">
todo.name
</li>
</template>
通过 key 管理状态
Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。
默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况
为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute
推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能
key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
当你使用 <template v-for> 时，key 应该被放置在这个 <template> 容器上
<template v-for="todo in todos" :key="todo.name">
<li> todo.name </li>
</template>
组件上使用 v-for
我们可以直接在组件上使用 v-for，和在一般的元素上使用没有区别 (别忘记提供一个 key)
<MyComponent v-for="item in items" :key="item.id" />
但是，这不会自动将任何数据传递给组件，因为组件有自己独立的作用域。为了将迭代后的数据传递到组件中，我们还需要传递 props
<MyComponent
v-for="(item, index) in items"
:item="item"
:index="index"
:key="item.id"
/>
不自动将 item 注入组件的原因是，这会使组件与 v-for 的工作方式紧密耦合。明确其数据的来源可以使组件在其他情况下重用
数组变化侦测
Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替换一个数组
变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变 (immutable) 方法，例如 filter()，concat() 和 slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的：
this.items = this.items.filter((item) => item.message.match(/Foo/))
你可能认为这将导致 Vue 丢弃现有的 DOM 并重新渲染整个列表——幸运的是，情况并非如此。Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作
展示过滤或排序后的结果
有时，我们希望显示数组经过过滤或排序后的内容，而不实际变更或重置原始数据。在这种情况下，你可以创建返回已过滤或已排序数组的计算属性
data()
return
numbers: [1, 2, 3, 4, 5]
,
computed:
evenNumbers()
return this.numbers.filter(n => n % 2 === 0)
<li v-for="n in evenNumbers"> n </li>
在计算属性不可行的情况下 (例如在多层嵌套的 v-for 循环中)，你可以使用以下方法
data()
return
sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
,
methods:
even(numbers)
return numbers.filter(number => number % 2 === 0)
<ul v-for="numbers in sets">
<li v-for="n in even(numbers)"> n </li>
</ul>
在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本
return numbers.reverse()
return [...numbers].reverse()
与模板上的 v-if 类似，你也可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块<ul>
<template v-for="item in items">
<li> item.msg </li>
<li class="divider" role="presentation"></li>
</template>
</ul>
当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名<!--
这会抛出一个错误，因为属性 todo 此时
没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
todo.name
</li>
在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)<template v-for="todo in todos">
<li v-if="!todo.isComplete">
todo.name
</li>
</template>
Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
当你使用 <template v-for> 时，key 应该被放置在这个 <template> 容器上<template v-for="todo in todos" :key="todo.name">
<li> todo.name </li>
</template>
我们可以直接在组件上使用 v-for，和在一般的元素上使用没有区别 (别忘记提供一个 key)<MyComponent v-for="item in items" :key="item.id" />
但是，这不会自动将任何数据传递给组件，因为组件有自己独立的作用域。为了将迭代后的数据传递到组件中，我们还需要传递 props<MyComponent
v-for="(item, index) in items"
:item="item"
:index="index"
:key="item.id"
/>
不自动将 item 注入组件的原因是，这会使组件与 v-for 的工作方式紧密耦合。明确其数据的来源可以使组件在其他情况下重用
Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替换一个数组
变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变 (immutable) 方法，例如 filter()，concat() 和 slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的：
this.items = this.items.filter((item) => item.message.match(/Foo/))
你可能认为这将导致 Vue 丢弃现有的 DOM 并重新渲染整个列表——幸运的是，情况并非如此。Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作
有时，我们希望显示数组经过过滤或排序后的内容，而不实际变更或重置原始数据。在这种情况下，你可以创建返回已过滤或已排序数组的计算属性data()
return
numbers: [1, 2, 3, 4, 5]
,
computed:
evenNumbers()
return this.numbers.filter(n => n % 2 === 0)
<li v-for="n in evenNumbers"> n </li>
在计算属性不可行的情况下 (例如在多层嵌套的 v-for 循环中)，你可以使用以下方法data()
return
sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
,
methods:
even(numbers)
return numbers.filter(number => number % 2 === 0)
<ul v-for="numbers in sets">
<li v-for="n in even(numbers)"> n </li>
</ul>
在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本return numbers.reverse()
return [...numbers].reverse()
以上是关于第九篇 vue的主要内容，如果未能解决你的问题，请参考以下文章