Vue实现了MVVM模型,将数据和表现进行了分离,我们只需要更新数据就能使DOM同步更新,但是某些情况下,还是需要获取DOM元素进行操作
本文主要介绍几种在Vue中获取DOM元素的方法
1、使用DOM API直接找元素
<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>