Vue.js

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

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

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

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

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

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

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

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

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

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

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

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