Vue.js 템플릿 문법 (1)

1. 문자열 바인딩

Mustache(이중 중괄호)를 사용한 문자열 바인딩(Text Interpolation) 문법이다.

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

title message 속성 값으로 대체하며, 속성이 바뀔 때 마다 업데이트된다.

---

2. v-bind

v-bind는 html 속성인 src, id, class 등에 대해 데이터 바인딩을 할 때 사용하며 편의상 v-bind를 생략하기도 한다.

<img :src="a.image" class="" @click="showDetail" />

style 속성도 v-bind 문법 적용이 가능한데 특히 서버에 저장되어있는 이미지를 불러올 때 매우 유용하다.

<div class="post-body" :style="{ backgroundImage`url(${PostList.postImage})`}"></div>

3. 함수 호출

<button @click="reverseMessage">Reverse Message</button>

 methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    },

버튼 클릭 시 reverseMessage 함수를 호출한다. 공식 문서에 추가로 다음과 같은 팁이 있다.

바인딩 표현식 내부에서 호출되는 함수는 컴포넌트가 업데이트될 때마다 호출되므로, 데이터를 변경 또는 비동기 작업을 트리거하는 등의 부작용이 없어야 한다.

아마도 데이터 바인딩 시 속성이 바뀔 때 마다 업데이트 되는 것 처럼, 함수를 호출 할 때는 컴포넌트가 업데이트 될 때 마다 호출한다. Vue.js 에서 데이터 변경 감지를 알아서 해주기 때문에.

그래서 함수 내에서 데이터를 변경하거나 비동기 방식으로 상태를 변경한다면, 컴포넌트가 다시 렌더링 될 때 예기치 않은 부작용을 야기할 수 있다라는 팁인 것 같다.

---

4. v-if

<p v-if="openModal == true">Now you see me</p>

모달이나 팝업창을 구현할 때 자주 쓰인다. data()에 openModal 상태를 저장하고, 클릭 이벤트 등을 실행 시 openModal의 상태를 true/false 상태로 변경해주면 Vue 문법만으로 쉽게 처리 가능하다.