当前位置：首页 > news >正文

【VUE】day05-ref引用

news 2025/3/21 2:00:20

这里写目录标题

1. ref引用
- 1.1 使用ref引用组件
2. this.$nextTick(cb)方法
3. 购物车案例
- 3.1 数组中的方法 - some循环
- 3.2 数组中的方法 - every循环
- 3.3 数组中的方法 - reduce
4. 购物车案例

1. ref引用

ref用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用。

每个vue的组件实例上，都包含一个$ref对象，里面存储着对应的DOM元素或组件的引用。默认情况下，组件的$ref指向一个空对象。

在这里插入图片描述

==================================================================================
在这里插入图片描述

在这里插入图片描述

1.1 使用ref引用组件

如果想要使用ref引用页面上的组件实例，则可以按照下面的方式进行操作：
在这里插入图片描述

在这里插入图片描述

2. this.$nextTick(cb)方法

组件的$nextTick(cb)方法，会把cb回调推迟到下一个DOM更新周期之后执行。通俗的理解是：等组件的DOM更新完成之后，再执行cb回调函数。从而能保证cb回调函数可以操作到最新的DOM元素。

3. 购物车案例

3.1 数组中的方法 - some循环

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const arr = ['小红', '你大红', '苏大强', '宝']// forEach 循环一旦开始，无法在中间被停止/* arr.forEach((item, index) => {console.log('object')if (item === '苏大强') {console.log(index)}}) *//* arr.some((item, index) => {console.log('ok')if (item === '苏大强') {console.log(index)// 在找到对应的项之后，可以通过 return true 固定的语法，来终止 some 循环return true}}) */</script>
</body></html>

3.2 数组中的方法 - every循环

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const arr = [{ id: 1, name: '西瓜', state: true },{ id: 2, name: '榴莲', state: false },{ id: 3, name: '草莓', state: true },]// 需求：判断数组中，水果是否被全选了！const result = arr.every(item => item.state)console.log(result)</script>
</body></html>

3.3 数组中的方法 - reduce

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const arr = [{ id: 1, name: '西瓜', state: true, price: 10, count: 1 },{ id: 2, name: '榴莲', state: false, price: 80, count: 2 },{ id: 3, name: '草莓', state: true, price: 20, count: 3 },]// 需求：把购物车数组中，已勾选的水果，总价累加起来！/* let amt = 0 // 总价arr.filter(item => item.state).forEach(item => {amt += item.price * item.count})console.log(amt) */// arr.filter(item => item.state).reduce((累加的结果, 当前循环项) => { }, 初始值)const result = arr.filter(item => item.state).reduce((amt, item) => amt += item.price * item.count, 0)console.log(result)</script>
</body></html>