Was bedeutet vue dom?

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.

Verwenden Sie die DOM-API, um das Element direkt zu finden

<div id="app">
    <p class="p">节点内容</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"
    }
})

Verwenden Sie die $refs der Komponenteninstanz, um das Attribut ref zu erhalten das der Komponente entsprechende Element.
Wenn das ref-Attribut zu einer Komponente hinzugefügt wird, erhalten Sie die Instanz dieser Komponente, andernfalls erhalten Sie das DOM-Element. Es ist erwähnenswert, dass, wenn die Schleifenvorlagenanweisung v-for enthalten ist, das Attribut ref auf dem Schleifenelement und dem Unterelement einem Array entspricht (auch wenn ref wird dynamisch generiert, auch ein Array):

(function anonymous(
) {
	with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
					  [_v("节点内容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})

Der Grund dafür kann Vues Teil des Codes zur Ref-Verarbeitung entnommen werden:

<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;] // 一个dom元素
		let avatar = this.$refs[&#39;avatar&#39;] // 一个组件实例对象
	}
</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;] // 一个包含dom元素的数组
		let ps = this.$refs[&#39;pinitem&#39;] // p元素是v-for的子元素，同样是一个数组
		let contact1 = this.$refs[&#39;contact&#39; + this.qlist[0].id] // 还是个数组
	}
</script>

使用组件实例的$refs即可拿到组件上ref属性对应的元素。
如果ref属性加在一个组件上，那么拿到的是这个组件的实例，否则拿到的就是dom元素了。

值得注意的是包含v-for循环模板指令的情况，其循环元素和子元素上ref属性对应的都是一个数组（就算动态生成ref，也是数组）：

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

关于这个的原因，可以从Vue关于ref处理的部分代码得到：

Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

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

使用自定义指令

Vue提供了自定义指令，官方文档给出了如下的使用方法，其中el

【Verwandte Empfehlungen:

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!