600.jpg

템플릿 문법이란?

  • 템플릿 : 실제 화면에 보일 HTML의 틀
  • 템플릿 : 일정한 룰에 의해 해석되는 HTML문서
  • 템플릿 문법 : 템플릿 블럭에서 사용되는 문법
  • 템플릿 문법은 주로 디렉티브(Directive)로 이루어져 있음
  • 디렉티브(Directive) : v- 접두사가 있는 특수 속성, 속성 값은 단일 javascript 표현식
    <div v-if="isShow">Hello, Vue!</div>

데이터 바인딩

  • 데이터 바인딩 : 템플릿과 Vue 인스턴스의 데이터를 연결하는 것

1. Mustache

  • 가장 쉬운 데이터 바인딩 문법
  • html 속성에서 사용할 수 없음
    {{ expression }}
  • 데이터 값이 변경된다면 바인딩된 View도 변경된 값으로 다시 템플릿을 렌더링

2. v-text

  • mustache와 거의 동일하게 작동
  • 중괄호로 감싸는 대신 디렉티브를 이용해 데이터 바인딩
    <span v-text="message"></span>

3. v-html

  • HTML 문자열을 그대로 바인딩
  • 주의해서 사용해야 함
    <span v-html="message"></span>
    <script>
        new Vue({
            el: '#app',
            data : {
                message: 'Hello,<br>Vue!'
            }
        })
    <script>

4. v-bind

  • 태그의 속성에 데이터를 바인딩하는 문법
<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>

  <body>
    <div id="app">
      <a v-bind:href="naverLink">네이버 링크</a><br>
      <a v-bind:href="githubLink">깃허브 링크</a>
    </div>

    <script src="https://unpkg.com/vue@2.3"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          naverLink: 'http://www.naver.com/',
          githubLink: 'https://github.com/'
        }
      });
    </script>
  </body>
</html>

JavaScript 표현식 사용

  • 실제로 Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현식의 모든 기능을 지원
  • 한가지 제한사항은 각 바인딩에 하나의 단일 표현식 만 포함
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

조건문

v-if

  • v-if는 조건이 true일 경우 보여주고 false일 경우에는 보여주지 않음
<h1 v-if="ok">Yes</h1>

v-else, v-else-if

  • 조건에 맞지 않는 경우에 보여질 템플릿 정의
<div id="app">
    <div v-if="isIf">v-if true</div>                     <!-- v-if -->
    <div v-else-if="!isIf">v-if false</div>              <!-- v-else-if -->
    <div v-else="isIf">v-if else</div>                   <!-- v-else -->

    <div v-show="isShow">v-show true</div>               <!-- v-show -->

</div>
<script>
    new Vue({
        el: '#app',
        data: {
            isIf: true,
            isShow: true
        }
    });
</script>

template if

  • 여러개의 엘리먼트를 묶어 한 번에 처리해야 할때 사용
  • template 엘리먼트는 가상 엘리먼트이기 떄문에, 실제로 렌더린될 때는 template 엘리먼트 자식들만 렌더링 됨
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

v-show

  • 조건이 true일 경우 렌더링하고 false 경우네는 렌더링 하지 않음
  • v-if는 조건이 false일 경우 DOM 트리에서 삭제되지만,
    v-show는 단순히 display CSS 속성을 토글
  • v-show는 <template> 구문을 지원하지 않으며 v-else와도 작동하지 않습니다.

반복문

v-for

  • 반복적인 엘리먼트를 렌더링
<li v-for="index in 100"> {{ index }} </li>  //1부터 100까지 루프돌며 li 엘리먼트 렌더링

v-for와 리스트

<div id="app">
  <ul>
    <li v-for="number in numbers">  //item in list 형태로 자바스크립트 표현식 사용
      {{ number }}
    </li>
  </ul>
</div>

<script src="https://unpkg.com/vue@2.3"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      numbers: [1, 1, 2, 3, 5, 8, 13, 21]
    }
  });
</script>
  • index는 두 번째 인자로 전달되며 0부터 시작

v-for와 오브젝트

<div id="app">
  <ul>
    <li v-for="(number, index) in numbers">
      {{ index }}: {{ number }}
    </li>
  </ul>
</div>

<script src="https://unpkg.com/vue@2.3"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      numbers: [1, 1, 2, 3, 5, 8, 13, 21]
    }
  });
</script>
  • 전달인자를 추가하는 것만으로 키값을 얻을 수 있음
  • key 전달인자도 두 번째 전달인자로 포함

template v-for

  • 여러 개의 엘리먼트를 포함시키고 싶을 때 사용
<template v-for="(item, key) in object">
  <h1>{{ key }}</h1>
  <p>{{ item }}</p>
</template>

v-if와 v-for

  • v-for가 v-if보다 높은 우선순위를 갖음. 즉, v-if는 루프가 반복될 때마다 실행
  • 반복 자체를 건너뛰는 것이 목적이라면 v-if를 상위 엘리먼트로 감싸 처리

key

  • Vue가 각 노드의 ID를 추적하고 기존 엘리먼트를 재사용하고 재정렬할 수 있도록 힌트를 제공하려면
    각 항목에 고유한 key 속성을 제공해야 함
  • key에 대한 이상적인 값은 각 항목의 고유한 ID
  • v-bind를 사용하여 동적 값에 바인딩 해야 함
<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>
  • 반복되는 DOM 내용이 단순하지 않거나 의도적인 성능 향상을 위해 기본 동작에 의존하지 않는한
    가능하면 언제나 v-for에 key를 추가하는 것이 좋음

주의사항

  • 언어 차원의 문제로 막지 못한 두가지 array 접근은 Vue의 오작동을 유발할 수 있음
    1. Array의 length를 직접 변경하기
    2. Array의 특정 index에 해당하는 값을 직접 설정할 때