[앱 만들기][Vue.js #2] MVVM패턴, 각종 디렉티브

*DOM

- Document Object Model

- 웹페이지에 대한 인터페이스

- 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공

 

*MVVM패턴(Model - View - ViewModel)

- MVVM 패턴은 "애플리케이션 로직"과 "UI"의 분리를 위해 설계된 패턴

- View는 HTML과 CSS로 작성

- ViewModel은 View의 실제 논리 및 데이터 흐름을 담당

 

*디렉티브

- v-text, {{}} : innerText 속성에 연결됨. 태그 문자열을 HTML 인코딩하여 나타내기 때문에 화면에는 태그 문자열이 그대로 나타남

- v-html : <script> 태그를 그대로 바인딩함. XSS 공격 등에 취약함(Cross Site Scripting) 

- v-bind : 요소 객체의 속성들을 바인딩하기 위해 사용

- v-model : 양방향 데이터 바인딩

- v-show : 일단 HTML 요소를 렌더링한 후에 display 스타일 속성으로 화면에 보여줄지 여부를 결정

- v-if : 조건에 부합되지 않으면 렌더링 안 함

- v-else

- v-else-if

 

*v-for 

- 반복적인 데이터를 렌더링

- 원본 데이터가 배결인 경우, <tr v-for=" (contact, index) in contacts"> ~ </tr>

- 원본 데이터가 객체인 경우, 키를 이용해 값에 접근하는 해시맵 구조, <option v-for=" (val, key, index) in regions"> ~ </option>

- v-for 과 v-if 디렉티브는 함께 사용할 수 있다. (순서 조심, v-for 먼저 수행되고 v-if 적용됨)