Rumah  >  Artikel  >  hujung hadapan web  >  Apakah vue $el? Apa gunanya?

Apakah vue $el? Apa gunanya?

PHPz
PHPzasal
2023-04-07 09:30:302497semak imbas

Vue $el ialah sifat bagi tika Vue, digunakan untuk mendapatkan elemen DOM yang dikaitkan dengan tika Vue.

Dalam Vue, kami mengendalikan data dan melaksanakan pemaparan templat melalui tika Vue, tetapi perkara yang akhirnya dipaparkan pada halaman itu ialah elemen DOM yang dikaitkan dengan tika Vue. Atribut Vue $el digunakan untuk mendapatkan elemen DOM ini.

Melalui atribut Vue $el, kita boleh mendapatkan elemen DOM yang dikaitkan dengan tika Vue semasa, dan kemudian menggunakan API DOM asli untuk beroperasi pada elemen DOM ini.

Sebagai contoh, katakan kita mempunyai tika Vue dengan kod berikut:

<div id="app">
  {{ message }}
</div>

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

Dalam contoh ini, kita mentakrifkan tika Vue dan mengaitkannya dengan id Pada elemen DOM bagi apl. Kita boleh mendapatkan elemen DOM melalui atribut Vue $el, dan kemudian mengendalikannya melalui kod JavaScript asli, contohnya:

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

Kod di atas akan menetapkan warna fon elemen DOM yang diberikan oleh Vue contoh bertukar merah.

Perlu diambil perhatian bahawa atribut $el tidak selalu wujud semasa kitaran hayat tika Vue. Hanya selepas tika Vue dipaparkan pada halaman, atribut $el akan diberikan nilai elemen DOM yang dikaitkan dengan tika Vue. Oleh itu, kita hanya boleh mengakses harta $el selepas contoh itu dipasang. Selepas contoh dimusnahkan, harta $el juga dimusnahkan secara automatik.

Ringkasnya, atribut Vue $el digunakan untuk mendapatkan atribut elemen DOM yang dikaitkan dengan tika Vue dan hanya boleh digunakan selepas tika Vue dipasang. Melalui atribut $el, kami boleh mengendalikan secara langsung elemen DOM yang berkaitan dan melaksanakan beberapa fungsi JavaScript asli.

Atas ialah kandungan terperinci Apakah vue $el? Apa gunanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn