Vue中带$的接口是外部接口。我们通过Vue实例可以进行调用。Vue官方文档有对此的描述：
vm.$refs
-
类型：
Object -
只读
-
详细：
一个对象，持有注册过
ref特性 的所有 DOM 元素和组件实例。
从上面描述可以看出，是个对象，且是只读的。这个对象持有注册过ref特性的所有dom元素或组件实例。这句话的意思就是通过$refs可以访问到dom对象，就像通过getElementById("idName") 获取dom元素一样。
来个例子就清楚了：
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<script src="./vue.js"></script>
<div id="app">
<div id="div1Id" ref="div1Ref" style="margin-bottom: 20px">div 1 test</div>
<button @click="addBorder()">add border for div1</button>
</div>
<script>
const app = new Vue({
el: "#app",
methods : {
addBorder : function(){
//document.getElementById("div1Id").style.border = "5px solid red";
console.log("div1 is: " + this.$refs.div1Ref.outerHTML);
this.$refs.div1Ref.style.border = "5px solid blue";
}
}
});
</script>
</body>
</html>
如果哪里还有不清楚的地方，可以给我留言，哈哈
