笔记

ref 是一个特殊的标签属性。
之前学过一个特殊的标签属性key。

由于本课程测试比较多，如果我们把所有组件都写到 src目录，有可能看起来不方便。所以我们可以新建一个目录: 01_src_分析脚手架 ，将来用的时候，就把该目录名调整为src。目的：方便使用同样的脚手架，方便区分不同节课的教学内容。

我们可以通过 vc对象 中的 $refs 找到 添加 ref属性 的标签：

通过 ref属性 拿 DOM 的方法：

1. 在 框架 中的 标签属性中添加 ref属性;
2. 在 交互 中通过 this.$refs.ref属性值 获取；

ref属性

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

源码

App.vue

<template>
    <div>
        <!-- 通过 id 拿 DOM 举例 -->
        <h1 v-text="msg" id="title-by-id"></h1> 

        <!-- Vue ref属性 拿DOM-->
        <h1 v-text="msg" ref="title"></h1>

        <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>

        <School ref="sch"/>
        <!-- 通过 id 拿 DOM 举例-->
        <School id="sch-by-id"/>
    </div>
</template>
我的一个网站 
<script>
    //引入School组件
    import School from './components/School'

    export default {
        name:'App',

        //注册组件
        components:{
            School
        },

        data() {
            return {
                msg:'欢迎学习Vue！'
            }
        },

        methods: {
            showDOM(){
                //在Vue中，直接用原生DOM操作，不太好。 因为 Vue 已经提供相关的方法。
                console.log(document.getElementById('title-by-id'))

                console.log(this)    //vc

                //通过 ref属性 拿 标签的DOM元素
                console.log(this.$refs.title) //真实DOM元素
                console.log(this.$refs.btn)   //真实DOM元素

                console.log(this.$refs.sch)   //拿的是School组件的实例对象（vc）
                //此时通过 原生DOM操作 拿到的 School组件 内容是: School组件中框架里的DIV。 说明和上面是有区别的。
                console.log(document.getElementById('sch-by-id'))
            }
        },
    }
</script>