Learn more about $el, $data and $refs in Vue.js

 

$el

The $el property in Vue.js refers to the DOM element that the Vue instance is mounted to. It is a read-only property, meaning that you can access it but you cannot change its value.

To use the $el property, you can simply reference it in your Vue code. For example, the following code will log the value of the $el property to the console:

HTML

<template>
  <div>
    <h1>Hello, world!</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$el);
  }
};
</script>

Output:

<div id="app"><h1>Hello, world!</h1></div>

The $el property can be useful for performing tasks that require direct access to the DOM, such as attaching event listeners or manipulating the DOM directly.

$data

The $data property in Vue.js refers to the data object of the Vue instance. It is a read-only property, meaning that you can access it but you cannot change its value.

To use the $data property, you can simply reference it in your Vue code. For example, the following code will log the value of the $data property to the console:

HTML

<template>
  <div>
    <h1>{{ $data.message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    };
  }
};
</script>

Output:

<h1>Hello, world!</h1>

The $data property can be useful for accessing the data of the Vue instance from anywhere in the template or component.

$refs

The $refs property in Vue.js is a collection of references to DOM elements that have been given a ref attribute. Refs can be used to access and manipulate DOM elements directly in your Vue code.

To use the $refs property, you must first assign a ref to the DOM element that you want to access. You can do this by adding a ref attribute to the DOM element. For example, the following code will assign a ref named myButton to the button element:

HTML

<button ref="myButton">Click me!</button>

Once you have assigned a ref to a DOM element, you can access it using the $refs property. For example, the following code will log the value of the myButton ref to the console:

HTML

<template>
  <div>
    <button ref="myButton">Click me!</button>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.myButton);
  }
};
</script>

Output:

<button ref="myButton">Click me!</button>

The $refs property can be useful for a variety of tasks, such as attaching event listeners to DOM elements, manipulating the DOM directly, and communicating between components.

Conclusion

The $el, $data, and $refs properties are all important tools for Vue developers. By understanding how to use these properties, you can create more powerful and dynamic Vue applications.