Vue.JS) 튜토리얼 : Attribute Binding

In Vue, mustaches are only used for text interpolation. To bind an attribute to a dynamic value, we use the v-bind directive:

뷰에서 머스태치 문법은 오직 텍스트를 껴넣을때만 사용한다. 

어트리뷰트를 HTML에 추가하려면 v-bind 문법을 이용하면 된다.

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

A directive is a special attribute that starts with the v- prefix. They are part of Vue's template syntax. Similar to text interpolations, directive values are JavaScript expressions that have access to the component's state. The full details of v-bind and directive syntax are discussed in Guide - Template Syntax.

directive 는 v- 접두사로 시작하는 특별한 어트리뷰트이다. 뷰의 템플릿 문법 중 하나이며, 머스태치 문법같이 텍스트 끼워넣기와 비슷하다. directive value는 컴포넌트 state에 접근할 수 있는 자바스크립트 표현식이다.

더 디테일한 v-bind의 설명과 directive syntax를 보려면 위 링크를 들어가보자. 

 

The part after the colon (:id) is the "argument" of the directive. Here, the element's id attribute will be synced with the dynamicId property from the component's state.

콜론 뒤에 오는 (:id 처럼) 부분은 디렉티브 문법의 아규먼트(인자)이다.여기의 id 어트리뷰트는 컴포넌트의 state와 동기화되어 작동한다. (<- 이게 좀 헷갈린다.) 

 

v-bind 문법은 자주 사용되기 때문에 shorthand(단축구문)이 존재한다.

(v-bind를 안쓰고 콜론부터 써버리는 방식이다.)

<div :id="dynamicId"></div>

---

 

Composition API

<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
  <h1 v-bind:class="titleClass">2DC입니다.</h1> <!-- add dynamic class binding here -->
</template>

<style>
.title {
  color: blue;
}
</style>

뭔가 바뀌긴 하는데 느낌이 이질적이다.

---

Options API

<script>
export default {
  data() {
    return {
      titleClass: 'title'
    }
  }
}
</script>

<template>
  <h1 v-bind:class="titleClass">vue 좀 이상해요.</h1> <!-- add dynamic class binding here -->
</template>

<style>
.title {
  color: violet;
}
</style>

으으으.. 이상해..