■ はじめに

https://dk521123.hatenablog.com/entry/2020/04/30/000000

の続き。

【１】関連用語

１）コンポーネント (Component)

* Vue の機能の１つで、
　Webページを部品（e.g. ヘッダー、フッター）にして再利用できる
　⇒ この部品を、コンポーネント になる。

２）マウント (Mount)

* コンポーネントがDOM（Document Object Model）要素を追加されること

３）Nuxt (ナクスト)

* Nuxt(ナクスト)
 = Vue + Vuex + Vue Router + asyncData + ServerSideRendering

Vuex
https://vuex.vuejs.org/ja/guide/

* システム全体のグローバル変数みたいなもの
* React でいう Redux
* 詳細は、以下の関連記事を参照のこと

https://dk521123.hatenablog.com/entry/2021/01/11/041127

Vue Router

* 詳細は、以下の関連記事を参照のこと

https://dk521123.hatenablog.com/entry/2020/12/24/000000
https://dk521123.hatenablog.com/entry/2021/01/20/165026
https://dk521123.hatenablog.com/entry/2021/03/02/001653

asyncData

* 非同期でデータをとってくる仕組み
* API呼び出しが簡単になる

ServerSideRendering

* サーバでVueを実行してHTMLを生成して送る

【メリット】
1) 検索に引っかかりやすい
2) 読み込みが速くなる

【デメリット】
1) セキュリティに気を付ける必要がある

４）Babel (バベル)

* JavaScriptを新しい書き方から古い書き方に変換してくれるツール

https://qiita.com/mzmz__02/items/e6fbe5e30cc3fd13788f
https://qiita.com/Shagamii/items/a87181c22ea777ee2acc
https://qiita.com/senou/items/15c584b6fc90fe51702e

【２】ページの基本的な構成

<!-- １）レイアウト（HTML） -->
<template>
  <!-- 注意：template直下は必ず1要素 -->
</template>

<!-- ２）処理（JavaScript / TypeScript） -->
<script>
</script>

<!-- ３）見た目（CSS/Sass） -->
<style>
</style>

【３】Vue のライフサイクル

Vueには、インスタンスの生成から破棄までにイベントがいくつか定義されている。

以下の4つの流れに、before<タイミング>/<タイミングの過去形>（4×2＝8イベント）
になってて分かりやすい。
~~~~~~
1) インスタンス作成
2) マウント
3) DOM更新
4) インスタンス破棄
~~~~~~

詳細は、以下を参照。

https://b1tblog.com/2019/10/18/vue-lifecycle/

#	名前	説明
1	beforeCreate	インスタンス作成前
2	created	インスタンス作成後
3	beforeMount	マウント前
4	mounted	マウント後
5	beforeUpdate	DOM更新前
6	update	DOM更新後
7	beforeDestroy	インスタンス破棄前
8	destroyed	インスタンス破棄後

プログラムの超個人的なメモ

Memo for Programming.

【Vue】Vue ～基本編～

■ はじめに

目次

【１】関連用語

１）コンポーネント (Component)

２）マウント (Mount)

３）Nuxt (ナクスト)

４）Babel (バベル)

【２】ページの基本的な構成

【３】Vue のライフサイクル

関連記事