Vue.js 기초 파트 4 | 수명 주기 및 템플릿 참조

오늘은 Vue.js의 ref 속성에 대해 이야기해보겠습니다.

이것은 내 Vue.js 기본 시리즈의 4부입니다. 2부를 읽으려면 클릭하세요(스포일러! 3부는 계산된 속성에 관한 것입니다).

DOM으로 수동으로 작업해야 할 때 ref 속성을 사용합니다. 아마도 가장 일반적인 사용 사례는 양식일 것입니다. 특히 페이지가 '마운트'(로드)될 때 입력에 집중하려는 경우에 그렇습니다.

'마운트됨'은 Vue의 라이프사이클 후크 중 하나입니다. 수명 주기 후크란 무엇입니까? 즉, 각 Vue 구성 요소는 생성될 때 일련의 단계를 거칩니다. 가장 일반적인 것 중 일부는 updated 및 unmounted 입니다.

라이프사이클 후크가 필요한 이유는 무엇입니까? 특정 단계(페이지가 로드/렌더링, 업데이트, 마운트 해제 등)에서 자체 코드를 추가할 수 있는 기회를 제공하기 때문입니다.
mounted 속성은 무엇을 합니까? mounted 구성 요소가 초기 렌더링을 완료한 후에 후크가 사용됩니다. 즉, 내부에 입력한 모든 항목mounted은 구성 요소 '마운트'(첫 번째 렌더링 후) 직후에 실행됩니다.
ref로 돌아가 보겠습니다. 어떻게 사용합니까?
이렇게:

<template>
  <p ref="p">hello</p>
</template>

먼저 참조하려는 요소에 ref 속성을 추가합니다. ref="p" , 'ref='는 참조를 나타내고 'p'는 참조 방법을 나타냅니다. 아래에 코드를 넣으면 더 이해하기 쉬울 것입니다.

<script>
export default {
  mounted() {
    this.$refs.p.innerHTML = "yooo"
  }
}
</script>

mounted 후크(및 모든 수명 주기 후크)에서 this 키워드를 사용하여 개체에 액세스할 수 있습니다. 그렇지 않으면 Vue는 우리가 참조하는 것을 알 수 없습니다. this.$refs.p.innerHTML = "yooo" 이 코드 줄을 사용하여 ref로 이동하여 p를 선택하고(ref="p"기억) innerHTML 값을 다른 값으로 변경합니다.

요약하자면, 오늘 우리는 Vue.js의 라이프사이클 훅과 템플릿 참조(ref)에 대해 간단히 이야기했습니다.