ref 和 $refs

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了

      <input type="text" ref="input1"/>
 <button @click="add">添加</button>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        methods:{
            add(){
                console.log(this.$refs.input1)
                this.$refs.input1.value=' 你好世界  $ refs!!'
            }
        }
    })
</script>

原型对象 event

      <button data-aid='123' @click="eventFn($event)">事件对象</button>      
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        methods: {
            eventFn(e) {
                console.log(e);
                // e.srcElement  dom节点
                e.srcElement.style.background = 'red';
                console.log(e.srcElement.dataset.aid); /*获取自定义属性的值*/
            }
        }
    })
</script>