サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


18.nuxt.jsとbulmaでハンバーガーメニュー:index.html


差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
18.nuxt.jsとbulmaでハンバーガーメニュー:index.html [2019/02/08] – [ページ遷移したとき(新しいぺーじが描画されてfetch()メソッドを呼び出されたとき)にトグルが閉じるようにする] adash33318.nuxt.jsとbulmaでハンバーガーメニュー:index.html [2019/02/09] (現在) – [初めてのVuex目次] adash333
行 15: 行 15:
  
 [[18.nuxt.jsとbulmaでハンバーガーメニュー:index.html|18.Nuxt.jsとBulmaでハンバーガーメニュー]] [[18.nuxt.jsとbulmaでハンバーガーメニュー:index.html|18.Nuxt.jsとBulmaでハンバーガーメニュー]]
 +
 +[[19.nuxt.jsで画像一覧アプリ:index.html|19.Nuxt.jsで画像一覧アプリ]]
 +
 +
  
 ===== すること ===== ===== すること =====
行 22: 行 26:
  
 ソースコード ソースコード
 +https://github.com/adash333/Nuxt-Bulma-Hamburger3
  
- +スクリーンショット 
- +{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-195135.png}}
-Demo+
  
 ===== 開発環境 ===== ===== 開発環境 =====
行 165: 行 169:
   *このときに、Vuexを用いると、コンポーネント間の"isMenuActive"の『バケツリレー』を回避することができます。   *このときに、Vuexを用いると、コンポーネント間の"isMenuActive"の『バケツリレー』を回避することができます。
  
-詳細はhttps://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d#nuxtjs%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E5%8B%95%E4%BD%9C%E3%82%92%E8%AA%BF%E3%81%B9%E3%82%8Bを読んだのですが、なかなか難しく、とにかく、Vuexを使った方がよいということらしいす。+詳細はhttps://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d#nuxtjs%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E5%8B%95%E4%BD%9C%E3%82%92%E8%AA%BF%E3%81%B9%E3%82%8Bを読んだのですが、なかなか難しく、結論からいう、今回と関係があるのは、以下の2つのようでした。 
 +  *isMenuActiveの状態管理に、Vuexを使った方がよい 
 +  *Nuxt.jsアプリは、<nuxt-link>経由で特定のページに移動したとき、fetch()メソッドが呼び出される
  
 ===== Vuexストアを設定する ===== ===== Vuexストアを設定する =====
行 228: 行 234:
 {{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-193438.png}} {{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-193438.png}}
  
 +今回は以上となります。
  
 +===== ソースコード =====
 +ソースコード
 +https://github.com/adash333/Nuxt-Bulma-Hamburger3
  
 +スクリーンショット
 +{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-195135.png}}
  
 +===== 今回写経させていただいたサイト =====
 +https://qiita.com/isamusuzuki/items/5ec800e423a3a56ef03d
 +{{:18.nuxt.jsとbulmaでハンバーガーメニュー:pasted:20190208-195326.png}}
  
  
行 248: 行 263:
 目次: 目次:
  
-前:+前:[[17.nuxt.jsのvuexでパスワード制限:index.html|17.Nuxt.jsのvuexでパスワード制限]]
  
-次:+次:[[19.nuxt.jsで画像一覧アプリ:index.html|19.Nuxt.jsで画像一覧アプリ]]
  
  


18.nuxt.jsとbulmaでハンバーガーメニュー/index.html.1549654538.txt.gz · 最終更新: 2019/02/08 by adash333

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki