What is vue $el? What is the use?

Vue $el is a property of the Vue instance, used to obtain the DOM element associated with the Vue instance.

In Vue, we operate data and implement template rendering through Vue instances, but what is ultimately rendered to the page is the DOM element associated with the Vue instance. The Vue $el attribute is used to obtain this DOM element.

Through the Vue $el attribute, we can get the DOM element associated with the current Vue instance, and then use the native DOM API to operate on this DOM element.

For example, suppose we have a Vue instance, its code is as follows:

<div>
  {{ message }}
</div>

<script>
  var vm = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;Hello World!&#39;
    }
  })
</script>

In this example, we define a Vue instance and associate it with an id app on the DOM element. We can get the DOM element through the Vue $el attribute, and then operate it through native JavaScript code. For example:

var app = vm.$el;
app.style.color = 'red';

The above code will change the font color of the DOM element rendered by the Vue instance to red.

It should be noted that the $el attribute does not always exist during the life cycle of the Vue instance. Only after the Vue instance is rendered on the page, the $el attribute will be assigned the value of the DOM element associated with the Vue instance. Therefore, we can only access the $el property after the instance is mounted. After the instance is destroyed, the $el property is also automatically destroyed.

In summary, the Vue $el attribute is used to obtain the attributes of the DOM element associated with the Vue instance, and can only be used after the Vue instance is mounted. Through the $el attribute, we can directly operate the associated DOM elements and implement some native JavaScript functions.

The above is the detailed content of What is vue $el? What is the use?. For more information, please follow other related articles on the PHP Chinese website!