$el

methods: {
  changeColor() {
    this.$el.style.backgroundColor = 'lightgreen';
  }
}

Quyida ko‘proq misollarni ko‘ring.

Ta’rif va qo‘llanilishi

$el obyekti Vue komponentining root DOM tugunini ifodalaydi.

Vue ilovasi mount qilinmaguncha (DOMga o‘rnatilmaguncha) $el obyekti mavjud bo‘lmaydi.

<template> ichida faqat bitta HTML root element bo‘lsa:

• $el obyekti o‘sha root elementi bo‘ladi.
• DOM to‘g‘ridan-to‘g‘ri $el obyekti yordamida manipulyatsiya qilinishi mumkin (yuqoridagi misolga qarang), lekin tavsiya etilmaydi.
• DOMni deklarativ tarzda o‘zgartirish uchun Vue ref atributidan va Vue’ning boshqa imkoniyatlaridan foydalangan ma’qul, chunki bu kodni izchilroq va qo‘llab-quvvatlashni osonroq qiladi (quyidagi 1-misolga qarang).

<template> ichida birdan ortiq HTML root element bo‘lsa:

• $el obyekti Vue ichki maqsadlarda ishlatadigan joy egasi (placeholder) DOM matn tuguni bo‘ladi, xolos (haqiqiy DOM elementi emas).
• Agar bir nechta root elementlari mavjud bo‘lsa, DOMni $el obyekti yordamida manipulyatsiya qilib bo‘lmaydi (quyida 2-misolga qarang).

Ko‘proq misollar

<template>
  <div ref="rootDiv">
    <h2>Example $el Object</h2>
    <p>It is recommended, and more consistent, to use the ref attribute instead of the $el object to change the background color root DIV tag.</p>
    <button v-on:click="changeColor">Click here</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeColor() {
      this.$refs.rootDiv.style.backgroundColor = 'lightgreen';
    }
  }
}
</script>

<template>
  <div>
    <h2>Example $el Object</h2>
    <p>We are not able to use the $el object to change the background color of the root DIV tag when there are other tags on the root level. Open browser console to see the error generated.</p>
    <button v-on:click="changeColor">Click here</button>
  </div>
  <p>With this extra p-tag there are two tags on the root level.</p>
</template>

<script>
export default {
  methods: {
    changeColor() {
      this.$el.style.backgroundColor = 'lightgreen';
    }
  }
}
</script>

<style>
#app > div, #app > p {
  border: solid black 1px;
  padding: 10px;
}
</style>

<template>
  <div>
    <h2>Example $el Object</h2>
    <p>Using the $el object to change the background color of the H2 child element.</p>
    <button v-on:click="changeColor">Click here</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeColor() {
      this.$el.children[0].style.backgroundColor = 'lightblue';
    }
  }
}
</script>

Tegishli sahifalar

Vue darsligi: Vue shablon reflari (template refs)

Vue darsligi: Vue metodlari

Vue ma’lumotnomasi: Vue ref atributi

Vue ma’lumotnomasi: Vue $refs obyekti