Vue 주요 Syntax 몇 가지 정리

Vue.js는 렌더링 된 DOM을 Vue 인스턴스의 데이터에 선언적으로 binding할 수 있는 HTML 기반 템플릿 구문을 사용한다.

내부적으로 Vue는 템플릿을 Virtual DOM 렌더링 함수로 컴파일 한다.

상태가 변경될 때 최소한으로 DOM을 조작하고 적용한다.

템플릿 대신 렌더링 함수를 직접 작성도 가능하고, 선택사항으로 *JSX를 지원한다.

*JSX란? : javascript + XML을 합쳐서 탄생한 기존 자바스크립트의 확장 문법. 개발자가 자바스크립트 내부에 마크업 코드를 작성할 수 있는 형태. React에서 사용하는 문법

1. v-html : '{{}}'는 일반 텍스트로 데이터를 해석하므로, 실제 HTML 출력을 원하는 경우 v-html을 사용

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

2. v-bind (:) : "데이터=>뷰"의 단 방향 데이터 바인딩에 사용되는 디렉티브이다. '{{}}'는  HTML attribute에서 사용이 불가능하여, v-bind로 인스턴스의 데이터를 사용한다.

* boolean 속성을 사용할 때는 null, undefined, false의 값 경우 엘리먼트에 포함되지 않는다.

<div v-bind:id="dynamicId"></div>

<button v-bind:disabled="isButtonDisabled">Button</button>

<a v-bind:href="url"> ... </a>

3. v-model : Vue는 양방향 바인딩이 가능하다. v-bind와는 반대로 "뷰=><=데이터" 경우의 사용하는 디렉티브 이다. 즉, javascript에서 사용할 값으로 연결하는 디렉티브

폼에 관련된 태그에만 사용 될 수 있다: <input> <select> <textarea>

참고

https://vuejs.org/v2/guide/forms.html

https://velopert.com/3136

https://vuejs.org/v2/cookbook/form-validation.html

4. v-if : 엘리먼트를 제거 또는 삽입가능 조건부 렌더링에 사용하는 디렉티브

<p v-if="seen">이제 나를 볼 수 있어요</p>

*기타 : v-else-if, v-else

5. v-show : v-if와 차이점은 Element는 항상 렌더링되고 DOM에 남아 있단는 점이다. Element의 display css속성을 toggle한다. (사용법은 조건부 v-if와 거의 동일)

*v-show는 일단 렌더링되지만 보이지 않는 것, v-if는 렌더링 여부 자체에 영향

 => 자주 바뀌면 v-show를, 런타임 시 조건이 바뀌지 않는다면 v-if를 권장

6. v-for

반복되는 DOM 내용이 단순하지 않거나 의도적인 성능 향상을 위해, 기본 동작에 의존하지 않는한 가능하면 언제나 v-for에 key를 추가하는 것이 좋다고 권장.

<li v-for="item in items">
    {{ item.message }}
  </li>

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

7. v-on : click, mouseover, submit 등의 이벤트 (= @click, mouseover ) : DOM 이벤트를 수신하는 v-on 디렉티브

8. 위에서 본 것과 같이 v-bind, v-on의 약어가 존재한다 : v-bind => : , v-on : => @