开发者学堂课程【Vue.js 入门与实战：使用 ref 获取 DOM 元素和组件引用】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/586/detail/8189
使用 ref 获取 DOM 元素和组件引用
本节主要学习，vue 内能否获取 DOM 内的元素和组件,首先先使用如下代码：
哈哈哈，今天天气太好了!!!
var vm= new Vue({
el:’#app’,
Date:{}
methods:{
getElement (){
console.log(document.getElementById ( 'myh3 ' ) .innerText)}
右键执行浏览，可以正常显示，且无报错：
但是上面的代码，其实在无形之中操作了 DOM ，在 vue 中不推荐，所以需要使用 vue 提供的 ref 功能，此时代码可以改变成如下：
哈哈哈，今天天气太好了!!!
var vm= new Vue({
el:’#app’,
Date:{}
methods:{
getElement (){
console.log(document.getElementById ( 'myh3 ' ) .innerText)}
此时刷新浏览，展开看到执行结果：
通过 vm 拿到 myh3，在 vm 里面添加
console. log (this. $refs.myh3.innerText)
这时把
console.log(document.getElementById ( 'myh3 ' ) .innerText)注释掉，
ref是英文单词reference，
值类型 和 引用类型 referenceError（引用错误）。
在 h3 上，ref 没有带 s 的原因在于 h3 是一个标签，在input里面添加一个 rdf =“ mybth ”，如果把 myh3 这个元素，包起来就直接使用 ref 。
接下来学习 ref 如何获取组件，代码如下：
var login = {
template: '
登录组件
'}
var vm= new Vue({
el:’#app’,
Date:{}
methods:{
｝,
Components:{
Login
}
此时执行结果可以看到，登录组件已经显示：
之前是直接用 ref 引用了 DOM 元素，下面探究主键能不能有自己的方法：
代码：
data(){
return {
msg: 'son msg'}
},
methods: {
show(){
console.log('调用了子组件的方法')}
主键内部通过 this 访问到了， data 和 show ，当出发到对象的时候。在 getElemnetById 添加
console. 1og (this.$refs.mylogin.msg)，
此时网页显示：
同时也可以有自己的访问方法：
在 getElemnetById 里面添加这个
this.$refs.mylogin.show（）
保存到后在到网页里面观察。（图片如下：）
