Vue学习——ref属性

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

<template>
    <div class="blogger">
        <h2 ref="title">{{name}}</h2>
        <el-button type="primary" plain icon="el-icon-s-opportunity" @click="showDOM">点我输出上方的DOM元素</el-button>
        <el-button type="primary" icon="el-icon-s-promotion" @click="skip">点我跳转到博主博客</el-button>
    </div>
</template>

<script>
export default {
    name:'Blogger',
    data() {
        return {
            name: '才疏学浅的小缘同学',
        }
    },
    methods:{
        skip() {
            window.location.href="https://xiaoyuan.blog.csdn.net/"
        },
        showDOM() {
            console.log(this.$refs.title)
        }
    }
}
</script>

<style>
    .blogger{
        text-align: center;
    }
</style>