【Vue.js】さっくりTODOアプリを作る

【Vue.js】さっくりTODOアプリを作る

はじめに

コジマです。

一週間以上投稿してませんでした。

何してたかというと、
Vue.jsを次の職場でやるかもーな話だったのでちょっとかじっていました。

学習の一環として登竜門?的なTODOアプリをさっくり作りました。。

参考書籍

この本を参考にして作りました。
基礎から学ぶ Vue.jsを参考にしました。

仕様

こんな仕様で作っていきます。

  • タスクを追加するための入力フォームを作成する
  • 「登録」ボタンをクリックするとタスクが登録される
  • タスクが存在しないときはメッセージを表示
  • タスクのデータはID(id),タスク名(task)、進捗度(progress)を持つ
  • 「+」ボタンをクリックすると進捗が10%プラスされる
  • 「-」ボタンをクリックすると進捗が10%マイナスされる
  • 「完了」ボタンをクリックすると取り消し線で消す
  • 「削除」ボタンをクリックするとリストから削除する
  • 進捗100%は完了とみなす

とてもとてもシンプルです。
見た目もあまりこだわりません。

Vue.jsの機能を用いることに重点を置いています。

ソースコード

HTML

JavaSctipt

CSS

動作デモ

さいごに

意外とさっくり作れました。
実務で触れたらもっともっと奥深いものがあるんだろうな。
これからも頑張りますー!

ソースコード乗っけただけなので、あくまでも自分の作業報告という感じです。
細かいところの解説行き時なんかは別で積み上げていきたいですね。

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです!

以上、コジマでした。


Vue.js/Nuxt.jsカテゴリの最新記事