Vue.js(2.5.13)

ドットインストールのVue.js入門 を見ながらメモしたこと。ほとんどのことは https://jp.vuejs.org/v2/guide/ に載っている。

todoアプリ

ドットインストールの #2〜#13 で作成したもの

html

 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>My Vue App</title>
   <link rel="stylesheet" href="css/styles13.css">
 </head>
 <body>

   <div id="app" class="container">
     <h1>
       <button @click="purge">完了タスクの削除</button>
       My Todos
       <span class="info">({{ remaining.length }}/{{ todos.length }})</span>
     </h1>
     <ul>
       <li v-for="(todo, index) in todos">
         <input type="checkbox" v-model="todo.isDone">
         <span :class="{done: todo.isDone}">{{ todo.title }}</span>
         <span @click="deleteItem(index)" class="command">[x]</span>
       </li>
       <li v-show="!todos.length">TODOはありません</li>
     </ul>
     <form @submit.prevent="addItem">
       <input type="text" v-model="newItem">
       <input type="submit" value="Add">
     </form>
   </div>

   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   <script src="js/main13.js"></script>
 </body>
 </html>

js

(function() {
  'use strict';

  var vm = new Vue({
    el: '#app',
    data: {
      newItem: '',
      todos: []
    },
    watch: {
      todos: {
        handler: function() {
          localStorage.setItem('todos', JSON.stringify(this.todos));
        },
        deep: true
      }
    },
    mounted: function() {
      this.todos = JSON.parse(localStorage.getItem('todos')) || [];
    },
    methods: {
      addItem: function() {
        var item = {
          title: this.newItem,
          isDone: false
        };
        this.todos.push(item);
        this.newItem = '';
      },
      deleteItem: function(index) {
        // if (confirm('are you sure?')) {
          this.todos.splice(index, 1);
        // }
      },
      purge: function() {
        // if (!confirm('delete finished?')) {
        //   return;
        // }
        this.todos = this.remaining;
      }
    },
    computed: {
      remaining: function() {
        return this.todos.filter(function(todo) {
          return !todo.isDone;
        });
      }
    }
  });
})();

ディレクティブ

v-から始まる特殊な属性

ほか

算出プロパティ

画面遷移しないようにする

js側に preventDefault(); を書いてもいいが、
<form @submit="addItem"> を
<form @submit.prevent="addItem"> とするでもいい。

最終更新: 2018-10-02 (火) 19:40:15