Bagaimana untuk menggantikan nilai div secara global dalam Vue (langkah terperinci)

Vue.js ialah rangka kerja JavaScript progresif popular yang membolehkan anda membina antara muka pengguna interaktif dengan mudah. Dalam Vue.js, kami biasanya menggunakan arahan untuk mengubah suai keadaan komponen. Walau bagaimanapun, kadangkala kita perlu menggantikan nilai tertentu secara global di seluruh pepohon DOM, terutamanya apabila kita membuat beberapa perubahan secara visual berskala besar.

Artikel ini akan memperkenalkan cara menggunakan Vue.js untuk menggantikan nilai div secara global di seluruh DOM.

Langkah 1: Buat tika Vue

Mula-mula, kita perlu mencipta tika Vue mudah dan mengikatnya pada elemen DOM. Kami boleh mencipta elemen div kosong dalam HTML dan menetapkannya sebagai elemen akar bagi contoh Vue kami.

<div id="app"></div>

Kemudian, dalam JavaScript, kita perlu mencipta contoh Vue dengan menghantar objek pilihan. Kami menyimpan data dalam sifat yang dipanggil mesej yang akan digunakan sepanjang aplikasi.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Kini, kami telah mencipta tika Vue yang mudah dan mengikatnya pada elemen div dengan id "aplikasi". Seterusnya, kita akan belajar cara menggantikan nilai div secara global.

Langkah 2: Gunakan arahan Vue untuk menggantikan nilai div

Vue menyediakan banyak arahan untuk mengubah suai elemen dalam templat. Salah satu arahan yang paling biasa digunakan ialah v-text, yang membolehkan kami memasukkan nilai rentetan terus ke dalam elemen.

Kita boleh mencipta elemen div dalam HTML dan menggantikan nilainya menggunakan arahan teks-v. Kami menetapkan ID elemen div kepada "mydiv".

<div id="mydiv" v-text="message"></div>

Kini kami telah mencipta elemen div yang memaparkan "Hello Vue!" dan menggunakan arahan v-text untuk menggantikannya dengan atribut data mesej dalam contoh Vue kami.

Walau bagaimanapun, ini hanya menggantikan satu div. Bagaimana jika kita mahu menggantikan nilai setiap div secara global dalam keseluruhan DOM?

Langkah 3: Buat fungsi gantian global

Untuk menggantikan nilai div secara global, kita perlu menulis fungsi rekursif yang merentasi keseluruhan pepohon DOM dan menggantikannya dengan data atribut contoh Vue contoh kami Nilai setiap div.

function replaceDivs(el) {
  if (el.tagName === 'DIV') {
    el.textContent = app.message
  }
  Array.from(el.children).forEach(replaceDivs)
}

Ini ialah fungsi rekursif yang sangat mudah yang akan menyemak sama ada elemen yang dihantar kepadanya ialah elemen div. Jika ya, kandungan teks elemen itu ditetapkan kepada sifat mesej bagi tika Vue kami. Kami kemudiannya akan menggunakan Array.from(el.children) untuk mengulangi semua kanak-kanak di bawah elemen itu dan memanggil fungsi replaceDivs secara rekursif untuk setiap kanak-kanak.

Langkah 4: Panggil fungsi penggantian global

Sekarang, kami bersedia untuk memanggil fungsi replaceDivs dalam aplikasi kami. Kita boleh memanggil fungsi ini dalam cangkuk kitaran hayat yang dipasang bagi contoh Vue untuk memastikan bahawa nilainya diganti selepas pepohon DOM dimuatkan sepenuhnya.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  mounted: function () {
    replaceDivs(document.body)
  }
})

Sekarang, dalam cangkuk kitaran hayat yang dipasang bagi contoh Vue, kami akan memanggil fungsi replaceDivs, menghantar document.body sebagai parameter. Ini akan menjalankan fungsi dan menggunakannya pada keseluruhan pokok DOM.

Kesimpulan

Kini, kami telah mempelajari cara menggantikan nilai div secara global menggunakan Vue.js. Kami mencipta contoh Vue mudah, mengubah suai nilai div tunggal menggunakan arahan teks-v, dan kemudian menulis fungsi rekursif untuk menggantikan nilai div secara global.

Vue.js sangat penting untuk pembangun yang menulis bahagian hadapan interaktif. Ia menyediakan set alat yang ringkas namun berkuasa yang membantu kami membuat aplikasi yang kompleks dan mengubah suai keadaan elemen dengan mudah di seluruh pepohon DOM.

Atas ialah kandungan terperinci Bagaimana untuk menggantikan nilai div secara global dalam Vue (langkah terperinci). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!