在Vue中獲取DOM節(jié)點(diǎn)是非常常見的操作，這個操作常常是用來獲取節(jié)點(diǎn)的屬性值或者是對節(jié)點(diǎn)進(jìn)行某些操作。Vue提供了幾種獲取DOM節(jié)點(diǎn)的方法，比如通過$el屬性、ref、$refs等，下面我們來逐一了解。
1.$el屬性
new Vue({
el: '#app',
mounted: function() {
console.log(this.$el) //輸出的DOM節(jié)點(diǎn)
}
})2.ref
new Vue({
el: '#app',
methods: {
getEle() {
console.log(this.$refs.test)
}
}
})<div ref="test">獲取的元素
當(dāng)組件渲染完成后，我們就可以直接通過$this.$refs.test來獲取到這個元素。但需要注意的是，ref是在渲染時被處理的，如果在模板里使用了v-if或者v-for等指令，那么在渲染時組件的 $refs 就不再是進(jìn)入 DOM 的子組件，而是只有一部分。
3.$refs
new Vue({
el: '#app',
methods: {
getEle() {
console.log(this.$refs.test)
}
}
})<div ref="test">獲取的元素
當(dāng)組件渲染完成后，我們就可以直接通過$this.$refs.test來獲取到這個元素。但需要注意的是，ref是在渲染時被處理的，如果在模板里使用了v-if或者v-for等指令，那么在渲染時組件的 $refs 就不再是進(jìn)入 DOM 的子組件，而是只有一部分。