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

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

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

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

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

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

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

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

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

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

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

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

Vue.jsのVue Routerを使用しているプロジェクトで、プログラムを使用して画面遷移する方法を書いています。 最初に通常遷移する方法を記載していて、次にURLパラメータとクエリパラメータを渡して、画面遷移する方法を書いています。 V...