Apakah vue $el? Apa gunanya?

PHPz
Lepaskan: 2023-04-07 10:47:23
asal
2470 orang telah melayarinya

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>
Salin selepas log masuk

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';
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!