[Vue.js] 기초다지기

    Attribute Binding

앞에 v-bind가 생략된 거임

<img :src="image">

 

    조건 렌더링 Conditional Rendering

v-if, v-else-if, v-else

 

    리스트 렌더링 List Rendering

v-for

 

    이벤트 핸들링 Event Handling

v-on:click -> @click

 

    Update Image when variant color is hovered on

 

 

    Class & Style Binding

기본적으로 {  } 안은 자바스크립트이기 때문에 kebab-case로 쓰면 '마이너스'로 인식한다.

<div :style="{'background-color': variant.color }"></div>
<div :style="{backgroundColor: variant.color }"></div>

 

inStock이 false일 때 disabled

 

 

 

    Computed Properties

<div> {{ brand + product }} </div> ㅇㅈㄹ 하지말고 

<div> {{ title }} </div> 로 해결하세요