실전 코드로 배우는 Vue.js

46

실전 코드로 배우는 Vue.js

Vue

디렉티브와 전용 구문으로 특정

DOM

엘리먼트와 컴포넌트 로컬 데이터를 바인딩하려

면

template

프로퍼티 구문을 필수적으로 활용해야 한다. 이어서

UI

로 표현할 데이터를 정

의하는 방법을 살펴보자.

2.52.5

데이터 프로퍼티를 통한 로컬 상태 생성 데이터 프로퍼티를 통한 로컬 상태 생성

대부분의 컴포넌트는 로컬 상태 또는 로컬 데이터를 유지하거나 외부로부터 데이터를 유입

한다.

Vue

는 옵션

API

의

data

()

함수 프로퍼티를 통해 컴포넌트의 로컬 상태를 저장한다.

data

()

는 컴포넌트의 로컬 데이터 상태가 담긴 객체를 반환하는 익명 함수다. 반환된 객체

는

데이터 객체

data

object

라 부른다. 컴포넌트 인스턴스를 초기화할 때

Vue

엔진은 데이터 객체

의 각 프로퍼티를 반응형 시스템에 추가해 변경 사항을 추적하고 그에 따라

UI

템플릿을 다

시 렌더링한다.

다시 말해 데이터 객체는 컴포넌트에 반응하는 상태를 담고 있다.

템플릿에 데이터 프로퍼티를 삽입할 때는 이중 중괄호

{{}}

로 표현하는

mustache

구문을

사용한다. [예제

2

-

2

]는 중괄호를 사용해

HTML

템플릿 내부에 데이터 프로퍼티 값을 주입

하는 예시다.

예제

2-2

제목이 주입된

HTML

템플릿

import { createApp } from ...