[Vue.js] v-bind, v-on

# v-bind 개념

• v-bind는 지정된 해당 태그의 속성값을 지정하는 데 사용되는 디렉티브다.
• v-bind 지우고 : 로 축약 가능, v-bind:href=“url”을 줄여서 :href=”url” 이라고 표기해줄 수 있다.

# v-on 개념

• v-bind와 마찬가지로 지정된 해당 태그의 속성값을 지정하는 데 사용되는 디렉티브다.
• @는 v-on:의 축약표현, v-on:click=“doSomething”을 줄여서 @click=”doSomething” 이라고 표기해줄 수 있다.

 

# 개념예시 

속성에 바인딩, title, src, style, class 적용

https://codepen.io/cjy324/pen/gOwvxZj?editors=1010

https://codepen.io/cjy324/pen/xxEYLeq

https://codepen.io/cjy324/pen/YzGexMe

https://codepen.io/cjy324/pen/GRjQvLB

https://codepen.io/cjy324/pen/PoGQKvy

https://codepen.io/cjy324/pen/PoGQKvy?editors=1010

https://codepen.io/cjy324/pen/OJRQxPd?editors=1010

 

## 예제

https://codepen.io/cjy324/pen/wvzyqNR?editors=1010