>  기사  >  웹 프론트엔드  >  vue $el이 무엇인가요? 용도는 무엇입니까?

vue $el이 무엇인가요? 용도는 무엇입니까?

PHPz
PHPz원래의
2023-04-07 09:30:302497검색

Vue $el은 Vue 인스턴스와 관련된 DOM 요소를 얻는 데 사용되는 Vue 인스턴스의 속성입니다.

Vue에서는 Vue 인스턴스를 통해 데이터를 조작하고 템플릿 렌더링을 구현하지만 최종적으로 페이지에 렌더링되는 것은 Vue 인스턴스와 연결된 DOM 요소입니다. Vue $el 속성은 이 DOM 요소를 얻는 데 사용됩니다.

Vue $el 속성을 통해 현재 Vue 인스턴스와 연결된 DOM 요소를 가져온 다음 기본 DOM API를 사용하여 이 DOM 요소에서 작동할 수 있습니다.

예를 들어 다음 코드가 포함된 Vue 인스턴스가 있다고 가정해 보겠습니다.

<div id="app">
  {{ message }}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Hello World!'
    }
  })
</script>

이 예에서는 Vue 인스턴스를 정의하고 이를 앱 ID가 있는 DOM 요소와 연결합니다. Vue $el 속성을 통해 DOM 요소를 가져온 다음 기본 JavaScript 코드를 통해 이를 작동할 수 있습니다. 예:

var app = vm.$el;
app.style.color = 'red';

위 코드는 Vue 인스턴스에서 렌더링된 DOM 요소의 글꼴 색상을 빨간색으로 변경합니다.

Vue 인스턴스의 수명 주기 동안 $el 속성이 항상 존재하는 것은 아닙니다. Vue 인스턴스가 페이지에 렌더링된 후에만 $el 속성에 Vue 인스턴스와 연결된 DOM 요소의 값이 할당됩니다. 따라서 인스턴스가 마운트된 후에만 $el 속성에 액세스할 수 있습니다. 인스턴스가 삭제되면 $el 속성도 자동으로 삭제됩니다.

요약하자면 Vue $el 속성은 Vue 인스턴스와 연결된 DOM 요소의 속성을 가져오는 데 사용되며 Vue 인스턴스가 마운트된 후에만 사용할 수 있습니다. $el 속성을 통해 관련 DOM 요소를 직접 작동하고 일부 기본 JavaScript 기능을 구현할 수 있습니다.

위 내용은 vue $el이 무엇인가요? 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.