Vue中的ref属性

官方文档里有这样的解释：ref(string is expected)被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，引用指向DOM元素；如果在子组件上使用，引用指向组件实例：

<!-- `vm.$refs.p` 将会是一个DOM节点 -->
<p ref="p">hello</p>

<!-- `vm.$refs.child` 将会是子组件的实例 -->
<child ref="child"></child>

需要注意的是：ref本身是作为渲染结果被创建的，在初始渲染的时候它们并不存在，因此不能访问到它们！ $refs不是响应式的，因此它不能用在模板中做数据绑定。

由官方文档可以看到，ref的引用就是DOM节点或组件实例的别名，通过在父组件中注册别名可以很方便的调用和管理各种组件实例，而对于DOM元素来说，其类似于document.getElementById("#id")，但它们也有本质的区别。其区别就在于Vue操纵的是虚拟DOM而document方法操纵的是真实DOM，也因此不能将ref在模板中进行数据绑定。

为了更加直观，用普通DOM来举例：

<div id="app">
      <input type="text" value="HelloWorld" alt="captcha" ref="text">
      <button @click="changeText">change word</button>
</div>

用ref实现对input中文本内容的改动

var app = new Vue({ 
    el: '#app',
    data: {
    },
    //添加一个方法
     methods:{
    //改变文字
     changeText () {
  	this.$refs.text.value = 'Hello Vue!'
     }
  }
});