Vue.jsで簡単なtodoアプリを作ってみた

今回はjavascriptのフレームワークVue.jsを使って簡単な作成します。
なるべく簡単に実装するために、読み込みはCDN、cssとjsは埋め込み式で記述します。
まずは完成形をご覧ください→完成形
【ポイント】
➀checkboxにチェックをいれるとスタイリングが変わる
②削除可能
それでは実装していきましょう。
まずはいつものHTMLのテンプレートを用意します。
</body>直前でVueを読み込みます

 

Vueを読み込んだ後にscriptタグを記述します。
※ここから先はbodyタグの中のみ記述します
bodyタグの中と scriptタグの中にVueのテンプレートをそれぞれ記述します。

 

そして#appの中にテキスト入力欄とボタンを設置します。


スクリーンショット 2020-10-08 160519※出力結果

さて、これで準備完了です。まずはテキスト入力欄のデータをデータオプションで受け取ってみましょう。


これでinputタグ内にあるコンテンツとnewItemというデータが連動して動きます。

buttonの下に <pre>{{ $data }}</pre> を記述すると、連動して動いているのが可視化され確認することができます。

 

次は「ボタンがクリックされたら関数が呼び出され、アラートが起動する」というのを実装してみます。

 

次は

➀データオプションにtodoを用意

②addItem関数がよばれたら、todoの中にnewItemを代入

③pタグのなかにtodoデータを反映させる

というのを実装してみます


スクリーンショット 2020-10-08 163711※出力結果

テキストボックスに入力した文字がボタンを押してテキストとして反映されればOKです!ただこのままだと

➀todoリストが一つしか追加できない

②削除ができない

など課題が残るので次回に持ち越そうと思います!

Share on Facebook0Tweet about this on TwitterShare on Google+0Email this to someone