1. 템플릿 문법

01. 보간법(Interpolation)

• {{ }}

-1. 문자열(v-once)

데이터 바인딩의 가장 기본 형태는 “Mustache”(이중 중괄호 구문)기법을 사용한 문자열 보간법(text interpolation)입니다.
<span>메시지: {{ msg }}</span>

Mustache 태그는 해당 컴포넌트 인스턴스의 msg 속성 값으로 대체됩니다.
또한 msg 속성이 변경될 때 마다 갱신됩니다.
v-once 디렉티브를 사용하여 데이터가 변경되어도 갱신되지 않는 일회성 보간을 수행할 수 있습니다
다만, 이런 경우 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 합니다
<span v-once>결코 변하지 않을 것입니다: {{ msg }}</span>

-2. 원시 HTML(v-html)

이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석합니다
실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 합니다.
<p>이중 중괄호 사용: {{ rawHtml }}</p>
<p>v-html 디렉티브 사용: <span v-html="rawHtml"></span></p>

-3. 속성(v-bind)

Mustaches(이중 중괄호 구문)는 HTML 속성에 사용할 수 없습니다.
대신 v-bind 디렉티브를 사용하세요.
<div v-bind:id="dynamicId"></div>

-3-1. v-bind 약어

<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

<!-- 동적 전달인자와 함께 쓴 약어 -->
<a :[key]="url"> ... </a>

-3-2. v-on 약어

<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

<!-- 동적 전달인자와 함께 쓴 약어 -->
<a @[event]="doSomething"> ... </a>

2. 실습

01. v-once

• before

<template>
  <h1 @click="add">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello World!",
    };
  },
  methods: {
    add() {
      this.msg += "!";
    },
  },
};
</script>

• after

<template>
  <h1 v-once @click="add">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello World!",
    };
  },
  methods: {
    add() {
      this.msg += "!";
    },
  },
};
</script>

02. v-html

• before

<template>
  <h1 v-once @click="add">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: "<div style='color:#F00;'>Hello!</div>",
    };
  },
  methods: {
    add() {
      this.msg += "!";
    },
  },
};
</script>

• after

<template>
  <h1 v-once @click="add">
    {{ msg }}
  </h1>
  <h1 v-html="msg"></h1>
</template>

<script>
export default {
  data() {
    return {
      msg: "<div style='color:#F00;'>Hello!</div>",
    };
  },
  methods: {
    add() {
      this.msg += "!";
    },
  },
};
</script>

03. v-bind

<template>
  <h1 v-bind:class="msg">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: "active",
    };
  },
  methods: {
    add() {
      this.msg += "!";
    },
  },
};
</script>

<style scoped>
.active {
  color: royalblue;
  font-size: 100px;
}
</style>

04. 동적 전달 인자

<template>
  <h1 :[attr]="msg">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: "active",
      attr: "class",
    };
  },
  methods: {
    add() {
      this.msg += "!";
    },
  },
};
</script>

<style scoped>
.active {
  color: royalblue;
  font-size: 100px;
}
</style>

<template>
  <h1 :[attr]="'active'" @[event]="add">
    {{ msg }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      msg: "active",
      attr: "class",
      event: "click",
    };
  },
  methods: {
    add() {
      this.msg += "!";
    },
  },
};
</script>

<style scoped>
.active {
  color: royalblue;
  font-size: 100px;
}
</style>