Vue笔记(3)
学习内容
⊙ input的复用问题
⊙ v-show v-show与
⊙ v-for和key属性
⊙ 数组中哪些方法是响应式的
⊙ 图书购物车案例
⊙ 一些高阶函数的使用
input的复用问题
在学习v-if和v-else时做了一个登录注册切换的案例,但是当我们一开始在注册里输入邮箱时,发现其实已经有账号,但是当我们切换到登录方法以后,之前输入的内容还在,这其实是不合理的.
这是因为vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素
此时需要在input中添加key属性,只要key的值不同,那么就不会复用input了
v-show
我们来看看v-if和v-show的区别
isShow都为true时:
现在手动将data里面的isShow改为false:
两个都消失了,但是我们查看一下元素
可以发现,v-if的话是将整个包含v-if指令的元素直接在节点中删除,而v-show是将display属性改为了none.
开发中的选择:
- 当需要在显示与隐藏之间切换很频繁时,用v-show
- 当只有一次切换时,使用v-if
v-for
当我们有一组数据需要进行渲染时,我们就可以使用v-for来完成
v-for遍历数组
语法格式:
v-for='item in items'
如果在遍历的过程中,我们需要拿到元素在数组中的索引值呢?
语法格式:
v-for='(item, index) in items'
v-for遍历对象
v-for='(value, key, index) in info'
注意顺序,先是value才是key,最后是index
官方推荐我们在使用v-for时,给对应的元素或组件添加上一个: key属性
为什么需要key属性呢?
这个其实和vue的虚拟DOM的diff算法有关系,但是太复杂了我讲不明白...
但是一句话:key的作用就是为了能够高效地更新虚拟DOM
但是注意key的值必须要和我们想展示的内容一致,比如我们展示的是{{item}},那么一定是key='item'
数组中哪些是响应式方法
看一个不是响应式的方法:
通过索引值修改数组的值
可以看到虽然控制台中显示info的第一个值为'ddd',但是页面中的并没有响应,没有跟着变化,这种方法就不是响应式的
放一下老师的板书
案例时间
首先新建一个项目:
看一下结构:
先来看看头部
现在到tbody部分,但是我们当然不能把图书信息给写死,而是从data中拿到数据,然后渲染进去
大致就是这样的
当我们把所有图书删光了,就不显示表格而是显示'当前购物车为空',所以用v-if和v-else
一些高阶函数的使用
<script>
// 编程范式: 命令式编程/声明式编程
// 编程范式: 面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)
// filter/map/reduce
// filter中的回调函数有一个要求: 必须返回一个boolean值
// true: 当返回true时, 函数内部会自动将这次回调的n加入到新的数组中
// false: 当返回false时, 函数内部会过滤掉这次的n
const nums = [10, 20, 111, 222, 444, 40, 50]
// 1.filter函数的使用
// 10, 20, 40, 50
let newNums = nums.filter(function (n) {
return n < 100
})
console.log(newNums);
//
// 2.map函数的使用
// 20, 40, 80, 100
let new2Nums = newNums.map(function (n) { // 20
return n * 2
})
console.log(new2Nums);
//
// 3.reduce函数的使用
// reduce作用对数组中所有的内容进行汇总
let total = new2Nums.reduce(function (preValue, n) {
return preValue + n
}, 0)
console.log(total);
// 第一次: preValue 0 n 20
// 第二次: preValue 20 n 40
// 第二次: preValue 60 n 80
// 第二次: preValue 140 n 100
// 240
// 1.需求: 取出所有小于100的数字
// 2.需求:将所有小于100的数字进行转化: 全部*2
let new3Nums = []
for (let n of newNums) {
new2Nums.push(n * 2)
}
//
console.log(new3Nums);
// 3.需求:将所有new2Nums数字相加,得到最终的记过
let total1 = 0
for (let n of new2Nums) {
total += n
}
console.log(total1);
// 链式编程
let total2 = nums.filter(function (n) {
return n < 100
}).map(function (n) {
return n * 2
}).reduce(function (prevValue, n) {
return prevValue + n
}, 0)
console.log(total2);
// 一行实现
let total3 = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);
console.log(total3);
</script>