今回はVue.jsでTodoアプリを作ってみます
早速やっていきましょう～！
なお超基礎的な知識として下記の記事に書いてることを前提でお話します！
https://qiita.com/takepon_it/items/f89e0e3023a3070dbce6
1.画面を作ろう
今回はTodoリストの機能を作りたいだけなので見た目は簡素な物でいきます！
https://unpkg.com/vue
を読み込むのを忘れないでください！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Todoアプリ</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div class="container">
<h1>Todoアプリ</h1>
</div>
<div id="app">
<div>
<input type="text" placeholder="テキスト入力してね">
<button type="button">追加</button>
<ul>
</ul>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
こんな感じですね！
2.コンポーネントを作ろう！
早速タスクを追加する機能を追加していきましょう！
まずコンポーネントを定義していきます
コンポーネントはVue.componentを使うことで定義することできます！
ToDo の要素を todo-item というコンポーネントとして定義してみましょう！
それと合わせて既にここでタスクを追加した際のhtmlも作っておきましょう！
テンプレートをtemplateオプションに渡せばできます！
Vue.component('todo-item', {
props: {
todo: {
type: Object,
required: true
}
},
//htmlの挿入
template: '<div>' +
'<input type="checkbox" v-model="todo.completed">' +
'<span>{{todo.text}}</span>' +
'</div>'
});
取り合えずこれでtodo-itemというコンポーネントを作れました！
3.タスクを保持するデータを作ろう！
次にテキストボックスの値をinputという名前で保存しよう！
では今からdataにinputを入れていくよ～
var vm = new Vue({
el: '#app',
data: {
input: '',
//タスクを管理する配列
todos: []
},
タスクを管理する配列として todos:[] も作っとこう！
4.テキストとデータをくっつけよう！
早速テキストボックスとinputをv-modelを使ってくっつけよう！
v-modelはinput要素にv-modelという属性をつけることで、データとinput要素の入力値をくっつけることができます！
追加ボタンの上のテキストボックスの所を
<input type="text" v-model="input" placeholder="テキスト入力してね">
にしてみましょう！ 早速次にいきましょう！
5.タスクを追加するインスタンスメソッドを作ろう！
本題のTodoを追加するための機能を作っていきましょう！
addTodoというメソッドを作ろう！
インスタンスメソッドを作るにはmethodsオプションを使用したらできるよ
methods: {
//Todo追加関数
addTodo: function () {
this.todos.push(
{
completed: false,
text: this.input
})
this.input = ''
}
}
これを追加してください！
配列へのpushやそういったものは割愛させて頂きます
6.タスクを追加する処理を書いていこう！
そしたらボタンをクリックしたらタスクを追加できるようにしたいので
ボタンとメソッドを紐づける必要があります！
これをするには
v-on:click
これを使って、ボタンが押されるのを監視し、ボタンが押された時に先ほどのaddTodoメソッドを実行できるようにしよう！
<button type="button" v-on:click="addTodo">追加</button>
こうですね！
7.タスクを削除する機能を作ろう！
タスクを追加したら、それを遂行した時の為に当然削除っていう機能も欲しいですよね？
こちらを今から実装していきたいと思います！
冒頭で作成したtempleteオプションに続けて記述したいと思います
//htmlの挿入
template: '<div>' +
'<input type="checkbox" v-model="todo.completed">' +
'<span>{{todo.text}}</span>' +
'<button type="button" v-on:click="onclickRemove">削除</button>' +
'</div>',
最終的にはこうですね！
しかしこれだけではなv-onオプションを使っている所を見て頂きたいのですが
onclickRemoveとあります
実際に削除ボタンを押されたときの処理をまだ書いていないので今から書いていきましょう。
methods: {
onclickRemove: function () {
this.$emit('remove')
}
}
こちらを始めのインスタンスメソッドに追記します
$emitでカスタムイベントのremoveを発動します！
そして最後に
<li v-for="(todo, index) in todos">
<todo-item v-bind:todo="todo" v-on:remove="todos.splice(index,1)"></todo-item>
</li>
ul要素の中に上記を追記してください
v-forで要素を繰り返し表示します、この場合はtodos配列の中に格納されているタスクを表示させる為ですね
v-bindでデータを属性の値に紐付けします。
以上をもってTodoアプリの完成です！！！！！！
8.最後に
プログラミング初心者の割には頑張れた気がします
この調子でQiitaとか使ってアウトプットしていきたいな・・・