Vue中怎么用$ref来操作dom

ref前言：

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例

---

this.$refs前言：

this.$refs是一个对象，持有当前组件中注册过 ref特性的所有 DOM 元素和子组件实例

---

具体的写法：

Html部分：我们在html中写一个h1标签上面添加上ref=‘‘name’，在写一个点击事件，用来改变h1

<template>
  <div>
    <h1 ref="name">{{ name }}</h1>
    <button @click="nameClick">点击一下</button>
  </div>
</template>

JavaScript部分：我们用this.$refs来进行操作

<script>
export default {
  data() {
    return {
      name: "我是Xq",
    };
  },
  methods: {
    nameClick() {
      this.$refs.name.style.color = "red";
      this.$refs.name.style.fontSize = 50 + "px";
      this.$refs.name.style.transition = 2 + "s";
    },
  },
};
</script>

---

扩展$nextTick

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作并无作用，而在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象

this.$nextTick(function() {
	
})