Django, Vue

Vue 심화 문법

📒 Syntax 기초

렌더링 된 DOM을 기본 Vue instance의 data에 선언적으로 바인딩 할 수 있는 HTML 기반 template syntax를 사용
- 렌더링 된 DOM : 브라우저에 의해 보기 좋게 그려질 HTML 코드
- HTML 기반 template syntax : HTML 코드에 직접 작성할 수 있는 문법 제공
- 선언적으로 바인딩 : Vue instance와 DOM을 연결

v-text <p v-text="message"></p>
- Template Interpolation과 함께 가장 기본적인 바인딩 방법
- {{ }} 와 동일한 역할
v-html <p v-html="html"></p>
- RAW HTML을 표현할 수 있는 방법
- 단, 사용자가 입력하거나 제공하는 컨텐츠에서 절대 사용금지 (XSS 공격)
v-show <p v-show="isActive">출력할 텍스트</p>
- 표현식에 boolean값에 따라 element를 보여줄 것인지 결정
- 대상 element의 display 속성을 기본 속성과 none으로 toggle
- 요소 자체는 항상 DOM에 렌더링 됨
v-if <p v-if="isActive">출력할 텍스트</p>
- v-show와 사용 방법은 동일
- 단, 값이 false인 경우 DOM에서 사라짐
v-for <div v-if="(char, index) in myStr"><p>{{ index }}, {{ char }} </p></div>
- for .. in .. 형식으로 작성
- 반복한 데이터 타입에 모두 사용 가능
- index를 함께 출력하고자 한다면 (char, index)형태로 사용 가능
- 각 요소가 객체라면 dot notation으로 접근할 수 있음
- v-for 사용시 반드시 key 속성을 각 요소에 작성

v-on <button v-on:click="number++">
- `:`을 통해 전달받은 인자를 확인
- addEventListener의 첫 번째 인자와 동일한 값들로 구성
- 대기하고 있던 이벤트가 발생하면 할당된 표현식 실행
- method를 통해 data 조작도 가능
- click, keyup.enter, keyup.click etc...
v-model <input v-model="myMessage" type="text">
- Vue instance와 DOM의 양방향 바인딩
- Vue data 변경 시 v-model로 연결된 사용자 입력 element에도 적용

Vue instance 가 가진 options 중 하나
computed 객체에 정의한 함수를 페이지가 최초로 렌더링 될 때 호출하여 계산
methods와 차이
- method : 호출될 때 마다 함수를 실행
  같은 결과여도 매번 새롭게 계산
- computed : 함수의 종속 대상의 변화에 따라 계산 여부가 결정됨
  종속 대상이 변하지 않으면 항상 저장(캐싱)된 값을 변환

v-for 은 항상 key와 함께 사용하기
- 내부 컴포넌트의 상태를 일관되게 유지하기 위해 v-for에 항상 key 사용하기
- 데이터의 예측 가능한 행동을 유지시키기 (객체 불변성)
v-for 을 쓴 엘리먼트에 절대 v-if를 사용하지 말기

Contents