<div class="loogEl">
   <h1 @click="fn()" ref="h1ss">
     Lorem, ipsum
   </h1>
   <hello-world ref="halloword"></hello-world>
 </div>

el:拿到当前实例的dom，可以进行dom操作

注意：要在dom挂载完成之后（mounted）

  beforeMount () {
    console.log('this.$el:', this.$el) // this.$el: undefined
  },
  mounted () {
    console.log('this.$el:', this.$el)  // this.$el
    this.$el.style.color = 'red'
  },

ref:dom挂载完成之后（mounted）

 1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素  
 **（跟el一样，拿到dom）**
 2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法和变量。
 **注意**：操作dom，必须和el一起使用

 beforeMount () { 
    console.log(this.$refs.halloword.$el.style.color = 'blue'); //报错
  },
  mounted () {
    console.log(this.$refs.halloword.$el.style.color = 'blue');  //变色
  },

 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
 

 <h3 v-for="value in msg" ref="number">{{value}}</h3>
 
  data () {
    return {
      msg: ['one', 'two', 'three']
    }
  },
  
    mounted () {
    console.log(this.$refs.number);  //[h3, h3, h3]
  },

** 注意**：配合this.$nextTick使用也可以在created、beforemounted等里面用el、ref