Vue.js 是一种用于构建用户界面的 JavaScript 框架。虽然 Vue.js 与 jQuery 有很多不同之处，但有时候我们需要在 Vue.js 中像 jQuery 一样操作 DOM 元素。在本文中，我们将介绍如何在 Vue.js 中像 jQuery 一样操作 DOM。
什么是 DOM？
DOM（文档对象模型）是表示 HTML 文档的树形结构。DOM 将文档定义为由节点和对象组成的集合。节点可以是元素节点、属性节点、文本节点等。通过 DOM，JavaScript 可以访问和操作 HTML 文档的所有元素，使得网页得以实现动态效果。
如何在 Vue.js 中操作 DOM？
Vue.js 提供了多种方法来操纵 DOM 元素，包括 ref 属性、事件绑定、计算属性等。下面分别介绍这些方法：
ref 属性
ref 属性可以用来捕获必须 DOM 节点的引用。可以在组件中为元素添加一个 ref 属性，并在组件的方法中使用 this.$refs 访问该节点。例如：
-- -------------------- ---- -------
----------
-----
------ ------------- ----------- --
------
-----------
--------
------ ------- -
-------- -
------------ -
---------------------------
--
--
--
---------上面的代码演示了如何在 Vue.js 中访问 input 元素，并使用 focus() 函数来将焦点设置在该元素上。使用 ref 属性可以访问模板中任何元素的实例，但是在组件自己声明周期的时候，this.$refs 只会在更新周期之后被设置，且为组件实例包装了对应的元素,所以你不能用它在 created 钩子之类的地方来访问子组件。这是『created 生命周期钩子在 $refs 被填充之前调用』的原因。
事件绑定
在 Vue.js 中，可以使用 v-on 指令来绑定 DOM 事件。例如，你可以在 template 中添加一个按钮，并绑定一个点击事件：
<template>
<div>
<button v-on:click="handleClick">点击我</button>
</div>
</template>在 Vue.js 的实例中，需要定义一个 handleClick 函数来处理点击事件。你可以在 methods 中定义该函数：
-- -------------------- ---- -------
--------
------ ------- -
-------- -
------------- -
-- ---------
--
--
--
---------计算属性
在 Vue.js 中，可以使用计算属性来根据数据动态计算属性，然后把计算结果返回给模板。这些属性会被缓存，只在它们的依赖发生改变时才重新计算。在模板中引用计算属性时，不需要调用函数，而是像访问普通属性一样访问它们。
<template>
<div>
<span>优惠价格：{{ price }}</span>
</div>
</template>上面的代码演示了如何使用计算属性，该计算属性根据原始价格和折扣计算出优惠价格。
-- -------------------- ---- -------
--------
------ ------- -
------ -
------ -
-------------- ----
--------- ----
--
--
--------- -
------- -
------ ------------------ - --------------
--
--
--
---------总结
在 Vue.js 中，虽然有许多不同的方法来操作 DOM 元素，但使用 ref 属性、事件绑定和计算属性是最常见的方法。
在操作 DOM 元素时，需要小心谨慎。直接操作 DOM 元素可能造成性能问题，也可能弄乱 Vue.js 的响应式系统。在 Vue.js 中，最好遵循它的响应式原则，尽量避免直接操作 DOM 元素。
我们希望本文对你在 Vue.js 中操作 DOM 元素有所帮助。请记住，不要滥用 DOM 操作，否则会影响性能，甚至会影响应用程序的稳定性。
示例代码
-- -------------------- ---- -------
----------
-----
------ ------------- ----------- --
------- --------------------------------------
------- ------------------------------------------
----- ------- ------
------------- ----- ---------
------
-----------
--------
------ ------- -
------ -
------ -
-------------- ----
--------- ----
-------- ------ ---------
--
--
--------- -
------- -
------ ------------------ - --------------
--
--
-------- -
------------ -
---------------------------
--
--------------- -
------------ - ------ --------
--
--
--
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e8392bf6b2d6eab33b9422