Cara menggunakan $mount untuk memasang instance secara manual ke DOM dalam Vue

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas dalam pembangunan bahagian hadapan Ia menyediakan banyak fungsi dan alatan yang mudah untuk menjadikan pembangunan bahagian hadapan lebih mudah dan lebih cekap. Dalam pembangunan Vue, kita selalunya perlu melekapkan kejadian pada DOM untuk mencapai pemaparan halaman dan interaksi.

Vue menyediakan kaedah $mount, yang boleh melekapkan tika Vue secara manual ke elemen DOM yang ditentukan. Kaedah ini boleh dipanggil selepas contoh dibuat, atau anda boleh lulus pilihan el dalam pembina untuk melekapkannya secara automatik. Jika pilihan el tidak diluluskan, anda perlu memanggil kaedah $mount secara manual untuk melekapkan contoh.

Mari kita lihat penggunaan khusus. Mula-mula, cipta objek contoh Vue dalam pembina contoh Vue, dan kemudian panggil kaedah $mount untuk melekapkannya secara manual pada DOM.

// 定义Vue实例对象
var vm = new Vue({
  data: {
    message: 'Hello Vue!'
  }
});

// 手动挂载实例到指定元素
vm.$mount('#app');

Dalam kod di atas, kami menggunakan kaedah Vue() baharu untuk mencipta objek contoh Vue vm dan mentakrifkan pembolehubah mesej dalam atribut datanya. Seterusnya, kami memanggil kaedah $mount untuk melekapkan contoh ini secara manual ke nod DOM dengan elemen #app.

Jika nod yang perlu dipasang secara manual tidak dinyatakan dalam pilihan contoh, anda boleh terus menghantar rujukan atau rentetan pemilih nod DOM dalam kaedah $mount, dan Vue akan menggunakannya sebagai nod pelekap.

// 获取DOM节点
var app = document.getElementById('app');

// 手动挂载Vue实例到指定的DOM节点
vm.$mount(app);

Dalam kod di atas, kami mula-mula mendapatkan rujukan nod DOM dengan apl ID melalui kaedah document.getElementById(). Kemudian, teruskan masuk rujukan nod dalam kaedah $mount, dan Vue akan menggunakan nod sebagai nod pelekap.

Selain menghantar terus rujukan nod, kaedah $mount juga boleh menerima rentetan pemilih sebagai parameter untuk menentukan nod DOM untuk dipasang.

// 通过选择器获取DOM节点
var app = '#app';

// 手动挂载Vue实例到指定的DOM节点
vm.$mount(app);

Dalam kod di atas, kami menghantar pemilih #app sebagai parameter kepada kaedah $mount dan Vue akan mencari nod DOM secara automatik dengan apl ID sebagai nod pelekap. Kesannya adalah sama seperti apabila menghantar rujukan nod DOM secara langsung.

Ringkasnya, kaedah $mount ialah kaedah dalam Vue untuk melekapkan tika ke nod DOM secara manual Kaedah ini boleh dipanggil selepas tika itu dibuat, atau pilihan el boleh dihantar dalam pembina contoh untuk memuatkannya secara automatik. Jika pilihan el tidak diluluskan, anda perlu memanggil kaedah $mount secara manual untuk melekapkan contoh. Dalam kaedah $mount, anda boleh terus memasukkan rentetan rujukan atau pemilih nod DOM, dan Vue akan menggunakannya sebagai nod pelekap.

Ringkasan:

• Kaedah $mount ialah kaedah dalam Vue untuk melekapkan tika secara manual ke nod DOM.
• Jika pilihan el tidak dimasukkan, anda perlu memanggil kaedah $mount secara manual untuk melekapkan contoh.
• Kaedah $mount boleh menerima rujukan nod DOM atau rentetan pemilih sebagai parameter untuk menentukan nod pelekap.

Atas ialah kandungan terperinci Cara menggunakan $mount untuk memasang instance secara manual ke DOM dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!