Apakah singkatan el in vue?-Soal Jawab bahagian hadapan-php.cn

Apakah singkatan el in vue?

青灯夜游

Lepaskan： 2022-12-13 18:12:25

asal

7367 orang telah melayarinya

Dalam vue, el ialah singkatan unsur, yang boleh dipanggil titik lekap. Fungsi el adalah untuk menyediakan elemen DOM yang sudah wujud pada halaman sebagai sasaran pemasangan contoh Vue. Ia boleh menjadi pemilih CSS atau tika HTMLElement selepas tika itu dipasang, elemen itu boleh digunakan sebagai "vm akses .$el".

Apakah singkatan el in vue?

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

el ialah singkatan unsur, yang boleh dipanggil titik lekap. Prinsipnya berasal daripada: Dalam seni bina MVC, teg digunakan sebagai bekas untuk membungkus beberapa teg, supaya teg boleh dipaparkan semula sambil mengekalkan beberapa atribut yang diperlukan.

Dalam setiap projek vue2.0, kita akan melihat bahawa dalam fail masukan (iaitu main.js), atribut el akan dikonfigurasikan apabila menjana contoh akar, tetapi atribut ini tidak boleh dikonfigurasikan dalam komponen yang kita ciptakan diri kita sendiri. Penerangan tentang atribut el dalam dokumen rasmi dipetik di bawah:

el

Taip : string | Element

Penghadan: Hanya berkuat kuasa apabila mencipta tika dengan new.

Butiran:

Menyediakan elemen DOM yang sudah wujud pada halaman sebagai sasaran pelekap untuk tika Vue. Boleh menjadi pemilih CSS atau contoh HTMLElement. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

Selepas tika dipasang, elemen boleh diakses dengan vm.$el.

Jika pilihan ini wujud semasa instantiasi, tika akan memasuki proses penyusunan serta-merta, jika tidak, anda perlu memanggil vm.$mount() untuk memulakan kompilasi secara manual.

Ringkasnya, peranan el adalah untuk menunjukkan elemen halaman yang ingin kita masukkan contoh yang dijana oleh komponen vue semasa ke dalam nilai atribut el boleh menjadi pemilih css, atau secara langsung objek elemen yang sepadan. Dan atribut el hanya boleh dikonfigurasikan apabila menggunakan baru untuk menjana contoh, dan kami hanya mengeksport objek konfigurasi dalam komponen Jika el ditetapkan, ralat akan dilaporkan.

// 错误使用方式，在组件中设置el
// 提示错误： [Vue warn]: option "el" can only be used during instance creation with the `new` keyword.
export default {
    el: '#app'
}
 
// 正确写法
var vm = new Vue({
    el: '#app'
})

Salin selepas log masuk

Mari kita lihat index.html dalam projek.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>backstage</title>
  </head>
  <body>
    <!-- {el：&#39;#app&#39;} 即把这里的元素作为根实例的挂载对象 -->
    <div id="app"></div>
  </body>
</html>

Salin selepas log masuk

Cetak vm.$el, anda akan dapati tika itu telah dipasang pada elemen el: