Que signifie vue dom ?

DOM est un modèle objet de document et une interface pour la programmation HTML. Les éléments de la page sont manipulés via DOM. Le DOM est une représentation objet en mémoire d'un document HTML et fournit un moyen d'interagir avec des pages Web à l'aide de JavaScript. Le DOM est une hiérarchie (ou arbre) de nœuds avec le nœud document comme racine.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Qu'est-ce que dom

dom est un modèle objet de document et une interface pour la programmation HTML. Les éléments de la page sont manipulés via dom. Lorsqu'une page HTML est chargée, le navigateur crée un DOM, qui fournit une nouvelle structure logique pour le document et peut modifier le contenu et la structure.

DOM est appelé Document Object Model (DOM en abrégé), qui est une interface de programmation standard pour le traitement des langages de balisage extensibles recommandés par l'organisation W3C.

DOM est une représentation objet en mémoire d'un document HTML. fournit une interaction avec les pages Web à l'aide de JavaScript. Le DOM est une hiérarchie (ou arbre) de nœuds avec le nœud document comme racine.

En fait, DOM est un modèle de document décrit de manière orientée objet. Le DOM définit les objets requis pour représenter et modifier un document, les comportements et propriétés de ces objets, ainsi que les relations entre ces objets.

Avec JavaScript, nous pouvons reconstruire l'intégralité du document HTML. Tels que l'ajout, la suppression, la modification ou la réorganisation d'éléments sur la page.

Pour modifier quelque chose sur la page, JavaScript doit accéder à tous les éléments du document HTML. Cette entrée, ainsi que les méthodes et propriétés permettant d'ajouter, de déplacer, de modifier ou de supprimer des éléments HTML, est obtenue via le modèle objet de document.

Qu'est-ce que le DOM virtuel

Je pense que tout le monde connaît le concept de DOM virtuel De React à Vue, le DOM virtuel apporte des fonctionnalités multiplateformes aux deux frameworks (React-Native et Weex)

En fait. , c'est juste une couche d'abstraction du DOM réel. Il utilise des objets JavaScript (nœuds VNode) comme base de l'arborescence, et utilise les propriétés de l'objet pour décrire les nœuds. Enfin, cet arbre peut être mappé au réel. DOM à travers une série d'opérations. D'un point de vue environnemental, dans les objets Javascript, le DOM virtuel est représenté comme un objet Object. Et il contient au moins trois attributs : le nom de la balise (tag), les attributs (attrs) et les objets d'élément enfant (children). Différents frameworks peuvent avoir des noms différents pour ces trois attributs. Le but de la création d'un DOM virtuel est de mieux intégrer les nœuds virtuels. Rendu à la vue de la page, de sorte que les nœuds de l'objet DOM virtuel correspondent aux propriétés du DOM réel un par un. La technologie Virtual DOM est également utilisée dans vue. Nous pouvons obtenir le DOM virtuel

<div id="app">
    <p class="p">节点内容</p>
    <h3>{{ foo }}</h3>
</div>

Grâce. VNode, vue peut créer des nœuds, supprimer des nœuds et modifier des nœuds sur cet arbre abstrait, grâce à l'algorithme diff, nous pouvons obtenir certaines unités minimales qui doivent être modifiées, puis mettre à jour la vue, réduisant ainsi les opérations dom et améliorant les performances.

Plusieurs méthodes pour que Vue obtienne le DOM

Bien que Vue implémente le modèle MVVM et sépare les données et les performances, il suffit de mettre à jour les données pour mettre à jour le DOM de manière synchrone, mais dans certains cas, il est toujours nécessaire de obtenir des éléments DOM pour le fonctionnement (par exemple, une bibliothèque introduite nécessite de transmettre un élément DOM racine en tant que nœud racine, ou d'écrire des instructions personnalisées. Cet article présente principalement plusieurs méthodes pour obtenir des éléments DOM dans Vue).

Utilisez l'API DOM pour trouver l'élément directement

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

Cette méthode est assez simple et intuitive. À la fin de la phase de patch, le composant Vue attribuera this.$el. en tant qu'élément dom racine monté, nous pouvons directement utiliser querySelector, querySelectorAll de $el et d'autres méthodes pour obtenir les éléments correspondants.

refs

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

Utilisez le $refs de l'instance du composant pour obtenir l'attribut ref sur le composant élément correspondant.
Si l'attribut ref est ajouté à un composant, alors ce que vous obtenez est l'instance de ce composant, sinon ce que vous obtenez est l'élément DOM. Il est à noter que lorsque la directive de modèle de boucle v-for est incluse, l'attribut ref sur l'élément et le sous-élément de boucle correspond à un tableau (même si ref est généré dynamiquement, également un tableau) :

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

La raison en est obtenue à partir de la partie du code de Vue sur le traitement des références :

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

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

Utiliser personnalisé instructions

Vue fournit Pour les instructions personnalisées, le document officiel donne la méthode d'utilisation suivante, où el est une référence à l'élément domrrreee Concernant les instructions personnalisées, c'est très utile dans certaines bibliothèques de composants et des scénarios de rapport d'événements.

【Recommandations associées : 🎜tutoriel vidéo vuejs🎜, 🎜développement web front-end🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!