Vue.js로 TO DO 앱 만들기

소개

Vue.js의 기본 사용법 요약의 연속입니다.

튜토리얼의 철판인 TO DO 앱을 작성해 갑니다.

템플릿 준비

병아리가 될 HTML과 JS를 만듭니다.
todo 디렉토리를 만들고 그 안에 index.html 및 index.js를 만듭니다.

todo/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>TO DOアプリ</title>
    </head>
    <body>
        <div id="app">
          <!-- ここにVueインスタンスを展開する -->
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
        <script src="./index.js"></script>
    </body>
</html>

그런 다음 Vue 인스턴스를 만듭니다.

todo/index.js

var app = new Vue({
  el: '#app'
})

입력 양식 및 메소드 추가

form 요소에 입력 양식과 버튼을 추가합니다.

<div id="app">
    <h2>TODO List</h2>
    <form>
        <input type="text">
        <button>
          追加
        </button>
    </form>
</div>

그런 다음 button 요소에 v-on:click를 설정합니다.

button을 클릭하면 addItem 메서드를 호출합니다.

<button v-on:click="addItem">

Vue 인스턴스에 addItem 메소드를 기술한다.

일단 정상적으로 움직이고 있는지 확인하기 위해 경고를 표시해 봅니다.

var app = new Vue({
  el: '#app',
  // メソッド定義
  methods: {
    addItem: function(event) {
      alert()
    }
  }
})

다음에 button를 클릭했을 때 submit 이벤트가 발동해, 페이지가 리로드 되는 것을 막는 처리를 form에 기술한다.
prevent는 기본 동작을 중지합니다.

<form v-on:submit.prevent>

TO DO 목록에 작업 등록

input 요소에 v-model 를 기술해 양방향 데이터 바인딩 할 수 있도록(듯이) 한다.

이제 입력에 입력한 값이 data 옵션으로 정의하는 속성과 동기화됩니다.

<!-- v-modelを定義 -->
<input type="text" v-model="newItem">

data 옵션에 newItem 및 입력한 값(todo 태스크)을 저장하는 배열todo을 정의합니다.

var app = new Vue({
  el: '#app',
  data: {
    newItem: '', // 入力フォームと双方向データバインディング
    todos: [] // 入力したtodoを保存する配列
  },
  methods: {
    addItem: function(event) {
      alert()
    }
  }
})

또한 입력 양식에 입력한 값을 배열에 저장할 수 있도록 addItem 메서드를 다시 씁니다.

속성은 this.プロパティ名에서 액세스할 수 있습니다.

이 this는 Vue 인스턴스를 가리킨다.

var app = new Vue({
  el: '#app',
  data: {
    newItem: '',
    todos: []
  },
  methods: {
    addItem: function(event) {
      var todo = {
        item: this.newItem // todoオブジェクトに入力した値を保存
      }
      this.todos.push(todo) // todoを配列に追加
    }
  }
})

TO DO 목록 개선

button 를 클릭해 태스크를 추가한 후에, input에 캐릭터 라인이 남아 버리기 때문에, 캐릭터 라인을 클리어로 하는 기술을 한다.

또한, 빈 문자열을 보존하는 것을 방지하는 처리를 설명한다.

methods: {
    addItem: function(event) {
      // 追加
      if (this.newItem === '') return // 空の文字列の場合はここで処理を終える
      var todo = {
        item: this.newItem
      }
      this.todos.push(todo)
      // 追加
      this.newItem = '' // 入力フォームの文字列をクリア
    }

TO DO 목록 표시

HTML 측에서 리스트 표시시키는 기술을 한다.
v-for 지시문을 사용하여 반복합니다.

<div id="app">
    <h2>TODO List</h2>
    <form v-on:submit.prevent>
        <input type="text" v-model="newItem">
        <button v-on:click="addItem">
          追加
        </button>
    </form>
    <!-- 追記 -->
    <ul>
        <li v-for="todo in todos">
            {{ todo.item }}
        </li>
    </ul>
    <!-- 追記 -->
</div>

작업 완료 및 완료되지 않은 구현

작업 완료 및 미완료를 관리하는 확인란을 설정합니다.
addItme 메서드 변수 todo를 편집합니다.

확인되었는지 여부를 확인하는 isDone를 추가하고 초기 값을 false로 설정합니다.

var todo = {
  item: this.newItem,
  isDone: false // 追加
  }

그런 다음 HTMl에 확인란을 추가하고 v-model 지시문에 todo.isDone를 양방향 데이터 바인딩합니다.

이제 확인되면 isDone가 true가됩니다.

<ul>
    <li v-for="todo in todos">
        <input type="checkbox" v-model="todo.isDone">
        <span>{{ todo.item }}</span>
    </li>
</ul>

작업 삭제 구현

등록한 태스크를 개별적으로 삭제하기 위해서, 배열의 index 를 취득한다.
v-for="(値, index) in 配列"로 배열의 index를 취할 수 있다.

그런 다음 삭제 버튼을 추가하고 작업을 삭제하는 메서드deleteItem를 정의합니다.
deleteItem 메소드의 인수에는 배열의 index를 갖게 한다.

<ul>
    <li v-for="(todo, index) in todos"> <!-- indexの取得 -->
        <input type="checkbox" v-model="todo.isDone">
        <span>{{ todo.item }}</span>
        <!-- 追加 -->
        <button v-on:click="deleteItem(index)">Delete</button> 
    </li>
</ul>

이어서 deleteItem 메소드를 정의한다.

배열로부터 요소를 삭제하는 JavaScript의 splice 메소드를 사용해, 등록된 태스크를 삭제한다.

methods: {
    addItem: function(event) {
    // 〜省略〜
    },
    //追加
    deleteItem(index) {
      this.todos.splice(index, 1) // sprice(削除を始めるindex, 削除する長さ)
    }
  }