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

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

4. Template Syntax

4.1. 주요 문법 설명

● Template

---

- Vue.js만의 특수한 문법으로 틀을 짜면, 그 틀은 실제 보여주는 화면을 위한 HTML로 Complie

■ Template이 Virtual DOM Render Function으로 컴파일

---

★ Virtual DOM : 실제 DOM에 필요한 변경사항을 추적하기 위해 만드는 것

★ Render Function : Vue는 템블릿을 사용하여 대다수 경우 HTML을 작성할 것을 권장함. 그러나 JavaScript가 완전히 필요한 상황이 있을 때, 템플릿에 더 가까운 컴파일러인 Render Function을 사용할 수 있음

---

■ Reactivity System을 통해 최소한으로 다시 표시해야하는 Component들을 파악

■ 즉, View에 대한 코드를 덜 복잡하게 짤 수 있음.

---

● Interpolation

---

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

- 이질적인 것을 (호환되게) 집어 넣어주는 것

■ Component의 Data를 View에 집어넣어주는 것

- 대표적인 종류

■ Text : 가장 기본적인 것(Mustache Binding)

■ Mustache 구문은 이중 중괄호 구문. ex) {{ }}

■ HTML, Attributes, Class, Style과 같은 속성들 또한 Dynamic하게 적용 가능

---

● Directive

---

- 지시문이라는 의미로 Vue엘리먼트에서 사용되는 특별한 속성

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

- Interpolation만으로는 힘든 각종 효과들을 쉽게 적용

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

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

■ ex) v-bind:fref="url" => href를 인자로 받아서 url이라는 변수를 href에 bind 시키는 것

---

● Modifiers

---

- 제어자라는 의미로 해당 Directive가 어떤 상황에서만 적용되도록 하는 것

■ Ex) Enter키를 눌렀을때만 Callback 함수 호출

■ Callback이란 다른 함수의 인자로써 이용되는 함수 및 어떤 이벤트에 의해 호출되어지는 함수

---

● Shorthand

---

- 속기, 약칭이라는 의미로 한마디로 단축어

- IDE를 쓰면 자동 완성으로 편리하겠지만, 그렇지 않은 경우 단축 문법을 참고해 쉽게 코드 작성 가능

- 이걸 쓰면 코드 전체 내 일관성을 유지하는 것이 가독성에 좋음

---

4.2. 문법 실습

● 예제

---

- <input>을 이용해 입력을 받음

- 입력된 값을 <p>에서 실시간으로 보여줌

- <input>에서 Enter키를 눌리면 "입력 완료" 메시지를 띄움

---

---

● 실습 코드 Github 및 출처

---

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

- 출처 : 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

---