이전 블로그/글에서 컴포넌트를 생성하고, 가져오고, 사용하는 방법을 배웠습니다. 이번에는 컴포넌트의 데이터 바인딩에 대해 살펴보겠습니다.

구성 요소 내에서 데이터 사용

구성 요소에서 데이터 정의
데이터는 data() 함수에 정의되어 객체로 반환됩니다.
예는 다음과 같습니다.

data() {
  return {
    message: 'Hello World!'
  };
}

지시어로 바인딩

v-bind: HTML 속성을 데이터에 바인딩합니다.

v-model: v-model 지시문은 양식 입력에 대한 양방향 데이터 바인딩에 사용됩니다. 입력 값을 Vue 인스턴스 데이터와 동기화된 상태로 유지합니다. 기본적으로 v-model은 @input(변경 사항 수신)과 :value(입력 값 설정)를 결합합니다. 예를 들어:

이것은 다음과 같습니다:

:value와 @input을 별도로 사용하는 방법은 다음과 같습니다.

v-if 지시문은 부울 값을 기반으로 요소를 조건부로 렌더링합니다. 조건이 true이면 요소가 렌더링됩니다. 거짓이면 그렇지 않습니다. 예를 들어:

This is visible!

v-for 지시문은 요소를 렌더링하기 위해 배열이나 객체를 반복하는 데 사용됩니다. 더 나은 성능을 위해 각 요소에 고유한 키를 부여할 수 있습니다. 예를 들어:

• {{ item.name }}

v-on
v-on 지시어는 요소의 이벤트를 수신하는 데 사용됩니다. 편의를 위해 약어 @를 사용할 수 있습니다. 예를 들어:

Click me!

다음과 같이 단축할 수 있습니다.

Click me!