# 基礎から学ぶVue.js 読書メモ

## STEP1

下準備

## STEP2

[TodoMVC — Vue.js](https://jp.vuejs.org/v2/examples/todomvc.html)を一部改変。

```js
const STORAGE_KEY = 'todos-vuejs-demo'
const todoStorage = {
  fetch: () => {
    const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
    todos.forEach((todo, index) => {
      todo.id = index
    })
    todoStorage.uid = todos.length
    return todos
  },
  save: todos => localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
}
```

- ローカルストレージ: ブラウザ上のDBみたいなもの
- Storage API: JSからローカルストレージにアクセスするために、ブラウザ側に与えられたAPI
- fetch
  1. `localStorage.getItem` でデータを取得
  2. `STORAGE_KEY`: どの値を取ればいいか
  3. `||` の後ろは結果がnullとか配列の形じゃなかったときのための保険的なやつ
  4. `todoStorage.uid = todos.length`: 配列の長さ
- save
  1. ローカルストレージに`STORAGE_KEY`と`todo`の中身をstringifyしたものを格納する

## STEP3

はい

## STEP4

HTMLつくる

## STEP5

```html
<tr v-for="item in todos"  :key="item.id">
<tr v-for="Temporary name in terget object" :key="item.id">
```

`v-for="各要素の一時的な名前 in 繰り返したい配列やオブジェクト"`、`:`は`v-bind`の省略形。

## STEP6

新規登録用フォームの箱作る。`@`は`v-on`

## STEP7

```js
const app = new Vue({
    el:'#app',
    data: {...},
    methods: {
      doAdd: function(event, value) {
        const comment = this.$refs.comment
        if (!comment.value.length) {return}
      // {{ new ID, Comment, State }}
      this.todos.push({
        id: todoStorage.uid++,
        comment: comment.value,
        state: 0
      })
      //init
      comment.value = ''
    }
  }
})
```

[![Image from Gyazo](https://i.gyazo.com/5f48c25bc4a28ddf7f87c0d457d1c214.png)](https://gyazo.com/5f48c25bc4a28ddf7f87c0d457d1c214)

...?

## STEP8

ローカルストレージに保存するために`watch`を使う。Arrow関数たのしー!

## STEP9

インスタンス作成時に自動更新

## STEP10

状態変更ボタンと削除ボタンの実装。`doRemove`メソッドをArrow関数で書けないの悔しい

## STEP11

## STEP12

## STEP13