介绍
在 Vue.js 中，要想直接操作 DOM 元素，即使是更新样式、添加事件等操作，都需要使用一定的技巧。这是因为 Vue.js 的设计中，不鼓励直接操作 DOM，而是以数据和事件为驱动，通过更新数据来触发 DOM 变化。
然而，有时候我们确实需要直接操作 DOM，这时就需要使用 Vue.js 提供的 refs 属性来获取 DOM 元素。本篇文章将详细介绍在 Vue.js 中如何使用 refs 获取 DOM 元素，以及案例演示。
refs 属性
refs 属性是 Vue.js 提供的一个用于获取组件内元素的引用的特殊属性。它能够在组件内部直接访问到指定的元素，并且能够在组件内部直接操作这个元素，而不需要通过 Vue.js 的模板或者计算属性等方式。
refs 属性使用方式非常简单。在模板中，我们可以通过 ref 属性给元素命名，并在组件内通过 $refs 对象来访问该元素。
-- -------------------- ---- -------
----------
-----
------ ----------- ------------
------- --------------------------------
------
-----------
--------
------ ------- -
-------- -
------------- -
-- ------- ---------------- --- ----- --
----- ---------- - -----------------------
------------------ -------- ------------
--
--
--
---------上述示例中，我们给输入框元素通过 ref 属性命名为 input，并在点击按钮后通过 this.$refs.input.value 获取输入框的值。
需要注意的是，当使用 refs 进行 DOM 操作时，要确保在组件销毁前进行恰当的清理，否则可能会导致内存泄漏和其他问题。我们可以通过 destroyed 钩子来进行清理工作。
-- -------------------- ---- -------
----------
-----
------ ----------- ------------
------- --------------------------------
------
-----------
--------
------ ------- -
-------- -
------------- -
----- ---------- - -----------------------
------------------ -------- ------------
--
--
----------- -
-- ----
---------- - -----
--
--
---------示例
为了更好地理解 refs 的使用方法，我们来看一个实际场景的示例。
在这个示例中，我们需要实现一个数字加减器组件，并且要实时更新当前数字。我们可以通过 refs 获取到加减器中的按钮元素，并在点击时更新当前数字。
-- -------------------- ---- -------
----------
-----
-------- ----- ---------
--- --
------- ------------ -----------------------------
------- -------------- -------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ --
--
--
-------- -
----------- -
---------- -- --
--
------------- -
---------- -- --
--
--
--
---------在上述示例中，我们给加减器中的按钮元素分别添加了 ref 属性，并在组件内部分别通过 $refs 获取到这两个按钮元素。在点击时，我们直接通过修改 count 数据来更新页面上的数字。
总结
通过本篇文章的介绍，我们了解到在 Vue.js 中使用 refs 获取 DOM 元素的方法，并且看到了实用案例。需要注意的是，在使用 refs 进行 DOM 操作时，要确保合理清理引用，并且要谨慎使用 refs，尽可能地避免直接操作 DOM 元素，遵循 Vue.js 的数据驱动原则。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6590f310eb4cecbf2d631558