Vue.js一覧

アニメーション機能を提供する<transition>要素 [Vue.js]

Vue.jsには、HTMLのテンプレート要素に対してアニメーションの効果を与える仕組みが標準で用意されています。 アニメーションの...

記事を読む

動的コンポーネントのキャッシュを保持する<keep-alive>要素 [Vue.js]

前回の記事では、<component>要素を使用して、動的にコンポーネントを切り替える方法について紹介しました。 ...

記事を読む

コンポーネントを動的に切り替える<component>要素 [Vue.js]

Vue.jsには、コンポーネントを制御するためのコンポーネントのメタコンポーネントの組み込みコンポーネントが用意されています。 ...

記事を読む

componentメソッドでコンポーネントを定義する [Vue.js]

ここでは、componentメソッドを使ったコンポーネントの定義について紹介します。 Vue.jsのコンポーネント コンポー...

記事を読む

コンポーネントにpropsで定義されていない属性を渡す(指定する) [Vue.js]

コンポーネントの属性には、基本的にはpropsオプションに定義さえている属性を指定します。 しかし、コンポーネントには、props...

記事を読む

ラジオボタン(input[type=”radio”])を操作する [Vue.js]

複数の項目から1つを選択させるラジオボタンのオプションは、多くのWebアプリケーションで利用されています。 例えば、性別を選択する...

記事を読む

セレクト(選択)ボックス(select)を操作する [Vue.js]

Webアプリケーションでは、ユーザーに項目を選択させるためにselect要素でセレクトボックス(選択ボックス)を利用することがよくあ...

記事を読む

Vue CLIのGUIツールを使ってプロジェクトを作成して管理する [Vue.js]

本ブログでは、以前にVue CLIでプロジェクトを作成する手順について紹介しました。 Vue CLIでは、コマンドを利用してプ...

記事を読む

チェックボックス(input[type=”checkbox”])を操作する [Vue.js]

Webアプリケーションでは、チェックボックスを使用してユーザーのオプション選択を取得することがよくあります。 例えば、アンケートア...

記事を読む

Viteでプロジェクトを作成する [Vue.js]

Vue.jsには以前から、アプリケーションのプロジェクトを自動生成してくれるコマンドラインツールの「Vue CLI」が用意されていま...

記事を読む

テキストボックス(input、textarea)を操作する [Vue.js]

Vue.jsではv-modelディレクティブを使用することで、HTMLのフォーム(form要素)のテキストボックス(input要素や...

記事を読む

子コンポーネントのデータを参照するスコープ付きスロット(slot要素の属性にv-bindでバインドする) [Vue.js]

前回、前々回の記事ではVue.jsのスロットを使用して、親コンポーネントから子コンポーネントへコンテンツを埋め込めることを紹介しまし...

記事を読む

名前付きスロットでコンポーネントの複数のスロットにコンテンツを埋め込む v-slot [Vue.js]

前回はコンポーネントに外部からコンテンツを埋め込むことができるスロット(slot要素)を紹介しました。 前回の記事では...

記事を読む

コンポーネントに指定したコンテンツを外から埋め込む<slot>要素 [Vue.js]

コンポーネントを作成していると、コンポーネント側の実装時点では配置できない要素などを利用する側から差し込みたい場合があります。 ...

記事を読む

propsや$emitを使わずに親子コンポーネント間の通信をする $parent、$refs、$root [Vue.js]

Vue.jsの親子コンポーネント間の通信は、原則としてpropsと$emitを使用します。 子コンポーネントはpropsで親コンポ...

記事を読む