Apakah maksud vue dom?

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">节点内容</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("节点内容")]),_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;] // 一个dom元素
		let avatar = this.$refs[&#39;avatar&#39;] // 一个组件实例对象
	}
</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;] // 一个包含dom元素的数组
		let ps = this.$refs[&#39;pinitem&#39;] // p元素是v-for的子元素，同样是一个数组
		let contact1 = this.$refs[&#39;contact&#39; + this.qlist[0].id] // 还是个数组
	}
</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表明是一个组件vnode，它的componentInstance属性是其真实的根元素vm
  // vnode如果没有componentInstance则不是组件vnode，是实际元素vnode，直接取其根元素
  var ref = vnode.componentInstance || vnode.elm;
  var refs = vm.$refs;
  if (isRemoval) {
    ...
  } else {
  	// refInFor是模板编译阶段生成的，它是一个布尔值，为true表明此vnode在v-for中
    if (vnode.data.refInFor) {
      if (!Array.isArray(refs[key])) {
        refs[key] = [ref]; // 就算元素唯一，也会被处理成数组
      } 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', {
  // 当被绑定的元素插入到 DOM 中时……
  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!