ref和$refs

 JavaScript 和 jQuery 都是通过操作 DOM 节点元素去实现功能的， Vue 同样也有获取 DOM 节点的方法，那就是 ref 和 $refs，使用起来十分方便。

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

通过 vm.$refs.name 即可获取标记的元素，其中 vm 为 vue 创建的实例，name为 ref 的属性名，通常为驼峰命名。

<div id="app">
    <div>
        <h2 ref="name1">这是name1节点元素</h2>
        <p ref="name2">这是name2节点元素</p>
    </div>
</div>

mounted() {
    console.log(this);   //vue实例对象
    console.log(this.$refs.name1);   //上面的h2标签元素
    console.log(this.$refs.name1.textContent);  //标签内容
    console.log(this.$refs.name2);  //上面的p标签元素               
},

注意点：

①如果 ref 重名，后面的 ref 会覆盖掉前面的 ref 。②元素使用 v-for ，返回 DOM 节点数组。