Can it still be modified after vue is mounted?

Vue.js is a popular front-end framework. Its core idea is data-driven and componentized. In Vue.js, we can easily build pages in a componentized manner and use the data binding function provided by Vue.js to achieve data drive.

In Vue.js, we usually mount our root component by instantiating a Vue object and specify the DOM element to render. Once the Vue instance is mounted, you can start rendering the view and use the data binding functionality to bind data to the view.

In many cases, we will want to modify the mounted DOM elements after the Vue instance is mounted. For example, we may want to add some new elements to the page after a button is clicked. In this case, can we modify the mounted DOM elements after the Vue instance is mounted? This article will answer this question and give the corresponding solution.

1. Directly modify DOM elements

The simplest way is to directly operate DOM elements through JavaScript, add, delete, and modify DOM nodes. However, this method does not conform to the design idea of ​​Vue.js, because the data binding in Vue.js is based on virtual DOM. If you directly operate DOM elements, this operation will not be monitored by Vue.js, and you will not be able to get Responsive updates accordingly. Therefore, we should not manipulate DOM elements directly.

2. Get DOM elements by reference

After the Vue instance is mounted, we can get the mounted DOM element by reference. This method can ensure that Vue.js is normal. Work. We only need to define a ref attribute in the root component and then use the $refs object to reference this DOM element. For example:

<template>
  <div ref="root"></div>
</template>

Here we define a ref attribute named root and bind it to an empty div element.

After the Vue instance is mounted, we can access this DOM element through the $refs object. For example, we can access this element through $refs.root in the mounted lifecycle hook function and make any modifications on it. For example:

mounted() {
  const root = this.$refs.root
  root.innerHTML = '<p>Hello, world!</p>'
}

Here, we obtain the DOM element of the root component in the mounted hook function, and then change its content to "

Hello, world!

" through the innerHTML attribute.

3. Modify DOM elements through the asynchronous rendering mechanism of Vue.js

Vue.js version 2.5 and above supports the asynchronous rendering mechanism. Under this mechanism, we can After the Vue instance is mounted, the DOM elements are modified through the Vue.nextTick() method, and corresponding responsive updates can be obtained. For example:

mounted() {
  this.$nextTick(() => {
    const root = this.$el
    root.innerHTML = '<p>Hello, world!</p>'
  })
}

Here, we use the $nextTick method in the mounted hook function to execute the DOM operation in the next DOM update cycle. This ensures that the DOM update is completed before proceeding, thus ensuring that Vue.js works properly.

Summary

In Vue.js, we can obtain mounted DOM elements by reference, or modify DOM elements through the asynchronous rendering mechanism. This ensures that Vue.js works properly and gets updated responsively accordingly. At the same time, avoid directly manipulating DOM elements to avoid damaging the data binding mechanism of Vue.js and causing unnecessary problems.

The above is the detailed content of Can it still be modified after vue is mounted?. For more information, please follow other related articles on the PHP Chinese website!