vue-js-学习-5-条件渲染-列表渲染
上一级页面：vue-js-学习索引
本系列关注前端部分,根据学习路线图达到学习Vue.js的目的
developer路线图developer-roadmap/translations/chinese at master · kamranahmedse/developer-roadmap
前言
预先工作
新建src/components/TestConditionalRendering.vue
<script>
export default {
data() {
return {
message: "Hello Vue! Test XXXX.vue !",
};
},
methods: {
doSomething() {
alert("弹窗！！！");
},
},
computed: {},
};
</script>
<template>
<div class="greetings">
<h1>{{ message }}</h1>
</div>
</template>
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
top: -10px;
}
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
}
</style>/src/App.vue中
<script setup>
// 旧的
import HelloWorld from "./components/HelloWorld.vue";
// ....
//新导入的
import TestConditionalRendering from "./components/TestConditionalRendering.vue";
</script>更改/src/App.vue的template
<template>
<!-- 这里旧的别动 -->
<main>
<TestConditionalRendering/>
</main>
</template>
条件渲染
v-if、v-else、v-else-if
之前做过了，没难点，跟着教程做就行
<template> 上的 v-if
一个技巧，会就行了
v-show
会就行了，没难点
v-if vs. v-show
知道各自的使用场景即可
v-if 和 v-for
同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。
当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。
列表渲染
v-for
注意items是数组
data() {
return {
items: [{ message: 'Foo' }, { message: 'Bar' }]
}
}注意这个解构函数的写法
<li v-for="{ message } in items">
{{ message }}
</li>
<!-- 有 index 索引时 -->
<li v-for="({ message }, index) in items">
{{ message }} {{ index }}
</li>等价于下面的写法
<li v-for="item in items">
{{ item.message }}
</li>
<li v-for="(item, index) in items">
{{ item.message }}
</li>你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：
<div v-for="item of items">
{{ item.message }}
</div>v-for 与对象
知道就行
data() {
return {
myObject: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
}<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。
<template> 上的 v-for
知道就行
v-for 与 v-if
当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：
通过 key 管理状态（推荐，最佳实践）
这个还满重要的，知道就行
推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。
key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。
组件上使用 v-for
知道就行，随用随查
数组变化侦测
变更方法
这里介绍的方法很重要，用多了就记住了，先记住可以在这查。
替换一个数组：filter等
vue的filter仍然是比较高效的。相对于传统的丢弃现有的 DOM 并重新渲染整个列表的方法来说。
展示过滤或排序后的结果
这里的设计思想类似与实体与dto。
- dto的变更并不影响原实体的内容
- dto应该由于实体的变化而重新生成
在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本：
- return numbers.reverse()
+ return [...numbers].reverse()使用[…numbers].reverse()创建原数组的一个副本。