vm中的  $refs

也可以说是 id=“” 
<h1 v-text="msg" ref="title"></h1>

methods: {
	showDOM(){
	  console.log(this.$refs.title) //真实DOM元素
	  console.log(this.$refs.btn) //真实DOM元素
	  console.log(this.$refs.sch) //School组件的实例对象（vc）
	}
},

默认脚手架删除：
组件删除，app.vue删除。
====================================================
脚手架小项目demo的写法
1.main.js 就不用写了。用默认就可以
2，写组件，shift+<  提示模板
   写{{name}}  export default 组件 可以写data也可以不写  写script  写css
3，写app.vue 引入组件，注册组件。  

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

APP.VUE

<template>
	<div>
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<School ref="sch"/>
	</div>
</template>

<script>
	//引入School组件
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue！'
			}
		},
		methods: {
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象（vc）
			}
		},
	}
</script>


components/School.vue 

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京·昌平'
			}
		},
	}
</script>

<style>
	.school{
		background-color: gray;
	}
</style>