はじめに
こんにちは！ 松本 佑大（まつもと ゆうだい）と申します！
今回はTODO管理リストの作成についてアウトプットしていきます！
Vueインスタンスとテンプレートの準備
HTML
<div id="app">
<h2>TODOリスト</h2>
<form>
<input type="text">
<button>Add</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
Vur.js
var app = new Vue({
el:'#app'
})
まず最初に型となる部分を作成します。
inputを双方向データバインディング、buttonの処理
次にinputを双方向データバインディング、buttonをクリックすると処理が働く部分を記述します。
HTML
<div id="app">
<h2>TODOリスト</h2>
<form v-on:submit.prevent>
<input type="text" v-model="newItem">
<button v-on:click="addItem">
Add
</button>
</form>
<pre>{{ $data }}</pre>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
Vur.js
var app = new Vue({
el:'#app',
data:{
newItem: ''
}
methods:{
addItem: function(event){
}
})
inputに入力された文字を双方向データバインディングするためにv-model="newItem"(任意)を記述。
Vue.jsと紐付けるためにdataオプションを作成し、中にnewItem:''を作成する。（``の中にテキストと同じ文字が入る）
また、任意だが <pre>{{ $data }}</pre> を記述しておくと画面にdataの部分が出力されるので、正常に処理が動いているか確認がとりやすくなる。
次にbuttonをクリックしたときに処理が発生する仕組みを作る。
テキスト側
v-on:click="addItem"ボタンをクリックしたらaddItemが発生。
Vue.js側
methods:{
addItem: function(event){
}
methodsメソッドを作成し、addItemイベントを記述。（今は空）
このとき、クリックをすると上記のようにエラーが発生するため、formタグにv-on:submit.prevent
を記述し、エラーを防ぐ。
タスクの追加
変更点はVue.jsのみになります。
Vur.js
var app = new Vue({
var app = new Vue({
el: '#app',
data: {
newItem: '',
todos: []
},
methods: {
addItem: function(event) {
if(this.newItem == '') return ;
//⏫もしnewItemが空だったら処理を止める。
//未入力の場合処理を行わないということ
var todo = {
item: this.newItem
};
this.todos.push(todo);
//⏫配列todosにtodoを追加する。
//todoの中身はnewItemだから結果newItemと同じ文字が記述される。
this.newItem = '';
//⏫todoがpushされたとき、newItem（テキストボックス）は空になる。
}
}
})
リスト表示、タスクの完了/未完了の管理
HTML
<ul>
<li v-for="todo in todos">
<input type="checkbox" v-model="todo.isDone">
<!--⏫チェックボックスの表示--> <!--⏫todo.isDoneと双方向バインディング-->
<span>{{ todo.item }}</span>
</li>
</ul>
Vue.js
var app = new Vue({
el: '#app',
data: {
newItem: '',
todos: []
},
methods: {
addItem: function(event) {
if(this.newItem == '') return ;
var todo = {
item: this.newItem,
isDone:true
//tureならチェックボックスにチェックが入る
//falseならチェックボックスにチェックが入らない
};
this.todos.push(todo);
this.newItem = '';
}
}
})
最後に
今回はTODO管理アプリ制作に挑戦しました！
今回の記事を読んで気になったこと、間違い等あればコメント等頂けると幸いです。
今後ともQiitaにてアウトプットしていきます！
最後までご愛読ありがとうございました！