Vue progression (yao Lu Lu) : Component instance $EL explanation

This refers to an instance of the component. $el is used to retrieve the DOM element mounted by the Vue instance. As shown in the following code, in the Vue scaffolding, $EL points to the root tag in the current component template template.

<template>
  <div id="root">
    <h1 @click="fn()">
      Lorem, ipsum
    </h1>
  </div>
</template>
<script>
export default {
  mounted () {
    // This.$el is valid only in Mounted
    console.log('this:'.this) // Prints this pointing to an instance of the component.
    console.log('this.$el:'.this.$el) // Print the DOM object for this VUE component
    this.$el.style.color = 'red'
  },
  methods: {
    fn () {
      console.log('test_this.$el:'.this.$el) // 
        

         ... 
        }}}</script>
Copy the code

Console output: