Template Syntax

Template Syntax

• 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용

1. Interpolation
2. Directive

Interpolation(보간법)

1. text

   • <span>메세지: {{ msg }}</span> 

2. Raw HTML

   • <span v-thml="rawHtml"></span>

   • 절대 사용하지 말것
3. Attributes

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

4. JS 표현식

   • {{number +1 }}

   • {{ message.split('').reverse().join(;) }}

Directive(디렉티브)

• v- 접두사가 있는 특수 속성
• 속성 값은 단일 js 표현식이 됨 (v-for는 예외)
• 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 역할을 함
• 전달인자(arguments)
  • ':' 을 통해 전달인자를 받을 수도 있음

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

• 수식어(modifiers)
  • '.' 으로 표시되는 특수 접미사
  • directive를 특별한 방법으로 바인딩 해야 함을 나타냄

  • ex)
    <form v-on:submit.prevent="onSubmit"> ... </form>

v-text

• 내부적으로 interpolation 문법이 v-text로 컴파일 됨

v-html

• 사용금지

v-show

• 조건부 렌더링 중 하나
• 요소는 항상 렌더링 되고 dom에 남아있음
• v-if는 조건에 따라 요소를 렌더링하고 v-show는 요소는 항상 렌더링되지만 시야적으로 보이지 않음

v-if, v-else-if, v-else

• 조건부 렌더링 중 하나
• 조건에 따라 요소를 렌더링(v-show와 차이가 있는 점)
• directive의 표현식이 true일 때만 렌더링
• 엘리먼트 및 포함된 directive는 토글하는 동안 삭제되고 다시 작성됨

v-for

• 원본 데이터를 기반으로 엘리먼트 또는 템플릿 블록을 여러 번 렌더링
• item in items 구문 사용
• item 위치의 변수를 각 요소에서 사용할 수 있음
  • 객체의 경우는 key
• ☆v-for 사용시 반드시 key 속성을 각 요소에 작성
• v-if와 함깨 사용하는 경우 v-for가 우선순위가 더 높음
  • 단 가능하면 v-if와 v-for를 동시에 사용x

v-bind

• HTML 요소의 속성에 vue의 상태 데이터를 값으로 할당
• Object 형태로 사용하면 value가 true인 key가 class 바인딩 값으로 할당
• 약어
  • :(콜론)
  • v-bind:href -> :href
• v-bind는 v-for 과 함께 쓰이는데 유용하다( bind의 키 값이 바뀌면서 그 키의 for 문을 돌려야 하기 때문!)
• <div v-for="item in items" v-bind:key="item.id"> <!-- content --> </div> 언제나 v-for 에 key 를 추가하는 것이 좋다. key는 독립적인 값 이여야하므로 id를 이용하는것이 보통 ex) :key="`todo-${todo.id}`"

v-on

• 엘리먼트에 이벤트 리스너를 연결
• 이벤트 유형은 전달인자로 표시함
• 특정 이벤트가 발생했을 때, 주어진 코드가 실행됨
• 약어
  • @
  • v-on:click -> @click

v-model

• HTML form 요소의 값과 data를 양방향 바인딩
• 수식어
  • .lazy
    • input 대신 change 이벤트 이후에 동기화
  • . number
    • 문자열을 숫자로 변경
  • . trim
    • 입력에 대한 trim을 진행