vue给我们提供一个操作dom的属性，ref。绑定在dom元素上时，用起来与id差不多，通过this.$refs来调用:
<div ref="test">test</div> console.log(this.$refs.test)看到打印出来就是绑定的dom对象，可以用来执行一些dom操作，比如操作样式，获取属性等:
let testDom = this.$refs.test testDom.style.height = '200px' testDom.style.background = 'red' console.log(testDom.clientHeight)可以看到如果绑定在普通的dom元素上，与id用法基本一样，那肯定还有别的用法，比如 *循环渲染*:
//简单的数组: list:[1,2,3,4] //绑定在循环渲染上 <ul> <li v-for="(item,index) in list" :key="index" ref="list"> {{index}}--{{item}} </li> </ul> //打印看一下这个ref="list"是什么 console.log(this.$refs.list)可以看到是个数组，也很好理解，数组的每一项就是每个li元素。
ref除了这两个用法，还有另一种用法，绑定在组件标签上: 比如说我现在有个组件test: <template> <div style="height:200px;background:red;"></div> </template> <script> export default { name:'test', data() { return{ data:1 } }, methods: { _alert() { alert('test-ref') } } } </script>然后我把别的地方引用它，并绑定ref:
<test ref="test"></test> //打印出来看看这次是什么 console.log(this.$refs.test)可以看到这次和我们之前绑定在dom元素上有很大的不同，这次获取到的是一个VueComponent对象，里面有这个组件的各个属性，这些属性里面有一个$el，这就是dom对象，就是和我们直接绑定在dom元素上获取的一样:
let testDom = this.$refs.test.$el console.log(testDom.clientHeight) //打印出来就是设置的200这个$el属性，而且我们可以看到里面还有我们设置在data里面的变量，我们是可以直接通过这种ref的方式去修改，它就等于拿到那个组件的this，可以直接调用，不仅是data里面的变量，还有methods里面的方法:
//调用在之前组件里面定义的_alert()方法 this.$refs.test._alert()这种用法特别适合在用ui框架的组件的时候，ui框架给我们提供了很多组件的方法，就是要通过这个ref去调用,比如说element-ui的树形组件:
还有许多，用到外部框架组件的时候，就需要使用这种方法。
