아래와 같은 카드를 만든다고 생각해보자
코드는 아래와 같다.
<body>
<div id="root">
<div
class="card"
:style="{
display: 'inline-block',
width: '200px',
border: '2px solid #000',
margin: '10px'
}"
>
<div class="card__image">
<img src="https://picsum.photos/id/23/200/300" />
</div>
<div class="card__info" :style="{background: 'gray'}">
<div class="info__title">Lorem Ipsum</div>
<p
class="info__body"
:style="{
margin: 0,
background: '#000',
fontSize: '0.9rem',
color: '#fff'
}"
>
s simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div
class="card"
:style="{
display: 'inline-block',
width: '200px',
border: '2px solid #000',
margin: '10px'
}"
>
<div class="card__image">
<img src="https://picsum.photos/id/12/200/300" />
</div>
<div class="card__info" :style="{background: 'gray'}">
<div class="info__title">Lorem Ipsum</div>
<p
class="info__body"
:style="{
margin: 0,
background: '#000',
fontSize: '0.9rem',
color: '#fff'
}"
>
s simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
<div
class="card"
:style="{
display: 'inline-block',
width: '200px',
border: '2px solid #000',
margin: '10px'
}"
>
<div class="card__image">
<img src="https://picsum.photos/id/55/200/300" />
</div>
<div class="card__info" :style="{background: 'gray'}">
<div class="info__title">Lorem Ipsum</div>
<p
class="info__body"
:style="{
margin: 0,
background: '#000',
fontSize: '0.9rem',
color: '#fff'
}"
>
s simply dummy text of the printing and typesetting
industry.
</p>
</div>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const app = new Vue({
el: '#root',
data() {
return {}
}
})
</script>
</body>card 가 중복으로 사용되고 있음을 확인 할 수 있다. 이 때 vue의 강력한 기능 중 하나인 컴포넌트 를 제공해준다.
component를 생성할 땐 Vue.component(tagName, options) 를 이용한다.
options에는 props와 template 같은 속성들이 있다.
props에는 부모로 부터 전달받은 데이터를 명시해주고, template은 컴포넌트를 구성하는 tag 들을 넣어주면 된다.
변경된 코드는 아래와 같다.
<body>
<div id="root">
<card
title="title"
body="body"
image="https://picsum.photos/id/5/200/300"
></card>
<card
title="title"
body="body"
image="https://picsum.photos/id/1/200/300"
></card>
<card
title="title"
body="body"
image="https://picsum.photos/id/4/200/300"
></card>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.component('card', {
props: ['image', 'title', 'body'],
template: `
<div
class="card"
:style="{
display: 'inline-block',
width: '200px',
border: '2px solid #000',
margin: '10px'
}"
>
<div class="card__image">
<img :src="image" />
</div>
<div class="card__info" :style="{background: 'gray'}">
<div class="info__title">{{ title }}</div>
<p
class="info__body"
:style="{
margin: 0,
background: '#000',
fontSize: '0.9rem',
color: '#fff'
}"
>
{{ body }}
</p>
</div>
</div>
`
})
const app = new Vue({
el: '#root',
data() {
return {}
}
})
</script>
</body>'Vue > Tutorial' 카테고리의 다른 글
| [Vue - tutorial] 배열 변경 감지 (0) | 2019.09.04 |
|---|---|
| [Vue - tutorial] event handling (0) | 2019.09.04 |
| [Vue - tutorial] attribute binding (0) | 2019.09.03 |
| [Vue - tutorial] 리스트 출력하기 (0) | 2019.09.03 |
| [Vue - tutorial] Vue devtools (0) | 2019.09.03 |
