Udemyの講座でVue.jsを学習し出来るようになったこと
最近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をやっていきたいと思います。
読んでいただきありがとうございます。