DOM ialah model objek dokumen dan antara muka untuk pengaturcaraan HTML dalam halaman dimanipulasi melalui DOM. DOM ialah perwakilan objek dalam memori bagi dokumen HTML, dan ia menyediakan cara untuk berinteraksi dengan halaman web menggunakan JavaScript. DOM ialah hierarki (atau pokok) nod dengan nod dokumen sebagai akarnya.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Apakah unsur dom? Apabila halaman HTML dimuatkan, penyemak imbas mencipta DOM, yang menyediakan struktur logik baharu untuk dokumen dan boleh menukar kandungan dan struktur. DOM dipanggil Model Objek Dokumen (pendek kata DOM), iaitu antara muka pengaturcaraan standard untuk memproses bahasa penanda boleh diperluaskan yang disyorkan oleh organisasi W3C

DOM ialah objek dalam memori perwakilan dokumen HTML. Ia menyediakan cara untuk berinteraksi dengan halaman web menggunakan JavaScript. DOM ialah hierarki (atau pokok) nod dengan nod dokumen sebagai akarnya.

Malah, DOM ialah model dokumen yang diterangkan dalam cara berorientasikan objek. DOM mentakrifkan objek yang diperlukan untuk mewakili dan mengubah suai dokumen, kelakuan dan sifat objek ini dan hubungan antara objek ini.

Dengan JavaScript, kami boleh membina semula keseluruhan dokumen HTML. Seperti menambah, mengalih keluar, menukar atau menyusun semula item pada halaman.

Untuk menukar sesuatu pada halaman, JavaScript perlu mendapatkan akses kepada semua elemen dalam dokumen HTML. Entri ini, bersama-sama dengan kaedah dan sifat untuk menambah, mengalih, menukar atau mengalih keluar elemen HTML, diperoleh melalui Model Objek Dokumen.

Apakah itu DOM maya

Saya percaya semua orang sudah biasa dengan konsep DOM maya Dari React to Vue, DOM maya ialah Kedua-dua rangka kerja membawa keupayaan merentas platform (React-Native dan Weex) Malah, ia hanyalah lapisan abstraksi DOM sebenar, dengan objek JavaScript (nod VNode) sebagai pokok asas, menggunakan atribut objek digunakan untuk menerangkan nod, dan akhirnya pokok boleh dipetakan ke persekitaran sebenar melalui satu siri operasi

Dalam objek Javascript, DOM maya diwakili sebagai objek Objek. Dan ia mengandungi sekurang-kurangnya tiga atribut: nama tag (tag), atribut (attrs) dan objek elemen anak (kanak-kanak). nod ke dalam paparan halaman, jadi nod objek DOM maya sepadan dengan sifat DOM sebenar satu demi satu

Teknologi DOM maya juga digunakan dalam vue

Tentukan DOM sebenar

Segera vue

Perhatikan render render, kita boleh dapatkan DOM maya

<div id="app">
    <p class="p">節(jié)點(diǎn)內(nèi)容</p>
    <h3>{{ foo }}</h3>
</div>

Melalui VNode, vue boleh mencipta pokok abstrak ini Untuk operasi nod, memadam nod dan mengubah suai nod, beberapa unit minimum yang perlu diubah suai diperoleh melalui algoritma perbezaan, dan kemudian paparan dikemas kini, yang mengurangkan operasi DOM dan meningkatkan prestasi.

const app = new Vue({
    el:"#app",
    data:{
        foo:"foo"
    }
})

Beberapa kaedah untuk Vue mendapatkan DOM

