Vue에서 DOM 요소를 얻는 여러 가지 방법에 대해 토론하세요.-프런트엔드 Q&A-php.cn

Vue에서 DOM 요소를 얻는 여러 가지 방법에 대해 토론하세요.

PHPz

풀어 주다： 2023-04-07 10:05:32

원래의

6243명이 탐색했습니다.

Vue는 개발자가 대화형 웹 애플리케이션을 쉽게 구축할 수 있는 인기 있는 JavaScript 프레임워크입니다. 일반적인 요구 사항 중 하나는 Vue 구성 요소에서 DOM 요소를 가져와서 조작할 수 있도록 하는 것입니다. 그러나 Vue에는 DOM 요소를 가져오는 몇 가지 특별한 방법이 있습니다. 이 기사에서는 Vue에서 DOM 요소를 얻는 여러 가지 방법을 살펴보겠습니다.

1. $refs를 통해 요소 가져오기

Vue의 $refs는 구성 요소의 모든 DOM 요소에 대한 참조를 제공하는 특수 개체입니다. Vue 구성 요소에서는 ref 속성을 통해 요소 이름을 지정한 다음 $refs 객체를 사용하여 요소에 액세스할 수 있습니다. 예는 다음과 같습니다.

<template>
  <div>
    <input type="text" ref="myInput">
    <button @click="handleClick">获取输入框的值</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log(this.$refs.myInput.value);
    },
  },
};
</script>

로그인 후 복사

위 예에서는 입력 상자에 ref 속성을 추가하고 이를 myInput으로 설정했습니다. this.$refs.myInput을 사용하여 이 요소에 액세스할 수 있습니다. handlerClick 메서드에서는 입력 상자의 값을 가져와서 콘솔에 인쇄합니다.

2. 이벤트 매개변수 $event를 통해 요소를 가져옵니다

DOM 이벤트를 처리할 때 Vue 구성 요소는 현재 이벤트의 대상 요소(target)를 포함하여 이벤트에 대한 모든 정보가 포함된 특수 이벤트 매개 변수 $event를 제공합니다.

<template>
  <div>
    <input type="text" @blur="handleBlur">
  </div>
</template>

<script>
export default {
  methods: {
    handleBlur(event) {
      console.log(event.target.value);
    },
  },
};
</script>

로그인 후 복사

위의 예에서는 @blur 이벤트 리스너를 추가하고 이를 handlerBlur 메서드에 바인딩했습니다. 입력 상자가 포커스를 잃으면 handlerBlur 메서드가 트리거됩니다. 이 메소드는 이벤트 매개변수 이벤트를 승인하고 event.target.value를 사용하여 입력 상자의 값을 얻습니다.

3. 타사 라이브러리 사용

Vue에서 제공하는 방법 외에도 타사 라이브러리를 사용하여 DOM 요소를 얻을 수도 있습니다. jQuery는 DOM 요소를 쉽게 가져오고 조작할 수 있게 해주는 인기 있는 JavaScript 라이브러리입니다. Vue 구성 요소에 jQuery를 추가한 다음 jQuery의 선택기를 사용하여 요소에 액세스할 수 있습니다.

<template>
  <div ref="myDiv">
    <p>Hello World!</p>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  mounted() {
    const myDiv = $(this.$refs.myDiv);
    const p = myDiv.find("p");
    console.log(p.text());
  },
};
</script>

로그인 후 복사

위의 예에서는

요소에 ref 속성을 추가하고 이를 myDiv로 설정했습니다. 그런 다음 Mounted() 후크 함수에서 jQuery 선택기를 사용하여 요소와 해당 하위 요소에 액세스합니다. 마지막으로 p.text()를 사용하여

요소의 텍스트 콘텐츠를 가져와서 콘솔에 인쇄합니다.

요약하자면 Vue는 간단한 $refs부터 강력한 jQuery 선택기에 이르기까지 DOM 요소를 얻기 위한 다양한 방법을 제공합니다. 개발자는 애플리케이션에 가장 적합한 방법을 선택할 수 있습니다.

위 내용은 Vue에서 DOM 요소를 얻는 여러 가지 방법에 대해 토론하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!