vue dom은 무슨 뜻인가요?

DOM은 문서 객체 모델이자 HTML 프로그래밍을 위한 인터페이스입니다. DOM을 사용하여 페이지의 요소를 조작할 수 있습니다. DOM은 HTML 문서의 메모리 내 개체 표현이며 JavaScript를 사용하여 웹 페이지와 상호 작용하는 방법을 제공합니다. DOM은 문서 노드를 루트로 하는 노드의 계층 구조(또는 트리)입니다.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

dom이란 무엇입니까

dom은 문서 객체 모델이자 HTML 프로그래밍을 위한 인터페이스입니다. 페이지의 요소는 DOM을 통해 조작됩니다. HTML 페이지가 로드되면 브라우저는 문서에 대한 새로운 논리적 구조를 제공하고 콘텐츠와 구조를 변경할 수 있는 DOM을 생성합니다.

DOM은 W3C 조직에서 권장하는 확장 가능한 마크업 언어 처리를 위한 표준 프로그래밍 인터페이스인 문서 객체 모델(DOM)이라고 합니다.

DOM은 HTML 문서의 메모리 내 객체 표현입니다. JavaScript 방식을 사용하여 웹 페이지와 상호 작용을 제공합니다. DOM은 문서 노드를 루트로 하는 노드의 계층 구조(또는 트리)입니다.

사실 DOM은 객체지향 방식으로 기술된 문서 모델입니다. DOM은 문서를 표현하고 수정하는 데 필요한 개체, 이러한 개체의 동작 및 속성, 이러한 개체 간의 관계를 정의합니다.

JavaScript를 사용하면 전체 HTML 문서를 재구성할 수 있습니다. 예를 들어 페이지의 항목을 추가, 제거, 변경 또는 재배열합니다.

페이지의 내용을 변경하려면 JavaScript가 HTML 문서의 모든 요소에 액세스할 수 있어야 합니다. HTML 요소를 추가, 이동, 변경 또는 제거하기 위한 메서드 및 속성과 함께 이 항목은 문서 객체 모델을 통해 얻습니다.

가상 DOM이란 무엇입니까

React에서 Vue에 이르기까지 가상 DOM은 두 프레임워크(React-Native 및 Weex) 모두에 크로스 플랫폼 기능을 제공합니다.

사실 , 이는 실제 DOM의 추상화 계층일 뿐입니다. 이는 JavaScript 개체(VNode 노드)를 트리의 기초로 사용하고 개체의 속성을 사용하여 노드를 설명할 수 있습니다. 일련의 작업을 통한 DOM 환경적으로 말하면 Javascript 객체에서 가상 DOM은 객체 객체로 표시됩니다. 그리고 여기에는 태그 이름(tag), 속성(attrs) 및 하위 요소 개체(children)라는 세 가지 속성이 포함되어 있습니다. 가상 DOM을 만드는 목적은 가상 노드를 더 잘 통합하는 것입니다. 페이지 뷰로 렌더링되므로 가상 DOM 개체의 노드가 실제 DOM의 속성과 하나씩 일치합니다. vue에서도 가상 DOM을 정의할 수 있습니다.

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

VNode, vue는 이 추상 트리에서 노드를 생성하고, 노드를 삭제하고, diff 알고리즘을 통해 수정해야 하는 최소 단위를 얻은 다음 뷰를 업데이트하여 dom 작업을 줄이고 성능을 향상시킬 수 있습니다.

Vue가 DOM을 획득하는 여러 가지 방법

Vue는 MVVM 모델을 구현하고 데이터와 성능을 분리하지만 DOM을 동기식으로 업데이트하려면 데이터만 업데이트하면 되지만 경우에 따라 여전히 필요한 경우도 있습니다. 작업을 위한 DOM 요소 얻기(예를 들어, 도입된 라이브러리에는 루트 DOM 요소를 루트 노드로 전달하거나 일부 사용자 정의 지침을 작성해야 함) 이 기사에서는 Vue에서 DOM 요소를 얻는 여러 가지 방법을 주로 소개합니다.

DOM API를 사용하여 요소를 직접 찾으세요

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

이 방법은 충분히 간단하고 직관적입니다. 패치 단계가 끝나면 Vue 구성 요소가 this.$el을 할당합니다. 마운트된 루트 dom 요소로서 $el의 querySelector, querySelectorAll 및 기타 메소드를 직접 사용하여 일치하는 요소를 얻을 수 있습니다.

refs

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

구성 요소 인스턴스의 $refs를 사용하여 ref 속성을 ​​가져옵니다. 구성 요소에 해당하는 요소입니다.
ref 속성이 구성 요소에 추가되면 이 구성 요소의 인스턴스를 얻게 되고, 그렇지 않으면 DOM 요소를 얻게 됩니다. v-for 루프 템플릿 지시문이 포함되면 루프 요소와 하위 요소의 ref 속성이 배열에 해당한다는 점에 주목할 가치가 있습니다( ref는 동적으로 생성되며 배열이기도 합니다.

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

이에 대한 이유는 ref 처리에 대한 Vue 코드 부분에서 확인할 수 있습니다:

<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

사용자 정의 사용 Instructions

Vue는 사용자 지정 명령의 경우 공식 문서에서 다음과 같은 사용 방법을 제공합니다. 여기서 el는 dom 요소에 대한 참조입니다.rrreee 사용자 지정 명령과 관련하여 일부 구성 요소 라이브러리에서 매우 유용합니다. 및 이벤트 보고 시나리오.

【관련 추천: 🎜vuejs 동영상 튜토리얼🎜, 🎜웹 프론트엔드 개발🎜】🎜

위 내용은 vue dom은 무슨 뜻인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!