[Vue.js][기본 문법 ] 1. Template 문법

▶ Template 문법

DOM을 인스턴스의 데이터에 선언적으로 연결하기 

HTML 기반 template 구문을 사용한다 

기본 구성 요소 인스턴스

(Vue instance와 DOM을 연결함

 

▶ Template 문법 종류 

Text Interpolation (텍스트 보간법)

Raw HTML 

Attribute Bindings

JavaScript Expressions (자바스크립트 표현)

 

Text Interpolation

데이터 바인딩의 가장 기본적인 형태  이중 중괄호 구문을 사용한다  이중 중괄호 구문은 해당 구성 요소 인스턴스의 msg 속성 값으로 대체한다.  msg 속성이 변경될 때마다 업데이트 된다.

 

Raw HTML

이중 중괄호 구문은 데이터를 일반적인 텍스트로 해석한다.  그래서 실제 HTML을 출력하려면 v-html 을 사용해야한다

 

Attribute Bindings

이중 중괄호 구문은 HTML 속성 내에서 사용할 수 없기 때문에, v-bind를 사용한다  HTML의 id 속성 값을 vue의 dynamicId 속성과 동기화되도록 한다.  binding 값이 null 이나 undefind인 경우, 렌더링 요소에서 제거된다.

 

JavaScript 표현

Vue는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원한다. Vue 템플릿에서 JavaScript 표현식을 사용할 수 있는 위치이다.  이중 중괄호 내부 모든 directive의 속성 값 ("v-"로 시작하는 특수 속성)

* 주의사항  각 바인딩에는 1개의 단일 표현식만 포함될 수 있다.  표현식은 값으로 평가할 수 있는 코드 조각이어야한다.  (return 뒤에 사용할 수 있는 코드) - 작동하지 않는 경우