Bagaimanakah vue mempengaruhi dom sebenar

Vue ialah rangka kerja JavaScript yang biasa digunakan yang membolehkan pengguna mengikat elemen DOM secara deklaratif kepada keadaan responsif, tetapi ia masih perlu dipaparkan dalam dokumen HTML. Dalam artikel ini, kami akan meneroka cara Vue menerapkannya pada DOM sebenar.

Instance Vue

Mula-mula, kita perlu membuat instantiate objek Vue dan biarkan ia mengawal elemen DOM dalam halaman. Kita boleh menggunakan pembina Vue untuk mencipta contoh Vue baharu:

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

Dalam contoh ini, kita menghantar contoh Vue objek yang mengandungi sifat el dan data. Atribut el menunjukkan elemen DOM untuk dikawal oleh contoh Vue, manakala atribut data ialah atribut data dalam objek Vue, biasanya digunakan untuk mengisytiharkan data reaktif.

Data pengikatan

Kejadian Vue membenarkan pengikatan data, yang bermaksud bahawa nilai atribut elemen DOM boleh diikat pada atribut data objek Vue. Kaedah mengikat ini boleh mengemas kini elemen DOM secara automatik, membenarkan DOM sebenar mengemas kini secara dinamik apabila atribut data dalam objek Vue berubah.

Kami boleh menggunakan sintaks pendakap berganda untuk mengikat atribut data dalam contoh Vue kepada elemen DOM:

<div id="app">
  {{message}}
</div>

Dalam contoh ini, kami menggunakan {{message}} untuk mengikat Vue The message dalam atribut data objek terikat pada kandungan teks elemen div. Ini bermakna apabila atribut mesej dalam contoh Vue berubah, kandungan teks dalam elemen div akan dikemas kini dengan sewajarnya.

Arahan

Arahan dalam Vue ialah atribut HTML khas yang digunakan untuk mengaitkan tugas tertentu dengan elemen DOM yang ditentukan. Vue menyediakan sejumlah besar arahan, termasuk v-if, v-for, v-on dan sebagainya.

Arahan v-if membenarkan untuk menunjukkan atau menyembunyikan elemen DOM berdasarkan pertimbangan bersyarat dalam contoh Vue:

<div v-if="visible">This div will be displayed if visible is true.</div>

Arahan v-for membenarkan lelaran tatasusunan atau objek dalam Vue instance:

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

Dalam contoh ini, atribut item dalam contoh Vue ialah tatasusunan, arahan v-for melintasinya dan mencipta elemen li dalam DOM untuk memaparkan nilai elemen tatasusunan.

Arahan v-on membenarkan pendengar acara yang mengikat pada elemen DOM untuk mencetuskan beberapa kod JavaScript apabila peristiwa tertentu berlaku:

<button v-on:click="counter++">You clicked me {{ counter }} times.</button>

Dalam contoh ini, kami menggunakan v-on The directive binds pendengar acara klik pada elemen butang. Apabila pengguna mengklik butang, sifat balas dalam tika Vue ditambah 1 dan kandungan teks butang dikemas kini untuk menunjukkan bilangan klik.

Ringkasan

Vue ialah rangka kerja yang sangat fleksibel dan berkuasa yang boleh menggunakan JavaScript dengan mudah pada operasi DOM sebenar. Kejadian Vue bukan sahaja boleh mengikat data, tetapi juga menggunakan arahan dan pendengar peristiwa untuk mengaitkan sifat dalam objek Vue dengan elemen DOM tertentu. Melalui kaedah ini, kami boleh menggunakan Vue pada DOM sebenar dan memastikan halaman tersebut bertindak balas secara dinamik kepada perubahan dalam atribut data dalam objek Vue.

Atas ialah kandungan terperinci Bagaimanakah vue mempengaruhi dom sebenar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!