1. Template syntax
- 렌더링 된 DOM을 기본으로 Vue instance data에 선언적으로 바인딩 할 수 있는 HTML 기반 template syntax를 사용
- Template Interpolation : 가장 기본적인 바인딩(연결) 방법
{{}}로 표기
- HTML을 일반텍스트로 표현
- Raw HTML
- v-html directive을 사용하여 data와 바인딩
- HTML의 기본 속성이 아닌 Vue가 제공하는 특수 속성의 값으로 data를 작성
2. Directives
1. 기본 구성
- v-접두사가 있는 특수 속성에는 값을 할당할 수 있음
- 값에는 JS 표현식을 작성 할 수 있음
- directive의 역할은 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 것
- 각각의 instance들은 연결된 DOM element에만 영향을 미친다
- ‘:’ 을 통해서 전달인자를 받을 수 있다.
- ‘.’ 으로 표시되는 특수접미사 -directive를 특별한 방법으로 바인딩 해야 함.
2. v-text
- 가장 기본적인 바인딩 방법
- {{}} 와 동일한 역할. (정확히 동일한 것은 아님)
3. v-html
- RAW HTML을 표현할 수 있는 방법
- 단, 사용자가 입력하거나 제공하는 컨텐츠에는 절대 사용 금지
- XSS 공격 참고
4. v-show
- 표현식에 작성된 값에 따라 element를 보여 줄 것인지 결정
- boolean 값이 변경 될 때마다 반응한다.
- 대상 element의 display 속성을 기본 속성과 none으로 toggle 한다.
isActive = false: 화면에만 사라졌을 뿐, DOM에는 존재한다. (렌더링 된다.)
5. v-if
- v-show와 사용방법은 동일. isActive의 값이 변경될 때 반응
isActive = false: DOM에서 사라짐
| v-show | v-if | |
| 초기 비용 | 초기 렌더링 비용 높음 | 초기 렌더링 비용 낮음 |
| toggle 비용 | display 속성 변경으로 표현 여부를 판단하므로 렌더링 후 toggle 비용은 적음 | 표현식 값이 자주 변경되는 경우 잦은 재 렌더링으로 비용이 증가할 수 있음. |
6. v-for
- v-for = “()… in …” 형식으로 작성
- index를 함께 출력하고자 한다면 (char, index) 형태로 사용 가능
- 배열도 문자열과 동일하게 사용 가능.
- 각 요소가 객체라면 dot notation으로 접근할 수 있음.
⛔
v-for 사용 시 반드시 key 속성을 각 요소에 작성해야 한다.
- 특수 속성 key
- 주로 v-for directive 작성 시 사용
- vue 화면 구성 시 이전과 달라진 점을 확인하는 용도로 확인한다.
⇒ key 가 중복(x)
- 각 요소가 고유한 값을 가지고 있지 않다면 생략할 수 있다.
7. v-on
- “:” 을 통해 전달받은 인자를 확인
- addEventListener의 첫번째 인자와 동일한 값들로 구성
- 이벤트가 발생하면 할당된 표현식을 진행한다.
- @ : shortcut
8. v-bind
- HTML의 기본 속성에 Vue data를 연결
- ‘:’ shortcut 을 제공한다.
9. v-model
- Vue instance와 DOM의 양방향 바인딩
- Vue data 변경 → v-model로 연결된 사용자 입력 element에도 적용
Uploaded by N2T