티스토리 뷰
반응형
Component
1. 기존의 방식
js
const vm = new Vue({
el: '#app',
data: {
todos: [
{
id: '1',
title: '아침 먹기',
done: true
},
{
id: '2',
title: '점심 먹기',
done: false
},
{
id: '3',
title: '저녁 먹기',
done: true
},
{
id: '4',
title: '간식 먹기',
done: false
},
{
id: '5',
title: '야식 먹기',
done: false
}
]
}
})
data객체 안에 todos라는 배열과 그 속성으로 id(고유 값), title, done을 정의
html
<div id="app">
<ul>
<li v-for="todo in todos"
v-bind:key="todo.id">
<input type="checkbox"
v-model="todo.done">
<span v-bind:class="{ done: todo.done }">
{{ todo.title }}
</sapn>
</li>
</ul>
</div>
li태그 내에 v-for반복문에는 항상 v-bind:key와 함께 사용되며 고윳값이 들어가야 한다.
input의 체크박스를 만들고 v-model로 양방향 바인딩을 설정한다. (js내의 todo.done의 값을 통해 바인딩)
span태그 내의 v-bind:class내에 객체를 만들고 done에 따라 바인딩 처리된다.
css
li span.done {
text-decoration: line-through;
}
위의 li안의 span태그의 done값에 따른 중간선을 출력하기 위한 css
2. 컴포넌트로 만들기
js
Vue.component('my-todo-item', {
props: ['todo'],
template: `<li>
<input type="checkbox"
v-model="todo.done">
<span v-bind:class="{ done: todo.done }"> {{ todo.title }} </sapn>
</li>`
})
new Vue({
el: '#app',
data: {
todos: [
{
id: '1',
title: '아침 먹기',
done: true
},
{
id: '2',
title: '점심 먹기',
done: false
},
{
id: '3',
title: '저녁 먹기',
done: false
},
{
id: '4',
title: '간식 먹기',
done: false
},
{
id: '5',
title: '야식 먹기',
done: false
}
],
todos2: [
{
id: '1',
title: '아침 잠자기',
done: true
},
{
id: '2',
title: '점심 잠자기',
done: false
},
{
id: '3',
title: '저녁 잠자기',
done: false
},
{
id: '4',
title: '간식 잠자기',
done: false
},
{
id: '5',
title: '야식 잠자기',
done: false
}
]
}
})
html
<div id="app">
<ul>
<my-todo-item v-for="todo in todos"
v-bind:key="todo.id"
v-bind:todo="todo"></my-todo-item>
</ul>
<ul>
<my-todo-item v-for="todo in todos2"
v-bind:key="todo.id"
v-bind:todo="todo"></my-todo-item>
</ul>
</div>
ul태그내에 my-todo-item컴포넌트를 사용한다. v-for문으로 todos의 내용을 todo로 받아와서 v-bind:key의 고윳값을 설정하고 v-bind:todo에 위에서 todo in todos의 todo를 바인딩한다.
두 번째 ul태그는 컴포넌트의 재사용성이 가능함을 보여주기 위해 만들어졌다.
css
li span.done {
text-decoration: line-through;
}
실행화면
반응형
'VUEJS' 카테고리의 다른 글
VUEJS) 텍스트 생략 (0) | 2021.07.20 |
---|---|
VUEJS) Vue인스턴스 (0) | 2021.07.20 |
VUEJS) v-bind:class, v-on:click, v-model 응용 (0) | 2021.07.13 |
VUEJS) v-model (0) | 2021.07.13 |
VUEJS) v-on:click (0) | 2021.07.13 |
댓글
공지사항