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

STEP1

下準備

STEP2

TodoMVC — Vue.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

<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

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

...?

STEP8

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

STEP9

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

STEP10

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

STEP11

STEP12

STEP13