最近Vue.jsの学習を少しずつ行なっています。学習方法としては、Udemyにて下記講座を受講してます。

講座について

こちらの講座はVue.jsを初めて利用する方向けですので、とても簡単でシンプルな講座です。
すでにVue.jsをある程度知っている方には物足りないと思いますが、Vue.jsって聞いたことあるけど使ったことはない、という方には良い講座かと。
また、学習にはjsfiddleというWebサービスを使用するので、環境構築で躓くことがないのが良いです。

Vueで作成したアプリ

それでは実際にVueで作成したアプリを紹介します。
（全てGithub pagesにて公開してます）

1. TODOリスト

【デモ画面】

【概要】
一般的なtodoリストを作成しました。
テキストフィールドを用意し、登録した項目をリストで表示する様になってます。チェックを入れることで打ち消し線が表示され、「delete」クリックでリストから削除されます。

【やったこと】
フィールドに入力された値を配列で格納し、リストはv-forでループさせて表示しています。
チェックボックスにチェックを入れるたびにリストの真偽値をtrue/false切り替えを行い、値によりclassを付与してcssにて打ち消し線をつけてます。
deleteボタンをクリックした時に、splice()メソッドにて該当のタスクを削除する様にしています。

2. bitcoinの価格表示をリアルタイム取得

【デモ画面】

【概要】
APIからデータを取得し、Bitcoinのリアル隊の価格を取得し、画面に表示させる。
APIはこちらを利用しました。通貨はUSドル、ポンド、ユーロで取得してます。

【やったこと】
axiosを使用してAPIからデータを取得。
catchを使用して通信に失敗した時の処理も記述。
v-cloakを使用して、読み込み時の一瞬のチラツキを防止。

3. Qiitaの記事リアルタイムサーチ

【デモ画面】

【概要】
テキストフィールドにキーワードを記入すると、Qiitaの記事一覧を取得する。

【やったこと】
debouncedGetAnswerを利用してフォームを監視。（APIリクエストの負荷を減らすため。）
Qiita APIの利用。
v-forにて取得した値をループさせリスト表示させる。

以上です。

ということでUdemyの講座を受けてVue.jsでできたアプリでした。正直Vue.jsを理解するのにはまだまだ時間かかりそうですが、今後もしばらくはVue.jsをやっていきたいと思います。