「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」。
refs 和 DOM 操作
- vue 是数据驱动的,不提倡操作DOM,但是必要的时候还是要操作 DOM ,vue提供了一个行内属性,专门用来获取 DOM,
- vm.$refs 是Vue提供的实例属性,专门用来获取DOM元素
使用 refs
在需要获取的标签添加
ref="标识符"行内属性;然后在vue的实例中通过vm.$refs.标识符获取这个元素对象;如果有多个相同标识符的ref,vm.$refs将会获得一个数组;
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p ref="p1">{{msg}}</p>
<ul ref="ulList">
<li v-for="(item, index) in arr" :key="index" ref="wrap">{{item}}</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
// Vue 是数据驱动的，不提倡操作 DOM，但是必要的时候还是要操作 DOM，Vue 提供了一个行内属性，专门用来获取 DOM；
// this.$refs
let vm = new Vue({
el: '#app',
data: {
msg: '来学习啦?',
arr: [1, 2, 3, 4]
},
mounted() {
console.log(this.$refs);
// ref 属性可以用来获取 DOM；
// this.$refs.xxx xxx 是你要获取的 DOM 元素对象上 ref 属性的值，例如获取上面的 p 标签，
console.log(this.$refs.p1);
// 如果相同的 ref 值的元素有多个，那么获取到的是一个数组
console.log(this.$refs.wrap);
}
})
</script>
</body>
</html>
Vue 异步的 DOM 更新和 nextTick
- vue 更新 DOM 的机制
- vue 的 DOM 更新不是同步的,而是异步的如果我们希望获取更新数据后渲染的 DOM,我们需要使用 nextTick
nextTick
- 语法:
this.$nextTick(callBack); - 把 callBack 放到 DOM更新后执行
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p ref="p1">{{msg}}</p>
<ul ref="ulList">
<li v-for="(item, index) in arr" :key="index" ref="wrap">{{item}}</li>
</ul>
</div>
<script src="vue.js"></script>
<script>
// this.$refs
let vm = new Vue({
el: '#app',
data: {
msg: '来学习啦?',
arr: [1, 2, 3, 4]
},
mounted() {
this.arr.push(5, 6, 7);
console.log(this.$refs.wrap.length); // 4
console.log(this.arr); //1234567 数据都已更新
// 为啥是4？不是7？
// 因为 Vue 的 DOM 更新是异步的，如果我们希望获取更新数据后渲染出来的 DOM，我们需要使用 nextTick
this.$nextTick(() => {
// 这个 $nextTick 方法会在数据更新后，新的 DOM 挂载后执行；
console.log(this.$refs.wrap.length); // 7
console.log(this.arr); //1234567 数据都已更新
})
}
})
</script>
</body>
</html>
