Vue CLI 系列之（三）ref标签属性

ref标签属性

1. 被用来给元素或子组件注册引用信息【打个标识，回头我能找到你】（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
   1. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>
   2. 获取：this.$refs.xxx

文件更新后保存，页面会自动刷新，但脚手架不会自动刷新控制台【控制台之前输出的信息保留着】

刷新页面：Ctrl + R 或 F5

组件中配置项的顺序：没有固定的顺序，但一般遵循name、components、然后再是其他的

Vue中为了避免直接通过原生DOM操作获取某个元素【DOM】，提供了ref标签属性

原生DOM操作中通过Document.getElementByID('id的值')获取DOM元素

Vue中通过this.$refs.'ref的值'获取DOM元素

Vue会收集所有标注了ref属性的标签信息：

​ 如果标注在了普通的HTML标签上，就会将对应HTML标签的DOM元素放入组件实例对象的$refs中

​ 如果标注在了组件标签上，就会将组件标签对应组件的实例对象放入组件实例对象的$refs中

对比id和ref标签属性：

标签属性	标注在HTML标签上	标注在组件标签上
id	获取到真实DOM	获取到组件标签对应组件的完整DOM结构
ref	获取到真实DOM	获取到组件标签对应组件的实例对象【vc】