[Goorm] Vue.js로 시작하는 SPA개발 Chapter5. Directives

[Goorm] Vue.js로 시작하는 SPA개발

5. Directives

5.1. Directive의 개념과 v-for

● 참고문서

---

- 조건부 랜더링(Conditional Rendering) : https://kr.vuejs.org/v2/guide/conditional.html

- 리스트 랜더링 - 반복문(List Rendering) : https://kr.vuejs.org/v2/guide/list.html

- 이벤트 핸들링 - JavaScript Event (Event Handling) : https://kr.vuejs.org/v2/guide/events.html

- 폼 입력 바인딩 - Data Binding (Form Input Bindings) : https://kr.vuejs.org/v2/guide/forms.html

---

● Directive

---

- 'v-' prefix(접두사)를 가지고 있음.

- 보간법이라는 의미로 위치 지정자라고 함.

- Interpolation만으로는 힘든 각종 효과들을 쉽게 적용(가장 큰 장점)

■ 조건문, 반복문, 이벤트 등등

- 어떤 Directive는 인자를 받을 수 있음

■ v-bind:href="url" // href를 인사로 받아서 url이라는 변수를 href에 bind시키는 것

---

● v-for

---

- 동일한 형태의 항목들에 대해서 반복적으로 표시

- 대부분의 에디터에서는 :key를 사용하도록 권장

■ 고유한 Key값을 통해, 항목들이 예측 가능한 순서로 나타내기 위함

■ https://kr.vuejs.org/v2/style-guide/index.html#v-for-%EC%97%90-key-%EC%A7%80%EC%A0%95-%ED%95%84%EC%88%98

---

5.2. v-if 알아보기

● v-if : 조건문

---

- v-if / v-else-if / v-eles

■ boolean값을 이용해 보여주는 것에 대한 조작을 할 수 있음

■ v-if의 Toggle Cost(화면에 그려지거나 그려지지 않는데 사용되는 비용)가 크다고 함

---

5.3. v-if 예제 실습

● 실습 코드

---

---

5.4. v-model 알아보기 & 실습

● v-model : (Form Input) Data Binding

---

- input DOM에 Data Binding을 설정하는 것

■ 대부분의 input Type에서 가능

■ text, textarea, checkbox, radio, select

■ JavaScript의 document.getElementByTagName("input")[0].value를 사용하는 것과 같은 효과

■ Modifier를 이용해 input값을 다듬을 수 있음

■ .number : String을 Numeric 값으로 TypeCast

■ .trim : 앞 뒤 WhiteSpace들을 정리

■ .lazy : input DOM에서 포커스가 나갔을 때 Updata(연속된 이벤트 발생 방지)

---

● 실습 코드

---

---

5.5. v-on 알아보기

● v-on : Event Handling

---

- Native DOM Event와 Custom Event 모두 조작 가능

■ 특히, Modifier를 이용해서 특정 이벤트만 골라서 적용 가능

---

★ Native DOM Event : 이미 설정되어 있는 이벤트

★ Custom Event : 어떤 목적에 의해 초기화된 이벤트 및 사용자가 만든 이벤트

---

5.6. v-on 예제 실습

● 실습 코드

---

---

---

● 실습 코드 Github 및 출처

---

- 실습 코드 : https://github.com/ksy90101/Vue.js/tree/master/%5BGoorm%5DVue.js/Chapter05

- 출처 : https://edu.goorm.io/learn/lecture/13020/vue-js%EB%A1%9C-%EC%8B%9C%EC%9E%91%ED%95%98%EB%8A%94-spa-%EA%B0%9C%EB%B0%9C

---