Vue에서 DOM 노드를 작동하는 방법

Vue는 최신 웹 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue의 핵심 개념은 데이터를 뷰에서 분리하고 데이터 변경 사항을 뷰에 신속하게 반영하는 반응형 메커니즘을 제공하는 것입니다. 프레임워크는 이러한 목표를 잘 달성하지만 어떤 경우에는 DOM 노드를 직접 조작해야 합니다.

이 기사에서는 Vue가 DOM 노드 및 관련 API를 작동하는 방법을 알아봅니다.

Vue가 DOM 노드를 작동하는 방법

Vue에서는 특별한 명령어와 객체를 사용하여 DOM 노드를 작동할 수 있습니다. Vue는 DOM 노드를 조작할 수 있는 여러 내장 지침과 메서드를 제공합니다. 다음은 DOM 노드를 작동하는 데 사용되는 일부 Vue 명령어 및 객체입니다.

1. v-on

v-on 명령어는 콜백 함수를 이벤트에 바인딩하는 데 사용됩니다. 일반적인 이벤트에는 클릭과 마우스 오버가 포함되며 이러한 이벤트 중 일부에서는 DOM이 수정됩니다. 예를 들어 v-on 지시문을 사용하면 버튼 클릭 시에만 특정 텍스트를 변경할 수 있습니다.

<button v-on:click="updateText"> 更改文本 </button>
<span>{{ text }}</span>

new Vue({
  el: '#app',
  data: {
    text: '老八租房网',
  },
  methods: {
    updateText() {
      this.text = '欢迎使用老八租房网';
    },
  },
});

2. v-bind

v-bind 지시문은 Vue의 데이터를 DOM 속성에 바인딩하는 데 사용됩니다. 바인딩된 값은 Vue, 구성 요소 속성 또는 Vue 표현식에 정의된 데이터일 수 있습니다. 예를 들어 배경색을 데이터 변수 color에 바인딩합니다.

<div v-bind:style="{ backgroundColor: color }">
    这里是背景颜色
</div>

new Vue({
  el: '#app',
  data: {
    color: '#00aaff'
  }
})

3. $refs object

$refs는 Vue에서 DOM 요소에 액세스하기 위해 제공하는 메서드입니다. Vue는 컴포넌트를 렌더링할 때 v-ref 또는 ref 속성을 사용하여 각 DOM 요소에 대한 해당 참조를 생성합니다. 이 애플리케이션에서 목록 항목의 스타일을 업데이트하려면 $refs 객체를 통해 찾아 스타일을 설정할 수 있습니다.

<template>
  <ul>
    <li v-for="item in items" ref="list" :class="{ selected: item.selected }" @click="onItemClick(item)">
      {{ item.text }}
    </li>
  </ul>
</template>

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, text: '列表项1', selected: false },
      { id: 2, text: '列表项2', selected: false },
      { id: 3, text: '列表项3', selected: false }
    ]
  },
  methods: {
    onItemClick(item) {
      item.selected = true;
      const el = this.$refs.list.find(li => li.item === item);
      el.classList.toggle('selected');
    }
  }
});

4. $el object

Vue 구성 요소가 시작되면 구성 요소의 템플릿을 렌더링 함수로 컴파일하고 구성 요소에 바인딩한 다음 구성 요소의 $el 속성에 DOM 요소를 설정합니다. 이런 방식으로 $el 객체를 사용하여 구성 요소의 DOM 노드에 직접 액세스할 수 있습니다. 예를 들어 구성 요소의 스타일을 지정하려면

<template>
  <div class="container">
    <input type="text" v-model="text" />
  </div>
</template>

new Vue({
  el: '#app',
  data: {
    text: ''
  },
  mounted() {
    const el = this.$el.querySelector('input');
    el.focus();
  }
});

위는 DOM 노드를 작동하는 여러 Vue 명령어와 개체입니다. Vue는 DOM 조작을 권장하지 않지만 경우에 따라 DOM을 조작해야 할 수도 있습니다. 이 경우 Vue는 DOM과 직접 상호 작용하는 데 도움이 되는 매우 유용한 API를 제공합니다.

Vue의 DOM 노드 운영을 위한 공통 API

Vue는 DOM을 직접 운영하기 위한 몇 가지 방법을 제공합니다. 다음은 Vue에서 DOM을 작동하는 몇 가지 일반적인 방법입니다.

1. 요소 추가 및 제거

Vue에서는 $mount() 메서드를 사용하여 DOM에 구성 요소를 동적으로 추가할 수 있습니다. $mount 메소드를 사용하면 HTML 요소에 구성요소를 마운트할 수 있습니다. 예를 들어 ID가 "app"인 요소에 Vue 구성 요소를 추가하려면:

<div id="app"></div>

const vm = new Vue({
  template: '<div>这里是动态插入的内容</div>'
});

// 将组件挂载到DOM上
vm.$mount('#app');

마찬가지로 Vue는 DOM에서 요소를 제거하는 제거 메서드를 제공합니다.

vm.$el.remove();

2. 요소 속성에 액세스하려면

을 사용할 수 있습니다. 요소의 속성에 액세스하기 위해 Vue el 속성에서 제공하는 $입니다. 예를 들어, HTML 텍스트 콘텐츠에 액세스하려면:

<div id="app">这里是文本内容</div>

const el = document.querySelector('#app');
console.log(el.textContent); // 输出：这里是文本内容

3. 요소 속성 설정

Vue에서 제공하는 $el 속성을 사용하여 요소의 속성을 설정할 수 있습니다. 예를 들어, HTML 텍스트 콘텐츠를 설정하려면:

const el = document.querySelector('#app');
el.textContent = '这里是更新后的文本内容';

Conclusion

Vue는 DOM을 조작하는 다양하고 쉬운 방법을 제공합니다. 이러한 메서드는 애플리케이션 개발을 위해 Vue를 사용할 때 요소를 조작해야 하는 특정 상황에서 특히 중요합니다. 그러나 Vue의 핵심 반응 메커니즘을 성공적으로 구현하려면 DOM을 직접 조작하지 말고 DOM을 조작하지 마십시오.

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