VUEJS) 컴포넌트 만들기 component

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;
}

 

실행화면