1.Vue特殊特性
Vue特点: 数据驱动界面更新, 无需操作DOM来更新界面
也就是说Vue不推荐我们直接操作DOM, 但是在企业开发中有时候我们确实需要拿到DOM操作DOM
那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM?
在Vue中如果想要拿到DOM元素我们可以通过 ref
来获取
2.ref使用
2.1 在需要获取的元素上添加ref属性
<p ref="mypp">我是段落</>
2.2 在使用的地方通过 this.$refs.xxx获取
this.$refs.mypp
3.ref特点
ref
添加到元素DOM上, 拿到的就是元素DOM
ref
添加到组件上, 拿到的就是组件
如果拿到的是组件,那么就可以拿到组件中的data、methods等
4.注意点:
1.如果是通过原生的语法来获取元素, 无论是原生的元素还是自定义的组件, 拿到的都是原生的元素
VUE官方并不推荐我们这样获取
2.在Vue中如果想获取原生的元素或者获取自定义的组件, 可以通过ref
来获取
ref 如果是添加给元素的元素, 那么拿到的就是元素的元素
ref 如果是添加给自定义的组件, 那么拿到的就是自定义的组件
3.关于 ref
注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs 也不是响应式的,因此你不应该试图用它在模板中做数据绑定。(官网原话)
4.$refs
只会在组件渲染完成之后生效,并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。(官网原话)
子组件ref—访问子组件实例或子元素(vue官网说明)
$refs----vue官网说明
5.使用注意点
<div class="lyric" ref="lyric"></div>
直接通过
this.$refs.lyric.offsetHeight
拿到的是undefined,因为this. r e f s . l y r i c 拿 到 的 v u e 组 件 , 从 组 件 中 拿 到 原 生 的 元 素 t h i s . refs.lyric拿到的vue组件,从组件中拿到原生的元素 this. refs.lyric拿到的vue组件,从组件中拿到原生的元素this.refs.lyric.$el.offsetHeight
学习笔记❥(^_-)