Vue의'서문'을 읽고 TODO 앱을 만들어 봤다.

개시하다

30분 전에 출력 얘기 들었어요.
그거부터 시작해서 제대로 Vue를 해보고 싶어요.
Vue를 하려면 꼭 봐야 할 서문 페이지
https://jp.vuejs.org/v2/guide/

생성물

나는 Todo 프로그램을 만들었다.(※ 보관 불가)
데모

코드

html

<div id="app">
  <ol>
    <li v-for="(todo, i) in todos">
     {{ todo.text }}
     <button @click="removeTodo(i)">
    削除
  </button>
    </li>
  </ol>
  <input v-model="todo" >
  <button @click="addTodo">
    Todoに追加
  </button>
</div>

javascript

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn Javascript' },
      { text: 'Learn Vue' },
      { text: 'Build something sweome'}
    ],

    todo: 'Hello Vue',
  },

  methods: {
    addTodo() {
      this.todos.push({ text: this.todo })
    },

    removeTodo(i) {
      this.todos.splice(i, 1) 
    }
  }
}) 

참고 자료

머리말--Vue.js
https://jp.vuejs.org/v2/guide/
Vue.js는 대처하기 어렵다 (배열편)
https://qiita.com/tmak_tsukamoto/items/e303328681f20a036530

이튿날

저번에 계속.
이번에는'최초'의'구성 요소 구성'에서 다시 시작합니다.

구성 요소 구성

Vue에는 부품이라는 조합이 있습니다.
지난번에 쓴 코드를 구성 요소에 적용할 때 다음과 같습니다.

html

<div id="app">
  <ol>
    <todo-item
        v-for="item in todos"
        v-bind:todo="item"
        v-bind:key="item.id"
      ></todo-item>
  </ol>
  <input v-model="todo" >
  <button @click="addTodo">
    Todoに追加
  </button>
</div>

javascript

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      {
        id: 1,
        text: 'Learn Javascript'
      },
      {
        id: 2,
        text: 'Learn Vue'
      },
      {
        id: 3,
        text: 'Build something sweome'
      }
    ],

    todo: 'Hello Vue',
  },

  methods: {
    addTodo() {
      this.todos.push({ text: this.todo })
    },

    removeTodo(i) {
      this.todos.splice(i, 1) 
    }
  }
})

다만, 구성 요소가 바뀌었지만, 삭제 단추가 잘 작동하지 않습니다.
그래서 오늘의 성과는 끝났다.