Vue.js 컴포넌트

1 개요

Vue.js 컴포넌트

<div id="app-7">
  <ol>
    <!-- 이제 각 todo-item 에 todo 객체를 제공한다. -->
    <!-- 화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있다. -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

<script src="//unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: '채소' },
      { text: '치즈' },
      { text: '사람이 먹을 수 있는 다른 무언가' }
    ]
  }
})
</script>

2 같이 보기

• Vue.js 시작하기

3 참고

• https://vuejs.org/v2/guide/