Vue ref - xiaoxustudy

Vue 官网中 ref 的部分：https://cn.vuejs.org/v2/api/#ref

ref 的作用：

如果想要获取元素对象，可以把 ref 绑定到元素上。ref 的作用相当于 dom 中的 querySelector 方法，可以获取到整个元素对象，获取到元素对象就可以进行获取元素对象的属性、给元素对象添加样式等操作。

举个例子：

实现在文本框进行键盘操作的同时在文本框右方实时输出文本框的内容。

把在 input 元素上给 ref 赋值一个引用，然后就可以通过 $refs 去获取注册了 ref 的 input 元素的属性 value，给 input 绑定事件，在文本框进行键盘操作时触发事件，执行 getName 或 getAge，将获取到的 value 赋给 name 属性或 age 属性，在文本框右方输出文本框内的内容。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="vue-app">
            <h1>ref</h1>
            <label>姓名</label>
            <input type="text" ref="mingzi" @keyup="getName"/>
            <span>{{ name }}</span><br>
            
            <label>年龄</label>
            <input type="text" ref="nianling" @keyup="getAge"/>
            <span>{{ age }}</span>
        </div>
        <script src="app.js"></script>
    </body>
</html>

test.html

//实例化对象
new Vue({
    el: '#vue-app',    
    data(){
        return{
            name: '',
            age: ''
        };
    },
    methods:{
        getName(){
            //获取姓名文本框的内容，修改name的值
            this.name = this.$refs.mingzi.value;
            console.log(this.$refs);
        },
        getAge(){
            //获取年龄文本框的内容，修改age的值
            this.age = this.$refs.nianling.value;
        }
    }
})

app.js

test.html :