Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
JavaScriptのフレームワークVue.jsを使ってみる - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

JavaScriptのフレームワークVue.jsを使ってみる

このページではソースコードの一部分を簡単な解説をしています。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。

スポンサーリンク

概要

Vue.jsを使う練習の為に作成したアプリです。各項目の数値を入力するとごはん一食当たりの値段とお茶碗何杯分かを表示します。cssはフレームワークのBulamaを使用しています。背景画像は無料の高画質フリー写真素材を提供しているimageslaboの画像を使用しています。

Vue.jsをCDNで導入する

Vue.jsを利用するにはnpmコマンドでインストールするかVue CLIでプロジェクトを作成するかCDNでライブラリをブラウザで直接読み込ませるなどの方法があります。今回は手軽にVue.jsを始められるCDNを読み込んでVue.jsを使えるようにしました。jsDelivrにCDNファイルが置いてあるのでその中から好きなバージョンを選択し、vue.global.jsかvue.global.prod.jsをインポートします。どちらも機能は同じなのですがvue.global.prod.jsはコードが圧縮されていてファイルサイズがちいさくなっています。

dataプロパティオプションを定義する

dataプロパティオプションにごはん一食当たりの値段とお茶碗何杯分かを計算するために必要なデータを定義します。

ごはん一食当たりの値段とお茶碗何杯分かを計算する

計算方法は購入したお米の重さを炊きあがり後の重さにして(炊きあがり後2.2倍で計算しています)、お茶碗一杯分の重量で割ることによって何杯分かを出しています。一食当たりの値段は購入金額を先ほど出した答えで割って出しています。
上記の計算を算出プロパティ(computed)で定義する。

算出プロパティ(computed)でメソッドを定義するとthis.~の値が変更されるたびにメソッドが実行されます。

v-modelディレクティブを利用する

v-modelディレクティブを利用するとフォームで入力された値とdataオプションのプロパティを連動させることが出来ます(双方向データバインディング)。今回作成したアプリもv-modelを利用してフォームの数値が変更されると計算結果も即時反映されます。

v-modelにはさまざまな修飾子が用意されていて、今回はnumber修飾子利用して入力された値を数値としてdataオプションのプロパティにバインドしています。

最後までお読みいただきありがとうございました。
作成したプログラムのコードはgithubにあります。
その他、作成したアプリやゲームの一覧はこちらにあります。

モバイルバージョンを終了