chevron_left

メインカテゴリーを選択しなおす

cancel
JPP
フォロー
住所
未設定
出身
未設定
ブログ村参加

2021/10/06

arrow_drop_down
  • Nuxt.js レイアウトディレクトリを試してみる。

    レイアウトディレクトリ ページコンポーネントに各ページで共通になる部分(ヘッダ部、フッタ部)を記述するのが面倒。 Nuxtにはレイアウト作成の機能があり各ページに共通のレイアウト適用することが可能。 layoutsディレクトリにdefault.vueを作成 layoutsディレクトリ /layouts/default.vue <template> <div> <header style="border-bottom:solid 1px #CCC;padding:10px">ヘッダ部(デフォルト)</header> <div style="border-bottom:solid 1px #CCC…

  • Nuxt.js 動的ルーティングを試してみる。

    動的ルーティング ある商品の詳細ページのようなページの構成は同じで商品毎に表示内容が変わるようなページを作りたい場合、Nuxt.jsではどうすればいいのか調べてみました。 url構成 /商品カテゴリー/商品コード カテゴリー1に属する商品コードAのURL /category1/shiohinA カテゴリー1に属する商品コードBのURL /category1/shiohinB カテゴリー2に属する商品コードCのURL /category2/shiohinC カテゴリー2に属する商品コードDのURL /category2/shiohinD 上記のURLに対応したファイル構成(静的) /pages/…

  • Nuxt.js 静的ファイルを出力してみる

    出力対象 出力対象 /pages/index.vue <template> <div> <ul> <li>{{ text }}</li> <li>{{ data.data1 }}</li> <li>{{ data.data2 }}</li> </ul> </div> </template> <script> export default { name: 'IndexPage', async asyncData(context) { const data = await context.$axios.$get('http://localhost:3000/nuxt_test.json') ret…

  • Nuxt.js axios(非同期通信)で初期データを取得して表示してみる。

    dataメソッドを追加する dataメソッドを追加してjson型のデータを返すようにする。 <template>内のデータを表示したい個所に{{key}}を追加する。 /pages/index.vue <template> <div>{{ text }}</div> </template> <script> export default { name: 'IndexPage', data() { return{ text: "テスト" } } } </script> http://localhost:3000/ dataメソッドで返されたデータを<template>内で参照できてます。 同じ要…

arrow_drop_down

ブログリーダー」を活用して、JPPさんをフォローしませんか?

ハンドル名
JPPさん
ブログタイトル
AB型技術系 主に備忘録
フォロー
AB型技術系 主に備忘録

にほんブログ村 カテゴリー一覧

商用