ProgText – プログラミング学習のWeb教材

このサイトは、プログラミングの基本的なことから、Webアプリ開発の学習や制作の手助けになるような情報を紹介しています。

Vue.js (Options API)

Vue.js (Options API)

Vue.jsは、UIを構築するためのフレームワークの1つです。表示する内容を簡単に、動的に変更でき、データや機能の管理に優れています。

Vue.jsにはOptions APIとComposition APIとComposition APIの2種類ありますが、ここではOptions APIの方を見ていきます。

vuejs サムネ
vueを導入する
vueを導入する
Vue.jsとは、UIを構築するためのフレームワークの1つです。表示する内容をかんたんに、動的に変更でき、データや機能の管理に優れています。 こ…
まずは最小構成でvueを動かそう
まずは最小構成でvueを動かそう
まずはほぼ最小構成でvueを動かしてみましょう! 準備 Vueはjsファイルに書いていきます。もちろん、読み込んだり表示するためのhtmlも必要…
【vue】 dataの値をHTMLで表示する
【vue】 dataの値をHTMLで表示する
vueでは、表示するデータは主に`data`メソッドの戻り値に組み込みます。ここに入れた値は、vue内で参照したり、HTMLに簡単に表示すること…
【vue】 メソッドの書き方と呼び出す方法
【vue】 メソッドの書き方と呼び出す方法
vueにはメソッド(関数)を設定できます。設定したメソッドは、vueのスクリプトからだけでなく、HTML側にクリック時の挙動などでも呼び出す設定…
【vue】 キー入力やマウスクリックなどのイベント処理のしかた
【vue】 キー入力やマウスクリックなどのイベント処理のしかた
Vueでは、クリックやキー入力など、様々なイベントを受け取れます。ブラウザ上で動かす普通のJavascriptと似たようなイベントを処理できます…
【vue】 v-bindでvueの値をHTMLとやり取りする方法
【vue】 v-bindでvueの値をHTMLとやり取りする方法
vueでは、vueの値をHTMLの属性に設定したり、入力フォームに入れた値をvueの値に反映させるには`v-bind`や`v-model`を用い…
vueでclassとstyleを制御するには
vueでclassとstyleを制御するには
vueでは、`class`や`style`を連想配列で制御したり、要素の追加削除時にアニメーションを付けたりなどが可能です。 つまり、`v-bi…
【vue】 v-forで同じ要素を複数表示する
【vue】 v-forで同じ要素を複数表示する
vueでは、同じ構造の要素を並べたい場合に`v-for`を使うことで並べることができます。 forの書き方 `for-in`構文が使えますが、挙…
【vue】 v-ifで要素の表示条件を設定する
【vue】 v-ifで要素の表示条件を設定する
このifは、JavascriptではなくHTMLに書くifです。v-ifを使うことで、条件に応じて要素を出力するかどうかを制御できます。 使い方…
【vue】 computedで自動で再計算する
【vue】 computedで自動で再計算する
算術プロパティと呼ばれる機能です。`data`が固定の値を出力するのに対し、`computed`は計算した値を出力するというものです。書き方は`…
【vue】 watchを使って値の変化時に自動で処理を実行する
【vue】 watchを使って値の変化時に自動で処理を実行する
監視プロパティとも呼ばれます。`computed`と似ており、監視している値に変更があれば自動的に実行されるものです。 しかし、`watch`で…
【vue】 methods、computed、watchの違い
【vue】 methods、computed、watchの違い
`methods`、`computed`、`watch`の3つは、いずれも関数と同様に処理を書きます。 そこで、それぞれの違いを把握して、適切に…
【vue】 コンポーネントの使い方
【vue】 コンポーネントの使い方
vueにおけるコンポーネントは、オブジェクト指向におけるクラスとに似ています。コンポーネントを使うことでクラスのように関心を切り分けることができ…
【vue】 emitで子から親のメソッドを実行するには
【vue】 emitで子から親のメソッドを実行するには
emitは、子のコンポーネントから親へ情報を伝えるための手段です。主に親のメソッドを呼び出すのに利用します。カスタムイベントとも言います。 使い…
【vue】 v-modelを使って子から親に値を送信する
【vue】 v-modelを使って子から親に値を送信する
コンポーネントの章でpropsで値を渡す方法を紹介しました。ここでは、propsや値の渡し方について掘り下げていきます。 コンポーネントについて…
【vue】 slotでコンポーネントに要素を埋め込む
【vue】 slotでコンポーネントに要素を埋め込む
slotを用いると、子のコンポーネントに対し、親が任意のHTMLや値、コンポーネントなどを埋め込むことができます。 例えば、メッセージウィンドウ…
【vue】 1つのvueファイルにコンポーネントを定義する方法
【vue】 1つのvueファイルにコンポーネントを定義する方法
普通にコンポーネントを書くと、`app.component(...)`と書きました。しかし、このままではtemplateは非常に書きづらく、入力…
【vue】 transitionで要素の出現や削除時にアニメーションさせる
【vue】 transitionで要素の出現や削除時にアニメーションさせる
vueでは、項目の追加、更新、削除時に、だんだん出現したりなどのトランジション効果をかんたんに付けることができます。 使い方 追加や削除が発生す…
【vue】 リストの追加削除などでアニメーションさせる
【vue】 リストの追加削除などでアニメーションさせる
前回は、項目を1個だけ表示する部分のトランジションを紹介しました。次はリストの項目を増減させる場合のトランジションを見ていきます。 1つの項目の…