Vue.jsが学習できる記事一覧!(入門・機能解説など)

Vue.jsが学習できる記事一覧!(入門・機能解説など) Vue.js

Vue.js関連記事のリンクまとめページです。

Vue.js入門のまとめ記事

ディレクティブ別のリンク一覧

Vue.js機能解説記事のリンク一覧

Vue.jsのライブラリ記事一覧

Vue Router

Vue.js

【現役エンジニアが選定】Vue.jsの学習におすすめの本4選!

今回はVue.jsの学習におすすめな本を4つ紹介しています。 学習に本が必要かも考えてみたので確認してみてください。 Vue.jsの学習に本が必要? Vue.jsはJavaScriptでWebアプリケーションのフロントエンドを開発するときに...
Vue.js

Vue Routerでページにデータを渡せるmetaの使い方!

Vue RouterでページのURLごとに、データを渡す方法について書いています。 利用シーンとしては、ページ毎にタイトルを設定したり、パンくずのデータを渡すときなどになるかと思います。 載せているサンプルコードについては、下記で確認してい...
Vue.js

Vue.jsのtransitionの使い方!アニメーションサンプル3つ!

Vue.jsでtransition(トランジション)を使ってアニメーションする方法について書いています。 transitionを使用することで、v-showやv-ifなどの動的に表示が変わる箇所で、フワッと出したりスライドさせたりするアニメ...
Vue.js

Vue.jsで状態管理する方法!(グローバルなストアを作成)

Vue.jsのprovideとinjectを使用して、データの状態管理をするストアを作成する方法です。 Vuexを使用しなくてもアプリケーションの状態管理が可能になります。 サンプルコードの検証には下記のバージョンを使っています。 Vue....
Vue.js

Vue.jsのprovide/injectの使い方!【解説とサンプルコード】

Vue.jsのprovideとinjectの使い方について書いています。 公式ドキュメントのこの辺の内容になります。 紹介しているサンプルコードは下記のバージョンで検証しました。 Vue.js 3.0.0 (Compotision API)...
Vue.js

Vue.jsに入門!Vue.jsの解説記事27個!

Vue.jsの記事がたまってきたので、まとめてみました。公式サイトと一緒に参考にしてみてください。 Vue.jsを使い始める方法から、機能の解説、ライブラリの説明などのリンクを一言そえて置いています。 Vue.jsを使い始める Vue.js...
Vue.js

Vue CLIの使い方!Vue.jsのプロジェクトを作成する方法!

Vue CLIのインストールからプロジェクトを作成して、実際に動作確認するまでを書いています。 今回はNode.jsをインストールした後の状態を対象にしています。 Node.jsのインストールについては、下記の記事を確認してみてください。 ...
Vue.js

Vue.jsのSlot(スロット)の使い方!(子コンポーネントにコンテンツを渡す)

Vue.jsのSlotの使い方について書いています。 サンプルコードはVue.jsのバージョン3で検証しています。 Vue.jsのSlotとは? Vue.jsのSlotは子コンポーネントに、使う側の親コンポーネントからコンテンツを渡せるとい...
Vue.js

Vue.jsでTypeScriptを使う方法!【propsでの型定義6つ】

今回はVue.jsで公式サポートされたTypeScriptを使ってみます。 はじめにVue CLIでTypeScriptのサポートしているプロジェクトを作成します。 その後にプロジェクトに対して、コンポーネントを追加して、TypeScrip...
Vue.js

Vue Routerでページ内リンクする方法!【画面遷移時にページトップへ】

Vue Routerを使用しているプロジェクトで、ページ内リンクをつける方法について書いています。 ページ内リンクが設定されていない場合("#hoge"でIDが指定されていない)は、ページのトップへスクロールする設定になります。 サンプルコ...
Vue.js

Vue.jsのイベントの使い方とイベントサンプル7選

Vue.jsでクリックした時に処理をするなど、イベントを発行して処理する方法の解説を書いています。 その後にサンプルコードとして、イベントを7つ書いてみました。 サンプルコードはVue.jsのバージョン3で検証しています。(Composit...
Vue.js

Vue.jsにVue Routerを導入して、タグで画面遷移する方法!

今回はVue.jsのプロジェクトにVue Routerを導入して、画面遷移する方法について解説しています。 まず、Vueのバージョン3に対して、Vue Routerを導入する方法を記載しています。 その後にVue Routerを使用して、ル...