Java登陆第三十七天——VUE3响应式基础、条件渲染、列表渲染
响应式数据
什么是响应式数据？
当数据发生改变时，DOM树的内容，会和数据同步更新。
vue3不是自动响应式数据，需要经过函数处理得到响应式数据对象。
ref和reactive
这两个函数都会返回响应式数据对象，但也有不同。
ref
ref通常用于将一个基本类型转为响应式数据对象。
基本类型包括：数、字符串、布尔值、null和undefined。
读写值（访问和修改属性值）
-
在script标签中，通过该对象.value属性，读写值。
-
在template标签中，直接访问该对象，读写值。
栗子
App.vue
<script setup>
//ref,reactive
import {ref, reactive} from 'vue'
//虽然ref和reactive都是响应式数据函数，但ref更常用于基本类型，reactive更常用于对象。
let str1 = ref(10);
let str2 = ref("msg");
</script>
<template>
<!--在事件绑定中，可以直接写一些简单的处理器-->
<h3 v-text="str1"></h3>
<button @click="str1++">按钮1</button>
<h3 v-text="str2"></h3>
<button @click="str2='hello'">按钮2</button>
</template>
<style scoped>
</style>
效果展示
reactive
reactive通常用于将一个对象转为响应式数据对象。
对象包括：数组，对象等。
读写值（访问和修改属性值）
可以直接访问该对象读写值。
栗子
App.vue
<script setup>
//ref,reactive
import {ref, reactive} from 'vue'
//虽然ref和reactive都是响应式数据函数，但ref更常用于基本类型，reactive更常用于对象。
//对象
let str3 = reactive({name: "张三", age: 18});
//数组
let str4 = reactive([ {name: "张三", age: 18}, {name: "李四", age: 18}, {name: "王五", age: 18} ]);
</script>
<template>
<!--在事件绑定中，可以直接写一些简单的处理器-->
<h3>{{str3.age}}</h3>
<button @click="++str3.age">按钮1</button>
<h3 v-text="str4"></h3>
</template>
<style scoped>
</style>
效果展示（栗子中去掉了ref的代码）
可以发现str4展示的好丑啊。没关系，在列表渲染中可以展示的更加完善。
条件渲染
条件渲染专门负责布尔表达式被满足时，才展示的数据/标签。
提供了三种条件渲染命令：v-if、v-else和v-show
语法格式如下：
<标签 v-if=" 布尔表达式 "></标签>
<标签 v-else=" 与v-if的布尔表达式相反 "></标签>
//类似于Java中的if和else
<标签 v-show=" 布尔表达式 "></标签>
条件渲染的特点：
-
同Java一样，v-else不能单独出现，必须跟随v-if。
-
某个标签的v-if的布尔表达式不被满足时，DOM树中不会出现该标签。
-
某个标签的v-show的布尔表达式不被满足时，DOM树中依然会出现该标签，只是display属性为none。
栗子
App.vue
<script setup>
import {ref} from 'vue';
//响应式数据，及时更新dom树
let flag = ref(true);
</script>
<template>
<!--展示条件渲染2、3特点-->
<h3 v-if="false">hello v-if!</h3>
<h3 v-show="false">hello v-show!</h3>
<h3 v-if="flag">hello world!我是flag为T</h3>
<h3 v-else>hello world!我是flag为F</h3>
<button @click="flag = !flag">切换flag</button>
</template>
<style scoped>
</style>
效果展示
当v-if的布尔表达式不成立时，DOM树中不会出现该内容。
列表渲染
列表渲染可以遍历。经常基于一个数组对象来渲染一个列表。
提供了一种列表渲染命令：v-for
语法格式如下：
<标签 v-for="item in items"></标签>
文本渲染的特点：
-
item in items类似与Java的foreach，只不过冒号变成了in。
-
官方不推荐在同一个标签内，和v-if一起使用。
注意是同一个标签内。可以是上下级标签。
栗子
App.vue
<script setup>
import {ref, reactive} from 'vue';
//响应式基础的str4
let per = reactive([{name: "张三", age: 18}, {name: "李四", age: 18}, {name: "王五", age: 18}]);
</script>
<template>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr v-for="p in per">
<td v-text="p.name"></td>
<td v-text="p.age"></td>
</tr>
<!--这种写法虽然生效，但是官方不推荐。降低了可读性-->
<tr v-if="per.length>0" v-for="p in per">
<td>per数组是空的</td>
</tr>
<!--使用了上级标签div，推荐，增加了可读性。-->
<div v-if="per.length>0">
<tr v-for="p in per">
<td v-text="p.name"></td>
<td v-text="p.age"></td>
</tr>
</div>
</table>
</template>
<style scoped>
</style>
效果展示
