介绍
Vue.js 是一个流行的前端框架，它提供了许多功能来简化开发过程。其中一个重要的功能是 mounted 生命周期函数，它在组件挂载后调用。在 mounted 生命周期函数里，我们可以访问组件的 DOM 元素并进行操作。
在本文中，我们将探讨如何在 Vue.js 中使用 mounted 生命周期函数来操作 DOM。我们将介绍几种不同的方法，包括使用原生 JavaScript 和使用 Vue.js 提供的指令和方法。
使用原生 JavaScript 操作 DOM
在 Vue.js 中，我们可以使用原生 JavaScript 来访问和操作组件的 DOM 元素。在 mounted 生命周期函数中，我们可以通过 this.$el 属性来访问组件的根元素。
以下是一个示例代码，演示如何在 mounted 生命周期函数中使用原生 JavaScript 来修改组件的根元素的样式：
mounted() {
// 获取组件根元素
const el = this.$el;
// 修改根元素样式
el.style.backgroundColor = 'red';
el.style.color = 'white';
}在上面的代码中，我们首先获取了组件的根元素，然后使用 style 属性来修改其背景色和文字颜色。
请注意，这种方法虽然简单，但也有一些限制。由于我们直接操作 DOM，因此我们需要小心不要破坏 Vue.js 的响应式系统。此外，如果我们在组件中使用了其他 Vue.js 功能（例如计算属性或事件），则此方法可能会与这些功能产生冲突。
使用指令操作 DOM
Vue.js 提供了许多指令来简化对 DOM 的操作。在 mounted 生命周期函数中，我们可以使用这些指令来修改组件的 DOM 元素。
以下是一个示例代码，演示如何在 mounted 生命周期函数中使用 Vue.js 提供的 v-bind 指令来修改组件的根元素的样式：
-- -------------------- ---- -------
----------
---- --------------- ---------------- -------- ------ --------- ---
------ ------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------
---------- -------
--
--
--------- -
-- -------
------------ - -------
-------------- - ---------
-
--
---------在上面的代码中，我们使用 v-bind 指令来动态绑定组件的根元素的样式。在 mounted 生命周期函数中，我们可以修改组件的数据来更改样式。
请注意，我们在 mounted 生命周期函数中直接修改了组件的数据。由于 Vue.js 具有响应式系统，因此这些更改将自动更新组件的 DOM 元素。
使用 ref 操作子元素
如果我们需要访问组件中的某个子元素，我们可以使用 ref 属性。ref 属性允许我们在组件中给元素命名，并在 mounted 生命周期函数中访问它们。
以下是一个示例代码，演示如何在 mounted 生命周期函数中使用 ref 属性来访问组件中的子元素：
-- -------------------- ---- -------
----------
-----
--- ------------------ -----------
------
-----------
--------
------ ------- -
--------- -
-- ----------
----- ----- - -----------------
----------------- - ------
-
--
---------在上面的代码中，我们使用 ref 属性将 h1 元素命名为 "title"。在 mounted 生命周期函数中，我们使用 this.$refs.title 属性来访问该元素，并使用 JavaScript 来修改其样式。
请注意，如果我们在组件中使用了 v-for 指令，则 ref 属性将返回一个数组，其中包含所有子元素的引用。
结论
在 Vue.js 中，mounted 生命周期函数提供了访问和操作 DOM 元素的机会。我们可以使用原生 JavaScript、指令和 ref 属性来访问和修改组件的 DOM 元素。
虽然这些方法都很有用，但我们需要小心不要破坏 Vue.js 的响应式系统。我们应该尽可能地使用 Vue.js 提供的指令和方法来操作 DOM 元素，以确保我们的代码与 Vue.js 的其他功能兼容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674046c65ade33eb7232dcfc