Component
코드 재사용을 위해 각 단위를 독립적으로 구성하는 것
생성 방법
Vue.component('컴포넌트명', 내용)
Vue.component('todo-item', {
template: '<li>오늘의 할 일</li>'
});
<ul>
<todo-item></todo-item>
</ul>
☆ Code
<!doctype html>
<html>
<head>
<title>Component</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<h1>Vue.js Components</h1>
<hr>
<div id="comp">
<ul>
<todo-item
v-for="cook in cookList"
v-bind:todo="cook">
</todo-item>
</ul>
</div>
</body>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>오늘의 할 일({{ todo.id }}) : {{ todo.food }}</li>'
});
var app7 = new Vue({
el: '#comp',
data: {
cookList: [
{ id: 0, food: 'Ramen' },
{ id: 1, food: 'IceCream' },
{ id: 2, food: 'SandWitch' },
{ id: 3, food: 'Budae' },
{ id: 4, food: 'Wine' }
]
}
})
</script>
</html>'Vue' 카테고리의 다른 글
| Vue.js form (0) | 2025.01.14 |
|---|---|
| Vue.js class (0) | 2025.01.13 |
| Vue.js methods, computed, watch (0) | 2025.01.12 |
| Vue.js Model (0) | 2025.01.10 |
| Vue.js 기초문법 (0) | 2025.01.08 |