Vue에서 노드를 얻는 방법

Vue에서 노드를 가져오는 방법: DOM 노드에 직접 액세스: $el을 사용하여 구성 요소 루트 요소에 액세스합니다. $refs 사용: 구성 요소의 하위 요소 또는 루트 요소에 액세스하려면 ref를 사용하여 이름을 지정해야 합니다. 렌더링 함수 사용: 렌더링 함수에서 요소를 생성하고 vm.$vnode를 통해 DOM 노드에 액세스합니다. Vuetify 및 Element UI와 같은 타사 라이브러리를 사용하면 각각 $el 및 $refs를 통해 DOM 노드에 액세스할 수 있습니다.

Vue에서 노드를 얻는 방법은 무엇입니까?

DOM 노드에 직접 액세스

• $el: 구성 요소 루트 요소에 액세스합니다. $el: 访问组件根元素。
• $refs: 访问组件的子元素或根元素，需要在模板中使用 ref 属性指定名称。

使用渲染函数

• 在 render 函数中，使用 createElement 函数创建元素，并将其作为 v-node 返回。
• 然后可以通过 vm.$vnode 访问 v-node，进而获取 DOM 节点。

使用第三方的库

• Vuetify: 提供 $el 属性，可以通过 this.$el 访问 DOM 节点。
• Element UI: 提供 $refs 属性，可以通过 this.$refs
$refs: 구성 요소의 하위 요소 또는 루트 요소에 액세스하려면 템플릿에서 ref 속성을 ​​사용하여 이름을 지정해야 합니다.

렌더링 함수 사용

• render 함수에서 createElement 함수를 사용하여 요소를 생성하고 v-node 반환. <strong></strong>그런 다음 <code>vm.$vnode를 통해 v-node에 액세스하여 DOM 노드를 얻을 수 있습니다.

• 타사 라이브러리 사용

Vuetify: this.$el을 통해 DOM 노드에 액세스할 수 있는 $el 속성을 ​​제공합니다.

• Element UI: this.$refs를 통해 DOM 노드에 액세스할 수 있는 $refs 속성을 ​​제공합니다.

예:

<code class="html"><template>
<div id="app">Hello</div>
</template>

<script>
export default {
mounted() {
  console.log(this.$el); // 获取 DOM 节点 <div id="app">
}
}
</script></code>

<code class="html"><template>
<div>Hello</div>
</template>

<script>
export default {
render(h) {
  return h('div', 'Hello');
},
mounted() {
  console.log(this.$vnode.elm); // 获取 DOM 节点 <div>
}
}
</script></code>

위 내용은 Vue에서 노드를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!