DOM ist ein Dokumentobjektmodell und eine Schnittstelle für die HTML-Programmierung. Elemente auf der Seite werden über DOM manipuliert. Das DOM ist eine speicherinterne Objektdarstellung eines HTML-Dokuments und bietet eine M?glichkeit, mithilfe von JavaScript mit Webseiten zu interagieren. Das DOM ist eine Hierarchie (oder ein Baum) von Knoten mit dem Dokumentknoten als Wurzel.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Was ist Dom? Dom ist ein Dokumentobjektmodell und eine Schnittstelle für die HTML-Programmierung. Sie k?nnen Dom zum Bedienen von Elementen auf der Seite verwenden. Wenn eine HTML-Seite geladen wird, erstellt der Browser ein DOM, das dem Dokument eine neue logische Struktur verleiht und den Inhalt und die Struktur ?ndern kann. DOM wird als Document Object Model (kurz DOM) bezeichnet und ist eine von der W3C-Organisation empfohlene Standardprogrammierschnittstelle zur Verarbeitung erweiterbarer Auszeichnungssprachen.

DOM ist eine speicherinterne Objektdarstellung eines HTML-Dokuments Bietet Interaktion mit Webseiten mithilfe von JavaScript. Das DOM ist eine Hierarchie (oder ein Baum) von Knoten mit dem Dokumentknoten als Wurzel.

Tats?chlich ist DOM ein Dokumentmodell, das objektorientiert beschrieben wird. Das DOM definiert die Objekte, die zum Darstellen und ?ndern eines Dokuments erforderlich sind, das Verhalten und die Eigenschaften dieser Objekte sowie die Beziehungen zwischen diesen Objekten.

Mit JavaScript k?nnen wir das gesamte HTML-Dokument rekonstruieren. Zum Beispiel das Hinzufügen, Entfernen, ?ndern oder Neuanordnen von Elementen auf der Seite.

Um etwas auf der Seite zu ?ndern, muss JavaScript Zugriff auf alle Elemente im HTML-Dokument erhalten. Dieser Eintrag wird zusammen mit den Methoden und Eigenschaften zum Hinzufügen, Verschieben, ?ndern oder Entfernen von HTML-Elementen über das Document Object Model abgerufen.

Was ist virtuelles DOM? Ich glaube, jeder kennt das Konzept des virtuellen DOM. Von React bis Vue bietet virtuelles DOM plattformübergreifende Funktionen für beide Frameworks (React-Native und Weex).

Tats?chlich Es handelt sich lediglich um eine Abstraktionsebene des realen DOM. Es verwendet JavaScript-Objekte (VNode-Knoten) als Basis des Baums und verwendet die Eigenschaften des Objekts, um die Knoten zu beschreiben. Schlie?lich kann dieser Baum dem realen zugeordnet werden DOM durch eine Reihe von Operationen. Aus ?kologischer Sicht wird das virtuelle DOM in Javascript-Objekten als Objektobjekt dargestellt. Und es enth?lt mindestens drei Attribute: Tag-Name (Tag), Attribute (Attrs) und untergeordnete Elementobjekte (Children). Verschiedene Frameworks k?nnen unterschiedliche Namen für diese drei Attribute haben. Der Zweck der Erstellung eines virtuellen DOM besteht darin, virtuelle Knoten besser zu integrieren. In der Seitenansicht gerendert, sodass die Knoten des virtuellen DOM-Objekts nacheinander den Eigenschaften des realen DOM entsprechen. Definieren Sie das reale DOMrrreeDurch VNode kann in diesem abstrakten Baum Knoten erstellen, Knoten l?schen und Knoten ?ndern. Mithilfe des Diff-Algorithmus k?nnen wir einige Mindesteinheiten ermitteln, die ge?ndert werden müssen, und dann die Ansicht aktualisieren, wodurch die Leistung verbessert wird.

Mehrere Methoden für Vue, um DOM zu erhalten

Obwohl Vue das MVVM-Modell implementiert und Daten und Leistung trennt, müssen wir nur die Daten aktualisieren, um das DOM synchron zu aktualisieren. In einigen F?llen ist dies jedoch immer noch erforderlich Erhalten Sie DOM-Elemente für den Betrieb (z. B. erfordert eine eingeführte Bibliothek die übergabe eines Root-DOM-Elements als Root-Knoten oder das Schreiben einiger benutzerdefinierter Anweisungen. In diesem Artikel werden haupts?chlich verschiedene Methoden zum Abrufen von DOM-Elementen in Vue vorgestellt.

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

Diese Methode ist einfach und intuitiv genug. Am Ende der Patch-Phase weist die Vue-Komponente this.$el zu Als gemountetes Root-Dom-Element k?nnen wir $els querySelector, querySelectorAll und andere Methoden direkt verwenden, um passende Elemente zu erhalten.

refs

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

(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))])])}})

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

Benutzerdefiniert verwenden AnweisungenVue bietet für benutzerdefinierte Anweisungen das offizielle Dokument die folgende Verwendungsmethode, wobei el ein Verweis auf das Dom-Element ist

<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>

In Bezug auf benutzerdefinierte Anweisungen ist es in einigen Komponentenbibliotheken sehr nützlich und Ereignisberichtsszenarien. this.$el賦值為掛載的根dom元素，我們可以直接使用$el的querySelector, querySelectorAll等方法獲取匹配的元素。

refs

<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>

使用組件實(shí)例的$refs即可拿到組件上ref屬性對(duì)應(yīng)的元素。
如果ref屬性加在一個(gè)組件上，那么拿到的是這個(gè)組件的實(shí)例，否則拿到的就是dom元素了。

值得注意的是包含v-for循環(huán)模板指令的情況，其循環(huán)元素和子元素上ref屬性對(duì)應(yīng)的都是一個(gè)數(shù)組（就算動(dòng)態(tài)生成ref，也是數(shù)組）：

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;
    }
  }
}

關(guān)于這個(gè)的原因，可以從Vue關(guān)于ref處理的部分代碼得到：

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

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

使用自定義指令

Vue提供了自定義指令，官方文檔給出了如下的使用方法，其中el

vuejs-Video-Tutorial

Web-Front-End-Entwicklung】

Das obige ist der detaillierte Inhalt vonWas bedeutet vue dom?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!