Rumah > Artikel > hujung hadapan web > Apakah singkatan el in vue?

Apakah singkatan el in vue?

青灯夜游asal: 2022-12-13 18:12:257306semak imbas

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".

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'
})

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>

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

(Perkongsian video pembelajaran: Tutorial pengenalan Vuejs, Video pengaturcaraan asas)

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

mvc 架构 css html String 字符串 JS 对象 dom 选择器

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

Artikel sebelumnya：Apakah vue halaman tunggal dan berbilang halamanArtikel seterusnya：Apakah vue halaman tunggal dan berbilang halaman

Artikel berkaitan

Lihat lagi