[Vue.js] 시작하기

 

Template Syntax

DOM을 기본 구성 요소 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용

 

 

1. Text Interpolation

- 이중 중괄호 구문 (콧수염 구문) 사용

- 콧수염 구문은 해당 구성 요소 인스턴스의 msg 속성 값으로 대체

- msg 속성 변경 시마다 업데이트

 

 

2. Raw HTML

- 콧수염 구문은 데이터를 일반 텍스트로 해석함

- 실제 HTML 출력하려면 v-html 사용해야 함

 

 

3. Attribute Bindings

- 콧수염 구문은 HTML 속성 내에서 사용할 수 없기 때문에 v-bind 사용

- html의 id 속성 값을 vue의 dynaminId 속성과 동기화 되도록

- 바인딩 값이 null이나 undefined라면 렌더링 요소에서 제거

 

 

4. JavaScript Bindings

- 모든 데이터 바인딩 내에서 JS 표현식 기능 지원

 

 

** 각 바인딩에는 단일 표현식만 가능 !!

 

---

Directive

v- 접두사로 표현

속성 값은 단일 JS 표현식으로, 표현식 값이 변경될 때 DOM에 반응적으로 업데이트를 적용한다.

 

v-on:submit.prevent="onSubmit"

 

 

:submit

- argument

 

.prevent

- directive가 특별한 방식으로 바인딩되어야 함을 나타냄

- Modifier

 

 

built-in directives

v-text

v-show

v-if

v-for