目次
App.vueについて
Vueはvueファイルというファイルの中にvue・html・cssを記述することができます。このセットはコンポーネント化することで使いまわすことができます。そうすることで何回も同じコードを書く必要がなくなり、コードの可読性の向上と一部のコードの書き変えを忘れる事故を防ぐことができます。（認識が違っていたらすみません...）
Options APIとCompsition API
次にOptions APIとCompsition APIについて簡単に触れてみます。Compsition APIとはVue3から追加された書き方で、Vue2までで主に使用されていたOptions APIの欠点を改善できる仕組みになっているそうです。Vue2を扱ったことがないのでOptions APIの良し悪しはわからないのですが、Vue.jsについて調べると、Composition APIとOptions APIと記事が乱立しているので混乱します。今回はCompsition APIで記述していきます。v-modelについて
まずはTODOを入力するエリアを作ります。input要素を配置したあとに、v-modelでイベントの双方向バインディングをします。
今回はinput要素の中の文字列を取得します。
お試し用に入力したものをそのまま表示できるようにしてみました。
v-onについて
次に登録ボタンを押したとき、input内のテキストを取得し、表示するようにします。ここではv-onを使用し、イベントによって発火するようにします。
今回はv-on:clickでクリックした時に発火するようにします。
クリックするとクリックした回数を表示します。
v-forについて
v-forは繰り返しの処理を扱います。今回はボタンを押すたびにリストが新しく作られるようにします。ボタンを押すたびに入力した内容を配列に保存し、配列の中の何番目なのかを取得し要素を生成します。
buildとdistについて
App.vueの中に記載しただけでは実際にWEB上で動かすことはできません。今度はbuildといい、作ったアプリをhtml,css,jsに生成する必要があります。これをbuildと言います。
buildしたアプリはdistと呼ばれるフォルダの中に生成されます。
これでようやくweb上でアプリを操作できるようになりました。
TODOを入力し、リストに表示するという基本的な機能についてはこれで完成です。
まとめ
今回はvue.jsでTODOアプリの基礎部分を作成してみました。学習に時間がかかりますし、思うようにアプリを作るのもまた難しいです。まだまだ理解の及ばない部分が多いですが、少しづつ学んでいけたらと思います。次回はこの表示したTODOリストに、色々と機能を付け足していきたいと思います。
最後までお読みいただきありがとうございました。
また来月のLabでお会いしましょう。
それではまた。
