a 태그의 href 속성 값에Vue 내에 선언된 값을 넣고 싶은 경우(Vue v-on:click, v-bind:href, router-link :to)

지금까지 우리는 {{ mustached }} 기호를 통해서 Vue 내의 값 혹은 함수를 불러왔습니다.

하지만 화면에 문자열을 출력해야하는 간단한 경우가 아니라

HTML 속성 내에서 Vue에 선언된 값을 사용하고 싶어진다면 어떻게 해야할까요?

예로 링크를 달 수 있는 a 태그의 href 속성 값에

Vue 내에 선언된 값을 넣고 싶은 경우가 있을 수 있습니다.

​

<a href="{{ link }}">링크</a>

사용할 수 없음

 

HTML의 속성에는 {{ mustached }}를 사용할 수 없습니다.

위처럼 사용하고 싶으면 v-bind 디렉티브를 사용 해야 됩니다.​

​

​

​

디렉티브 Directive?

​

디렉티브란, 이처럼 HTML 태그 안에 들어가는 속성의 역할을 하며, v-​라는 접두사가 붙는 것이 특징입니다.

​

​

Example

<a :href="news.url">{{ news.title }}</a>
<a v-bind:href="news.url">{{ news.title }}</a>

 <router-link :to="`/item/${news.id}`">{{ news.title }}</router-link>
 <router-link v-bind:to="`/item/${news.id}`">{{ news.title }}</router-link>

<a v-on:click="doSomething"> ... </a>
<a @click="doSomething"> ... </a>

const news = {
  id: 1,
  title: '코로나좀 끝나라 슈뻘',
  content: '집에좀 가고싶다. 김치찌개 먹고싶다고'
  url: 'http://localhost:3000',
}