$refs，$el，$data，$options区别及用法

1.$refs

作用跟jq的获取dom元素$一样
有三种用法：
1.ref加在普通的元素上，用this.$refs.(ref值)获取到的是dom元素
2.ref加在子组件上，用this.$refs.(ref值)获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.(ref值).方法()就可以使用了。
3.如何利用v-for和ref获取一组数组或者dom节点
需要注意的点：
1.通过 :ref=某变量添加ref，如果想获取该ref时需要加[0]，如this.$refs[refsArrayItem][0];如果不是 :ref=某变量的方式而是ref=某字符串时则不需要加，如this.$refs[refsArrayItem]
2.ref需要在dom渲染完成之后才会有，在使用的时候确保dom已经渲染完成，比如在生命周期mounted（）{}中调用，或者在this.$nextTick(()=>{})中调用。
3.如果ref是循环出来的，有多个重名，那么ref的值会是一个数组，此时要拿到单个的ref只需要循环就可以了。

<div id="app">
    <input type="text" ref="input1"/>
    <button @click="add">添加</button>
</div>
<script>
new Vue({
    el: "#app",
    methods:{
    add:function(){
        this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
        }
    }
})
</script>
注意：如果页面上有多个ref="input1"，只返回最后一个

2.$el

获取Vue实例关联的DOM元素
比方说我这里想获取自定义组件tabControl,并获取它的offsetTop，就需要先获取该组件
this.$refs.tabControl 就拿到了该组件，
获取offsetTop，组件不是DOM元素，是没有offsetTop的，无法通过 .offsetTop来直接获取的，就需要通过$el来获取组件中的DOM元素、

this.data=this.$refs.tabControl.$el.offsetTop

3.$data

获取Vue实例的data选项（对象）

4.$options

获取Vue实例的自定义属性（如vm.$options.methods,获取Vue实例的自定义属性methods）

var app   = new Vue({    
        el:"#container",    
        data:{    
                msg:"hello,2018!"    
        },    
        address:"长安西路"    //自定义属性
})    
console.log(app.$el);
返回Vue实例的关联DOM元素，在这里是#container
console.log(app.$data);
返回Vue实例的数据对象data，在这里就是对象{msg：”hello，2018“}
console.log(app.$options.address);
返回Vue实例的自定义属性address，在这里是自定义属性address
console.log(app.$refs.hello)
返回含有属性ref = hello的DOM元素（如果多个元素都含有这样的属性，只返回最后一个）<h3 ref = "hello">呵呵 1{{msg}}</h3>