DOM はドキュメント オブジェクト モデルであり、HTML プログラミング用のインターフェイスであり、ページ內の要素は DOM を通じて操作されます。 DOM は HTML ドキュメントのメモリ內オブジェクト表現(xiàn)であり、JavaScript を使用して Web ページと対話する方法を提供します。 DOM は、ドキュメント ノードをルートとするノードの階層 (またはツリー) です。

#このチュートリアルの動作環(huán)境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。

domとは

domとはドキュメントオブジェクトモデルであり、HTMLプログラミングのためのインターフェースであり、ページはdom要素を通じて操作されます。 HTML ページが読み込まれると、ブラウザーは DOM を作成します。DOM は、ドキュメントに新しい論理構造を提供し、コンテンツと構造を変更できます。

DOM はドキュメント オブジェクト モデル (略して DOM) と呼ばれ、拡張可能なマークアップ言語を処理するために W3C 組織によって推奨されている標準プログラミング インターフェイスです。 HTML ドキュメントの JavaScript を使用して Web ページと対話する方法を提供します。 DOM は、ドキュメント ノードをルートとするノードの階層 (またはツリー) です。

実際、DOM はオブジェクト指向の方法で記述されたドキュメント モデルです。 DOM は、ドキュメントを表現(xiàn)および変更するために必要なオブジェクト、これらのオブジェクトの動作とプロパティ、およびこれらのオブジェクト間の関係を定義します。

JavaScript を使用すると、HTML ドキュメント全體を再構築できます。ページ上の項目の追加、削除、変更、再配置など。

ページ上の何かを変更するには、JavaScript が HTML ドキュメント內のすべての要素にアクセスする必要があります。このエントリは、HTML 要素を追加、移動、変更、または削除するためのメソッドおよびプロパティとともに、ドキュメント オブジェクト モデルを通じて取得されます。

仮想 DOM とは

仮想 DOM の概念は誰もがよく知っていると思いますが、React から Vue まで、仮想 DOM は両方のフレームワークですクロスプラットフォーム機能 (React-Native と Weex) をもたらします

実際、これは実際の DOM の抽象化レイヤーにすぎず、JavaScript オブジェクト (VNode ノード) をベースツリーとして使用し、オブジェクトはノードを記述するために使用され、最終的に一連の操作を通じてツリーを実際の環(huán)境にマッピングできます。

JavaScript オブジェクトでは、仮想 DOM は Object オブジェクトとして表されます。そして、少なくとも 3 つの屬性が含まれています: タグ名 (tag)、屬性 (attrs)、および子要素オブジェクト (children)。フレームワークが異なれば、これら 3 つの屬性の名前も異なる場合があります。

仮想 DOM の作成は、仮想ノードをページ ビューにレンダリングすると、仮想 DOM オブジェクトのノードが実際の DOM のプロパティに 1 つずつ対応します。

仮想 DOM テクノロジは vue

Define でも使用されます。実際の DOM

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

vue のインスタンス化

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

レンダリングのレンダリングを観察すると、仮想 DOM#

(function anonymous(
) {
	with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
					  [_v("節(jié)點內容")]),_v(" "),_c('h3',[_v(_s(foo))])])}})

VNode を介して取得できます。vue はノードの作成、ノードの削除、変更を行うことができます。抽象ツリー ノード操作の場合、変更が必要な最小単位が diff アルゴリズムによって取得され、ビューが更新されるため、DOM 操作が軽減され、パフォーマンスが向上します。

Vue が DOM を取得するためのいくつかのメソッド

Vue は MVVM モデルを実裝し、データとパフォーマンスを分離しますが、必要なのはデータを更新することだけですDOM を同期的に更新できますが、場合によっては、操作のために DOM 要素を取得する必要がある場合もあります (たとえば、導入されたライブラリでは、ルート dom 要素をルート ノードとして渡すか、いくつかのカスタム命令を記述する必要があります)。 Vue で DOM 要素を取得するいくつかの方法。

DOM API を使用して要素を直接検索します

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

この方法はシンプルで直感的であり、Vue コンポーネントは これを実行します。 $el には、マウントされたルート dom 要素の値が割り當てられます。

$el

の querySelector、querySelectorAll、およびその他のメソッドを直接使用して、一致する要素を取得できます。

refs

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

コンポーネント インスタンスの $refs を使用してコンポーネント

ref## を取得します#屬性に対応する要素。

ref 屬性がコンポーネントに追加された場合、取得されるのはこのコンポーネントのインスタンスです。それ以外の場合、取得されるのは dom 要素です。 v-for ループ テンプレート ディレクティブが含まれる場合、ループ要素とサブ要素の
ref

屬性は配列 (動的に生成された ref、配列であっても):

<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元素的數(shù)組
		let ps = this.$refs[&#39;pinitem&#39;] // p元素是v-for的子元素，同樣是一個數(shù)組
		let contact1 = this.$refs[&#39;contact&#39; + this.qlist[0].id] // 還是個數(shù)組
	}
</script>

この理由は、Vue の 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]; // 就算元素唯一，也會被處理成數(shù)組
      } else if (refs[key].indexOf(ref) < 0) {
        // $flow-disable-line
        refs[key].push(ref);
      }
    } else {
      refs[key] = ref;
    }
  }
}

カスタム命令を使用する

##Vue はカスタム命令を提供します。公式ドキュメントには次の使用方法が記載されています (el は dom 要素

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

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

## への參照です) # カスタム命令に関しては、コンポーネント ライブラリやイベント レポートなどのシナリオで非常に役立ちます。

[関連する推奨事項:

vuejs ビデオ チュートリアル 、Web フロントエンド開発

]

以上がvue dom とはどういう意味ですか?の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。