zukucode
主にWEB関連の情報を技術メモとして発信しています。

カテゴリー「Vue.js」に関連するページ一覧 2ページ目

  • Vuex actionでローディングアイコンを表示する

    Vuex actionの処理でaxiosでajaxを行うでactionの処理を実装しました。actionでajaxを行うときにローディングアイコンを表示させます。Vuexのstoreにloadingの...


  • Vuexとaxiosを連携する

    Vuex actionでローディングアイコンを表示するで、actionの処理でローディングの表示非表示を制御するmutationを実行するようにしました。ajaxの処理が増えるたびに同じmutatio...


  • vue-routerを導入してSPAを作成する

    Vue.jsのプロジェクトにvue-routerを導入してシングルページアプリケーション(spa)を作成します。開発環境やフォルダ構成はwebpack モジュールのパスを絶対パスで指定する方法で扱った...


  • vueコンポーネントでvue-routerのページ制御を行う

    vueコンポーネントの処理でvue-routerのページ制御を行う方法を紹介します。vue-routerでページ遷移するときはrouter-linkのコンポーネントを使うことが多いですが、コンポーネン...


  • vue-router webpackでページごとにファイルを分割する

    vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。ページごとにファイルを分割し、そのページがア...


  • Vue.js 独自のfilterを実装する

    Vue.jsで独自のfilterを実装して、各コンポーネントで使用できるようにします。コンポーネント内で定義することもできますが、今回はグローバルファンクションとして作成して、全てのコンポーネントで使...


  • vue-router 現在のパスによってスタイルを変更する

    vue-routerでシングルページアプリケーションを作成する際に、例えばヘッダやサイドバーのナビゲーションで現在表示しているページのリンクを無効にしたり色を変えたりしたい場合があります。現在表示して...


  • vue-router ページ遷移時にアニメーションスクロールをする

    vue-routerでページ遷移するときにスクロールの位置をトップ(一番上)に移動させたいとき、公式サンプルにしたがって以下のように実装します。JavaScript ページの先頭までアニメーションスク...


  • Vuex moduleに定義したstateをコンポーネントで簡単に取得する

    Vuexのモジュールに定義したstateを各コンポーネントで参照する方法を紹介します。以下のようにmoduleが定義されているとします。各コンポーネントではthis.$store.state.モジュー...


  • Vue.js 数値の変化をドラムロールアニメーションする

    Vue.jsの公式ドキュメントの状態のトランジションで紹介されている数値のドラムロールアニメーションをコンポーネントとして実装します。公式のサンプルではTween.jsを使用していますが、今回は外部ラ...