(function anonymous(
) {
	with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
					  [_v("節(jié)點(diǎn)內(nèi)容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})

Walaupun Vue melaksanakan model MVVM dan memisahkan data dan prestasi, kami hanya perlu mengemas kini data boleh mengemas kini DOM secara serentak, tetapi dalam beberapa kes, ia masih perlu untuk mendapatkan elemen DOM untuk operasi (contohnya, perpustakaan yang diperkenalkan memerlukan elemen dom akar sebagai nod akar, atau menulis beberapa arahan tersuai artikel ini). memperkenalkan Beberapa cara untuk mendapatkan elemen DOM dalam Vue.

Gunakan API DOM untuk mencari terus elemen

Kaedah ini mudah dan cukup intuitif pada penghujung tampung fasa, komponen Vue akan ??> diberikan nilai elemen dom akar yang dipasang Kita boleh terus menggunakan dan kaedah lain untuk mendapatkan elemen padanan.

<script>
	...
	mounted () {
		let elm = this.$el.querySelector(&#39;#id&#39;)
	}
</script>

refsthis.$el$elquerySelector, querySelectorAll

Gunakan

contoh komponen untuk mendapatkan elemen yang sepadan dengan atribut pada komponen. Jika atribut ref ditambahkan pada komponen, maka apa yang anda dapat ialah contoh komponen ini, jika tidak, apa yang anda dapat ialah elemen DOM. Perlu diambil perhatian bahawa apabila arahan templat gelung

disertakan, atribut

<template>
	<div ref="bar">{{ foo }}</div>
	<MyAvatar ref="avatar" />
	...
</template>
<script>
	...
	mounted () {
		let foo = this.$refs[&#39;bar&#39;] // 一個(gè)dom元素
		let avatar = this.$refs[&#39;avatar&#39;] // 一個(gè)組件實(shí)例對(duì)象
	}
</script>

pada elemen gelung dan sub-elemen sepadan dengan tatasusunan (walaupun ref dijana secara dinamik, ia adalah masih tatasusunan):

$refsrefSebab untuk ini boleh didapati daripada bahagian kod Vue pada pemprosesan ref:

v-forref

Gunakan arahan tersuai

<template>
	<div v-for="item in qlist" :key="item.id" ref="qitem">
		<h3>{{ item.title  }}</h3>
		<p ref="pinitem">{{ item.desc }}</p>
		<p :ref="&#39;contact&#39;+item.id">{{ item.contact }}</p>
	</div>
	...
</template>
<script>
	...
	data () {
		return {
			qlist: [
				{ id: 10032, title: &#39;abc&#39;, desc: &#39;aadfdcc&#39;, contact: 123 },
				{ id: 11031, title: &#39;def&#39;, desc: &#39;--*--&#39;, contact: 856 },
				{ id: 20332, title: &#39;ghi&#39;, desc: &#39;?/>,<{]&#39;, contact: 900 }
			]
		}
	},
	mounted () {
		let foo = this.$refs[&#39;qitem&#39;] // 一個(gè)包含dom元素的數(shù)組
		let ps = this.$refs[&#39;pinitem&#39;] // p元素是v-for的子元素，同樣是一個(gè)數(shù)組
		let contact1 = this.$refs[&#39;contact&#39; + this.qlist[0].id] // 還是個(gè)數(shù)組
	}
</script>

Vue menyediakan arahan tersuai, dan dokumentasi rasmi memberikan kaedah penggunaan berikut, dengan

function registerRef (vnode, isRemoval) {
  var key = vnode.data.ref;
  if (!isDef(key)) { return }

  var vm = vnode.context;
  // vnode如果有componentInstance表明是一個(gè)組件vnode，它的componentInstance屬性是其真實(shí)的根元素vm
  // vnode如果沒有componentInstance則不是組件vnode，是實(shí)際元素vnode，直接取其根元素
  var ref = vnode.componentInstance || vnode.elm;
  var refs = vm.$refs;
  if (isRemoval) {
    ...
  } else {
  	// refInFor是模板編譯階段生成的，它是一個(gè)布爾值，為true表明此vnode在v-for中
    if (vnode.data.refInFor) {
      if (!Array.isArray(refs[key])) {
        refs[key] = [ref]; // 就算元素唯一，也會(huì)被處理成數(shù)組
      } else if (refs[key].indexOf(ref) < 0) {
        // $flow-disable-line
        refs[key].push(ref);
      }
    } else {
      refs[key] = ref;
    }
  }
}

merujuk kepada elemen dom

Mengenai arahan tersuai, dalam sesetengah perpustakaan komponen dan pelaporan acara, dsb. Sangat berguna dalam senario. [Cadangan berkaitan:

tutorial video vuejs

, elpembangunan bahagian hadapan web

]

Vue.directive('focus', {
  // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

// 在模板中
<template>
	<input v-model="name" v-focus />
</template>

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