[Vue] v-bind, v-on 정리

[Vue] v-bind, v-on 정리

v-bind 약어

v-bind:href='url'을 줄여서 :href='url'이라고 표기 가능

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

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

html속성에 Vue내의 값을 사용할 수 있도록 도와주는 v-bind

<a href="{{ link }}">링크</a> // (x) 이렇게 사용할 수 없음

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <a v-bind:href="link">링크</a>
</div>
//이렇게 사용해야 함

v-on 약어

v-on:click='doSomething'을 줄여서 @click='doSomething'이라고 표기 가능

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

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

출처

• https://medium.com/@hozacho/맨땅에-vuejs-003-vuejs-directive-v-bind-a4844574e6ae