vue dom とはどういう意味ですか?

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

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

domとは

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

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

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

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

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

仮想 DOM とは

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

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

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

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

仮想 DOM テクノロジは vue

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

<div id="app">
    <p class="p">节点内容</p>
    <h3 id="nbsp-foo-nbsp">{{ 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("节点内容")]),_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 id="nbsp-item-title-nbsp-nbsp">{{ 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>

この理由は、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]; // 就算元素唯一，也会被处理成数组
      } 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 サイトの他の関連記事を参照してください。