[Vue.js] 템플릿 약어

이번 포스팅에서는 간단하게 v-bind와 v-on의 약어를 소개하겠습니다.

 

v-bind

v-bind는 데이터를 바인딩시킬 때 사용합니다.

<template>
  <h1 v-bind:style="{ color: fontColor }">Hello Vue.js!!</h1>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      fontColor: 'red',
    };
  },
};
</script>

<style></style>

위와 같이 fontColor의 데이터를 바인딩할 때 사용합니다. 하지만 매번 v-bind를 작성하면 개발 속도가 늦춰질 수 있기 때문에 다음과 같은 약어를 제공합니다.

<template>
  <h1 :style="{ color: fontColor }">Hello Vue.js!!</h1>
</template>

// 생략

속성 앞에 콜론(:)만 붙여주면 사용가능합니다. v-bind는 다양한 곳에 사용할 수 있습니다. class, href 등등

 

v-on

v-on은 메소드내에 이벤트를 바인딩 시길 때 사용합니다.

<template>
  <h1 v-bind:style="{ color: fontColor }" v-on:click="add">{{ msg }}</h1>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      fontColor: 'red',
      msg: 'Hello Vue.js!!',
    };
  },
  methods: {
    add() {
      this.msg += '!!!!!!';
    },
  },
};
</script>

<style></style>

이번에는 add라는 메서드를 바인딩했습니다. 이도 위와 같이 약어를 사용해 보겠습니다.

<template>
  <h1 :style="{ color: fontColor }" @click="add">{{ msg }}</h1>
</template>

// 생략

속성 앞에 골뱅이(@)만 붙여주시면 사용 가능합니다.