ref属性
被用来给元素或者子组件注册引用信息（id的替代者）
通过案例来演示_ref属性
1 编写案例
如图：有一个按钮，点击按钮可以输出dom元素
备注：虽然vue不用我们亲自操作dom，但是有的特殊的情况下就要亲自操作dom
页面就是这个样子的
2 传统操作dom
如果使用传统的方式，给属性一个id，再使用document,getElementById是可以操作的，但是这些代码，本身就不应该出现在vue中，这里我应该给h1id属性的，但是给错了，问题不大
虽然可以实现，但是不推荐
3 vue的ref属性
原生的html喜欢给元素id标识，在vue中有类似的办法，不过不是使用id而是ref
这里面我给h1标签一个ref属性，然后单击的时候输出vc，可以看到里面有一个$refs属性，里面就死定义的ref属性
既然已经找到了refs，那么就可以使用$refs编写了
也是可以正常拿到dom元素的
4 细节问题
组件标签ref属性
上面我是给h1标签加了ref属性，h1属性html标签，但是如果想给school标签加ref呢？school可是组件标签
我们测试下
发现如果给组件标签加了ref，得到的就是这个组件的vc实例对象
组件标签id属性
但是如果给组件标签id标识，并且通过dom获取id，获取到的就不是vc实例对象了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2PybrVBM-1686884067583)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/14af9f946fd9440f914a96445850ab61~tplv-k3u1fbpfcp-zoom-1.image)]
观察发现得到的是实例的根容器
5 ref属性总结
1 被用来给元素或者子组件注册引用信息（id的替代者）
2 应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象（vc）
3 使用方式：
打标识：
…
或获取：this.$refs.xxx