アーカイブ:2018年 7月
-
vue-CLIで、webpackテンプレートを使って、Vue.jsの環境を構築します。 webpackについては以下の記事で解説していますのでもしあまり詳しくないという方はご覧ください。 http://www.code-maga…
-
asyncData属性とは? コンポーネントのロード毎に実行されます。Vuexストアのデータを使わずにデータを取得し、レンダリングの前に、非同期処理を行ってくれます。 標準のVue.jsでは非同期処理用の構文はありませんでしたので、…
-
Nuxt.jsとは? JavaScriptフレームワークで有名な「Vue.js」のさらなるフレームワークとなります。 Nuxt.jsは、「ユニバーサルアプリケーション」を作成できる。 ユニバーサルアプリとは? クライアントとサーバ…
-
pageディレクトリ .vueファイルは、一つのページを指しており、これを「ページコンポーネント」と呼びます。 追加する属性 Nuxt.jsでは、ユニバーサルアプリケーションを作成するために下記のように.vueファイルに独自の属性を追…
-
07.14
【Nuxt.js】「レイアウトファイル」の使い方
デフォルトレイアウトページ(default.vue) [crayon-662231bf221ec639716925/] <nuxt /> Nuxt.jsで定義されたコンポーネントで、レイアウトファイル内でのみページコンポー…
-
ルーティング設定(.nuxt/router.js) nuxt.jsのルーティングの設定ファイルになります。 なお、pagesディレクトリ配下に新しいページを作成すると、routesプロパティの配列にページが追加されます。 [cra…
-
ディレクトリ構成一覧 構成要素 説明 .nuxt コマンドでのビルド結果はここに配置されます。 └router.js pagesディレクトリ配下のファイルに対して、ルーティングの設定を行います。 …
-
イベントハンドラとは? イベントに紐づける処理内容のことです。 ハンドルとは? イベントと、イベントハンドラを紐づけることです。 v-onディレクティブ Vue.jsでは、紐づけのためには「v-onディレクティブ」を使います。 …
-
Flexboxとは? 複雑化したWebアプリのレイアウトを組みやすくすることを目的としてCSS3から導入されました。 Flexboxの構成要素 Flexboxコンテナ CSSにて、「display:flex」と指定します。これを指定…
-
07.08
【CSS】「Bulma」、「Buefy」
Bulmaとは? CSS3標準である「Flexbox」をベースにしたCSSのフレームワークのことで、BootStrap等のjQueryゴリゴリなフレームワーク等に比べると、軽量なフレームワークで、学習コストも低く導入しやすいです。 …