元件例項 $el 詳解

導讀	獲取Vue例項掛載的DOM元素，自mounted鉤子函式開始生效，之前的鉤子函式內無效。如下程式碼所示，Vue腳手架中，$el指向當前元件template模板中的根標籤。

this指向元件例項，$el用於獲取Vue例項掛載的DOM元素，在mounted生命週期中才有效，之前的鉤子函式內無效。如下程式碼所示，Vue腳手架中，$el指向當前元件template模板中的根標籤。

<template>
  <div id="root">
    <h1 @click="fn()">
      Lorem, ipsum
    </h1>
  </div>
</template>
<script>
export default {
  mounted () {
    // this.$el只在mounted中才有效
    console.log('this:', this) // 列印this指向元件例項。
    console.log('this.$el:', this.$el) // 列印這個vue元件的dom物件
    this.$el.style.color = 'red'
  },
  methods: {
    fn () {
      console.log('test_this.$el:', this.$el) // <div id="root">...</div>
    }
  }
}
</script>

控制檯輸出：

原文來自：