アニメーション機能を提供する<transition>要素 [Vue.js]
Vue.jsには、HTMLのテンプレート要素に対してアニメーションの効果を与える仕組みが標準で用意されています。 アニメーションの...
「Vue.js」一覧
動的コンポーネントのキャッシュを保持する<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で親コンポ...