Vue.jsでTodoリストを作った
Vue.jsを勉強はじめた
近々、無限増大していくフォームを作らなきゃいけなくて
火事場感でjsのフレームワークを学び始めました
普段はLaravelで構築することが大半かつ
Laravel自身がVue.jsを推しているようなので
Vue.jsを勉強することにした
Vue.jsの優しさにふれる
なんのフレームワークをやるにしろ
公式ドキュメントを読むのが正当法で、かつ、
絶対神として崇め奉るほどに熟読必須
Vue.jsのドキュメントはなんと優しいことに
日本語がある！！！！
圧倒的感謝をしつつ
ドキュメントを一つずつ押さえていった
チュートリアルの定番:Todo
さて、ドキュメントもざっとよんだ
次は、慣れるためのTODOリスト作り
公式も用意している
でも公式はコンポーネントを分けずに処理をしているので
これは今後の実装を考えると現実的ではない
なのでコンポーネントを分け分けした実装を自分でやってみた
環境構築はvue-cliでさくっと。
公式には下記のように
上級者とか言われてちょっと怯んだけど
たくさんのQiitaを見て助けられた
コンポーネント構造
実際に作った構造は下記
- 親: App.vue
- 子: TodoList.vue, InputForm.vue
引っかかったPOINT
dataは関数を返す
data…あー変数ね！おｋおｋ！ってかんじで
定義したのは下記
data: {
todoList: [
{text: 'goma', done: false}
]
},
↑↑これでは上手く行きません！！！！
神ドキュメントをよく読みましょう
コンポーネントを定義しているとき、同じ定義を使用して作成された多くのインスタンスがあるため、data は初期データオブジェクトを返す関数として宣言しなければなりません。
https://jp.vuejs.org/v2/api/#data
今回はコンポーネントを定義しているので関数にしなきゃいけなかったそうな
覚えておこう
正しくは下記
data: function () {
return {
todoList: [
{text: 'goma', done: false}
]
}
},
親の関数を実行する
TODOリストはなので
TODOが入力されたらTODOListを変更してあげなきゃいけない
ここで考える方法は２つ
- 子の関数でゴニョゴニョ修正して値の自動更新に任せる
- 親に処理してもらう(値と一緒に渡して、子としてはEND)
どっちが良いんだろう。。。。
と悩んだりもしたけど、結局は公式TODOMVCを参考にして
親に処理してもらうという形態にした
具体的には
親から「子供に使っていいよ！」って関数を渡す
@(子供で使う時の関数名)="(親の関数名)"
<template>
<input-form @addTodo="addTodo"></input-form>
</template>
<script>
export default {
methods: {
addTodo: function (todo) {
this.todoList.push({
text: todo,
done: false
})
}
}
}
</script>
子供では親から渡された関数を使う。
渡された関数を使う時の記法は
this.$emit('(関数名)', (引数))
<script>
export default {
name: 'input-form',
data: function () {
return {
newTodo: ''
}
},
methods: {
addTodo: function () {
this.$emit('addTodo', this.newTodo)
this.newTodo = ''
}
}
}
</script>
こうすることで子の変更が親に通達され変更がなされる
便利!
だけど、このやり方なっとく行っていなくて
今回は簡単なTodoだからよかったものの
どんどん機能を増やしていったら
親のmethodが増えに増えまくる
つまり、夢を詰め込むとデブの親になるわけだ
なんかスクロールが終わらないコンポーネントになる。
ヤバそう、可読性さよなら事案待ったなしだ
こういう時どうするんだろう
このあたりの質問を今度参加する勉強会で解決していきたい
まとめ
Vue.jsに慣れるために簡単なTodoリストを作った
なんとなく使える未来が見えた気がする
無限増加フォーム頑張って作るぞーーーーー
