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の使い方!

VueRouterでページの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.js3...
Vue.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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