「经典题」Vue获取DOM的几种方法？
Vue实现了模型，将数据和表现进行了分离，我们只需要更新数据就能使DOM同步更新，但是某些情况下，还是需要获取DOM元素进行操作
本文主要介绍几种在Vue中获取DOM元素的方法
1、使用DOM 直接找元素
<script>
...
mounted () {
let elm = this.$el.querySelector(#id)
}
</script>
Vue组件在patch阶段结束时会把this.$el赋值为挂载的根dom元素，我们可以直接使用$el的querySelector, querySelectorAll等方法获取匹配的元素。
2、refs
<template>
<div ref="bar">{
{ foo }}</div>
<MyAvatar ref="avatar" />
...
</template>
<script>
...
mounted () {
let foo = this.$refs[bar] // 一个dom元素
let avatar = this.$refs[avatar] // 一个组件实例对象
}
</script>
使用组件实例的$refs即可拿到组件上ref属性对应的元素。 如果ref属性加在一个组件上，那么拿到的是这个组件的实例，否则拿到的就是dom元素了。
3、使用自定义指令
Vue提供了自定义指令，官方文档给出了如下的使用方法，其中el就是dom元素的引用
Vue.directive(focus, {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 在模板中
<template>
<input v-model="name" v-focus />
</template>
上一篇：
92天倒计时，蓝桥杯省赛备赛攻略来啦~
下一篇：
【每日一题】Day8 有效的括号