Bolehkah ia masih diubah suai selepas vue dipasang?

Vue.js ialah rangka kerja bahagian hadapan yang popular yang idea terasnya dipacu data dan berkomponen. Dalam Vue.js, kita boleh membina halaman dengan mudah dalam cara berkomponen dan menggunakan fungsi pengikatan data yang disediakan oleh Vue.js untuk mencapai pemacu data.

Dalam Vue.js, kami biasanya melekapkan komponen akar kami dengan membuat seketika objek Vue dan menentukan elemen DOM untuk dipaparkan. Setelah tika Vue dipasang, anda boleh mula memaparkan paparan dan menggunakan fungsi mengikat data untuk mengikat data pada paparan.

Dalam banyak kes, kami ingin mengubah suai elemen DOM yang dipasang selepas tika Vue dipasang. Sebagai contoh, kami mungkin ingin menambah beberapa elemen baharu pada halaman selepas butang diklik. Dalam kes ini, bolehkah kita mengubah suai elemen DOM yang dipasang selepas tika Vue dipasang? Artikel ini akan menjawab soalan ini dan memberikan penyelesaian yang sepadan.

1. Ubah suai terus elemen DOM

Cara paling mudah ialah mengendalikan terus elemen DOM melalui JavaScript, menambah, memadam dan mengubah suai nod DOM. Walau bagaimanapun, kaedah ini tidak mematuhi idea reka bentuk Vue.js, kerana pengikatan data dalam Vue.js adalah berdasarkan DOM maya Jika anda mengendalikan elemen DOM secara langsung, operasi ini tidak akan dipantau oleh Vue.js. dan anda tidak akan dapat mendapatkan kemas kini Responsif dengan sewajarnya. Oleh itu, kita tidak seharusnya memanipulasi elemen DOM secara langsung.

2. Dapatkan elemen DOM melalui rujukan

Selepas tika Vue dipasang, kita boleh mendapatkan elemen DOM yang dipasang melalui rujukan Kaedah ini boleh memastikan Vue.js adalah normal . Kita hanya perlu mentakrifkan atribut ref dalam komponen akar dan kemudian menggunakan objek $refs untuk merujuk elemen DOM ini. Contohnya:

<template>
  <div ref="root"></div>
</template>

Di sini kita mentakrifkan atribut ref bernama root dan mengikatnya pada elemen div kosong.

Selepas tika Vue dipasang, kita boleh mengakses elemen DOM ini melalui objek $refs. Sebagai contoh, kita boleh mengakses elemen ini melalui $refs.root dalam fungsi cangkuk kitaran hayat yang dipasang dan membuat sebarang pengubahsuaian padanya. Contohnya:

mounted() {
  const root = this.$refs.root
  root.innerHTML = '<p>Hello, world!</p>'
}

Di sini, kami memperoleh elemen DOM bagi komponen akar dalam fungsi cangkuk yang dipasang, dan kemudian menukar kandungannya kepada "

Hello, world!

3. Ubah suai elemen DOM melalui mekanisme pemaparan tak segerak Vue.js

Vue.js versi 2.5 dan ke atas menyokong mekanisme pemaparan tak segerak Di bawah mekanisme ini, kita boleh Selepas tika Vue dipasang, elemen DOM diubah suai melalui kaedah Vue.nextTick() dan kemas kini responsif yang sepadan boleh diperolehi. Contohnya:

mounted() {
  this.$nextTick(() => {
    const root = this.$el
    root.innerHTML = '<p>Hello, world!</p>'
  })
}

Di sini, kami menggunakan kaedah $nextTick dalam fungsi cangkuk yang dipasang untuk meletakkan operasi DOM ke dalam kitaran kemas kini DOM seterusnya. Ini memastikan kemas kini DOM selesai sebelum meneruskan, dengan itu memastikan Vue.js berfungsi dengan betul.

Ringkasan

Dalam Vue.js, kita boleh mendapatkan elemen DOM yang dipasang melalui rujukan atau mengubah suai elemen DOM melalui mekanisme pemaparan tak segerak. Ini memastikan Vue.js berfungsi dengan betul dan dikemas kini secara responsif dengan sewajarnya. Pada masa yang sama, elakkan memanipulasi elemen DOM secara langsung untuk mengelak daripada merosakkan mekanisme pengikatan data Vue.js dan menyebabkan masalah yang tidak perlu.

Atas ialah kandungan terperinci Bolehkah ia masih diubah suai selepas vue dipasang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!