▶ 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 뒤에 사용할 수 있는 코드) - 작동하지 않는 경우 ![]() |
'WEB > Vue.js' 카테고리의 다른 글
[Vue.js][기본 문법] 3. Dynamical data binding 동적 데이터 연결 (0) | 2024.04.29 |
---|---|
[Vue.js][기본 문법 ] 2. Directive (0) | 2024.04.29 |
[Vue.js][기본 문법 ] 0. 목차 (0) | 2024.04.29 |
[Vue.js][intro] 11. CSR & SSR (0) | 2024.04.29 |
[Vue.js][intro] 10. Ref Unwrap 주의사항 (0) | 2024.04.29 |