ref

ref作用

在一般的JavaScript中,如果想要获取到某个DOM,是这样编写代码的:

var item=document.getElementById("item");
// ...其它代码

通过获取到某个DOM,可以修改其样式、innerHTML(这部分内容可以参见6_变量)等,而在Vue中可以使用ref来代替:

var item=this.$refs.item;

修改样式

<template>
  <button @click="fun">按钮</button>
  <div style="opacity: 0" class="item" ref="item"></div>
</template>

<script>
  export default {
    methods: {
      fun(){
        this.$refs.item.style.opacity=1;
      }
    }
  }
</script>

滚动

使用ref可以让一个DOM滚动

this.$refs.Element.scrollTo({
  top: 100, // 滚动到距离顶部100像素
  behavior: 'smooth',
})