[Vue] Template Syntax

Template Syntax

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

 

Interploation (보간법)

- Text

<span>메시지: {{ message }}</span>

 

- Raw HTML

<span v-html="rawHtml"></span>

 

- Attributes

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

 

- JS 표현식

{{ number + 1 }}
{{ message.split('').reverse().join('') }}

 

Directive (디렉티브)

• v- 접두사가 있는 특수 속성
• 속성 값은 단일 JS 표현식이 됨
• 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 역할
• 전달인자 (Arguments) : ':' (콜론)을 통해 전달인자 받을 수 있음
• 수식어 (Modifiers) : '.' (점)으로 표시되는 특수 접미사, directive를 특별한 방법으로 바인딩해야함을 나타냄

 

- v-text

• 엘리먼트의 textContent를 업데이트
• 내부적으로 interpolation 문법이 v-text로 컴파일 됨

<p>{{ message }}</p>
<p v-text="message"></p>

 

- v-html

• 엘리먼트의 innerHTML을 업데이트
• XSS 공격에 취약
• 사용자 입력값에서는 절대 사용 금지

<div v-html="myHtml"></div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      myHtml: '<b>Hello</b>'
    },
  })
</script>

 

[조건문]

- v-show

• 조건부 렌더링 중 하나
• 엘리먼트는 항상 렌더링 되고 DOM에 남아있음
• 단순히 엘리먼트의 display CSS 속성을 hidden으로 만들어 토글

<div id="app">
  <p v-show="isTrue">true</p>
  <p v-show="isFalse">false</p>
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isTrue: true,
      isFalse: false,
    },
  })
</script>

 

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

• 조건부 렌더링 중 하나
• 조건에 따라 블록을 렌더링, directive 표현식이 true일 때만 렌더링
• 엘리먼트 및 포함된 directive는 토글하는 동안 삭제되고 다시 작성

<div id="app">
  <p v-if="isTrue">true</p>
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isTrue: true,
    },
  })
</script>

 

* v-show와 v-if

• v-show
  • 실제로 렌더링은 되지만 눈에 보이지 않는 것
  • 딱 한 번만 렌더링되는 경우라면, v-if에 비해 렌더링 비용 높음
  • 자주 변경되는 요소라면, 렌더링 이후 보여주는지 여부만 판단하기 때문에 토글 비용 적음
• v-if
  • 전달인자가 false은 경우 렌더링이 되지 않음
  • 렌더링 자체가 되지 않기 때문에 렌더링 비용 낮음
  • 자주 변경되는 요소의 경우, 다시 렌더링 해야하므로 비용 증가할 수 있음

 

[반복문]

- v-for

• 원본 데이터를 기반으로 엘리먼트 또는 템플릿 블록을 여러 번 렌더링
• 'item in items' 구문 사용
• 반드시 key 속성을 각 요소에 작성
• v-if와 함께 사용하는 경우 v-for가 더 우선순위가 높음 (가능하면 같이 쓰지 말 것)

<div id="app">
  <div v-for="item in items" :key="item.id">{{ item.title }}</div>
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      items: [
        {id: 1, title: 'item1'},
        {id: 2, title: 'item2'},
        {id: 3, title: 'item3'},
      ]
    },
  })

 

[이벤트]

- v-on

• 엘리먼트에 이벤트 리스너 연결
• 이벤트 유형은 전달인자로 표시
• 특정 이벤트 발생 시, 주어진 코드 실행
• shorthand : @ (v-on:click === @click)

<div id="app">
  <button @click="doAlert">button</button>
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
    },
    methods: {
      doAlert: function () {
        alert('Hi!')
      },
    }
  })
</script>

 

[Element 속성 바인딩]

- v-bind

• HTML 요소 속성에 Vue의 상태 데이터를 값으로 할당
• Object 형태로 사용하면 value가 true인 key가 class 바인딩 값으로 할당
• shorthand : :(콜론) (v-bind:href === :href)

<div id="app">
  <div :class="{ active: isRed }">안녕</div>
  <div :clss="[activeRed, myBackground]">잘가</div>
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isRed: true,
      activeRed: 'active',
      myBackground: 'my-background-color'
    },
  })
</script>

 

- v-model

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

<div id="app">
  <input v-model="userInput" type="text">
</div>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      userInput: '',
    },
  })
</script>