Vue.jsだけでTODO機能を作ってみる

Javascriptだけで簡単なTodo機能は実装できるので備忘録

環境

node.js 13.10.1
vue/cli 4.4.4

完成品

タスクの追加、削除、チェックができる

必要なツールの導入

まずVue/Cliとnode.jsをPCにインストールする必要がある。
説明は割愛。

プロジェクトの作成

以下のコマンドを打つ

$vue create プロジェクト名

$cd プロジェクト名
$npm run serve

こんな画面が出たらOK

コンポーネント作成

・src/componentsディレクトリに任意のファイル作成
・views/Home.vueディレクトリに上記のファイルを読み込ませる

Home.vue

import HelloNuxt from '@/components/HelloNuxt.vue'

下準備OK

ファイル編集

大きくいじったのはこの二つ

components/HelloNuxt.vue

<template>
  <div>
    <form v-on:submit.prevent> 
      <h2>TODO LIST</h2>
      <input type="text" v-model="newItem">
      <button v-on:click="add">
        追加
      </button>
    </form>
    <ul>
      <li v-for="(todo, index) in todos">
        <input type="checkbox" v-model="todo.isDone">
        <span v-bind:class="{ done: todo.isDone }">{{ todo.item }}</span>
        <button v-on:click="deleteItem(index)">消去</button>
      </li>
    </ul>
    <p>{{ newItem }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: '',
      todos: []
    }
  },

  methods: {
    add: function(event) {
      if (this.newItem == '') return;
      const todo = {
        item: this.newItem,
        isDone: false
      };

      this.todos.push(todo);
      this.newItem = '';
    },

    deleteItem: function(index) {
      this.todos.splice(index, 1)
    }
  }
}
</script>

<style scoped>

</style>

views/Home.vue

<template>
  <div class="home">
    <HelloNuxt/>
    <!-- <HelloWorld/> -->
  </div>
</template>

<script>
// @ is an alias to /src
import HelloNuxt from '@/components/HelloNuxt.vue'
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloNuxt,
    HelloWorld
  }
}
</script>