在Vue中，查詢DOM元素是必不可少的，因?yàn)槲覀冃枰ㄟ^操作DOM元素來實(shí)現(xiàn)一些交互效果。Vue提供了多種方法來查詢DOM元素，具體使用哪種方法取決于具體情況。

<div id="app">
<button ref="myButton" @click="onClick">Click Me!</button>
</div>
<script>
export default {
methods: {
onClick() {
const button = this.$refs.myButton;
button.textContent = 'Clicked!';
}
}
}
</script>

第一種方法是使用ref屬性。我們可以給DOM元素設(shè)置一個(gè)ref屬性，然后在Vue實(shí)例中使用$refs來引用元素，進(jìn)而操作DOM元素。

<div id="app">
<ul ref="myList">
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
</div>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' },
],
};
},
mounted() {
const list = this.$refs.myList;
list.classList.add('my-list');
},
};
</script>

第二種方法是使用$el屬性。$el屬性是Vue實(shí)例對應(yīng)的DOM元素，我們可以直接在Vue實(shí)例中使用$el來操作DOM元素。

<div id="app">
<button :class="{ active: isActive }" @click="onClick">Click Me!</button>
</div>
<script>
export default {
data() {
return {
isActive: false,
};
},
methods: {
onClick() {
const button = this.$el.querySelector('button');
button.classList.toggle('active');
this.isActive = !this.isActive;
},
},
};
</script>

第三種方法是使用querySelector方法。我們可以使用querySelector方法來查詢DOM元素，然后進(jìn)行操作。在Vue實(shí)例中使用$el屬性來調(diào)用querySelector方法。

<div id="app">
<button ref="myButton" @click="onClick">Click Me!</button>
</div>
<script>
export default {
methods: {
onClick() {
const button = this.$refs.myButton.$el;
button.textContent = 'Clicked!';
}
}
}
</script>

第四種方法是結(jié)合第一種和第二種方法，即使用ref屬性來引用DOM元素，然后在ref屬性上調(diào)用$el屬性來操作DOM元素。