Nuxt勉強メモ

akitsuji

参考書籍

akitsuji

コンポーネントとは

HTMLとCSS、およびそれらを制御するJavaScriptをワンセットとして画面を部品化したもの

リアクティブ

変数の値の変化に応じて、自動的に表示内容を変えるような仕組み。
その時指定される変数をリアクティブ変数と呼ぶ

リアクティブな変数

ref()、もしくはreactive()関数を適用した変数が、リアクティブな変数となる
reactive()を利用すると、オブジェクトをまとめてリアクティブにできる

const width = ref(値);
const reactangle = reactive({
  オブジェクト
})

リアクティブな変数の値を書き換えるには、valueプロパティに値を設定する

width.value = Math.round(Math.random() * 10);

計算結果のリアクティブ化

computed()関数を利用することで、
リアクティブな変数を元に算出された値を、リアクティブな変数とする

const 変数名 computed (
  // computed関数の引数として、関数を渡す
  (): 算出結果のデータ型 => { 
       算出結果
       return 算出結果;
   }
);

サンプル

const area = computed(
  (): number => {
    return width.value * height.value;
  }
);

メソッド

v-onディレクティブでメソッドを指定することで、そのメソッドをイベントハンドラとして定義できる
例えば以下のような流れを実現できる
①ボタン押下
② ①をトリガに、メソッドhogeを実行
③ メソッドhogeの中で、リアクティブな変数の値を更新する
④ ③の結果を受け、画面の表示内容を変える

サンプルイメージ

<!-- リアクティブな変数の定義 -->
const refNum = 100;

<!-- メソッドの定義 -->
const hoge = ():void =>{
  refNum= refNum + 10;
}

<!-- v-onでメソッド名を指定 -->
 <button v-on:click="hoge()">ほげ</button>

ウォッチャー

リアクティブな変数を監視し、監視対象の変数の値が変化したら、何かしら処理を行う。

watchEffect()

監視対象は特に明示せず、関数内に含まれるリアクティブな変数の値が変化したら発火する

サンプル
rtvPriseMsgというリアクティブな変数を監視している。

watchEffect(
  (): void =>{
    console.log(rtvPriseMsg.value);
  }
);

watch()

監視対象を明示する

サンプル

watch(rtvWatchMsg,
  (): void =>{
    console.log(rtvWatchMsg.value);
  }
);

akitsuji

 ライフサイクルフックVueアプリケーションのライフサイクル

公式から引用(https://v2.ja.vuejs.org/v2/guide/instance#ライフサイクルダイアグラム)

ライフサイクルに応じた処理のことを、ライフサイクルフックと呼ぶ、それぞれ関数が用意されている

ライフサイクルフック関数

onBeforeMount

onMounted

onBeforeUpdate

onUpdated

onBeforeUnmount

onUnmounted

onErrorCaptured

onActivated

onDeactivated

onRenderTracked

onRenderTriggered

ライフサイクルフック関数
onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
onErrorCaptured
onActivated
onDeactivated
onRenderTracked
onRenderTriggered

akitsuji

テンプレートブロック記述

マスタッシュ構文

リアクティブな変数を表示させるための基本構文。
{{}}
マスタッシュ構文は、タグの属性には使えない

v-bind

タグの属性にリアクティブ変数を割り当てる場合に使うディレクティブ

v-bind:属性名="テンプレート変数"

v-on

イベントを設定するディレクティブ
イベントは、JavaScriptで用意されているものをそのまま利用できる

v-on:イベント名="イベント発生時に実行するメソッド名"

サンプル

  <button v-on:click="onButtonChangeNum()">点数変更</button>

v-model

双方向データバインディングのディレクティブ
テンプレート変数と、入力コントロールの値を連動させる

v-model="テンプレート変数"

サンプル
inputHogeの値と、inputタグの入力欄の入力値が連動する

<input type="text" v-model="inputHoge">

v-html

HTML文字列をそのまま表示するディレクティブ

v-html="HTML記述のテンプレート変数

v-pre

タグ内のテンプレート記述をすべて無効化し、静的コンテンツをそのまま表示する

  <section v-pre>
    <p v-on:click="showHello">{{ hello! }}</p>
  </section>

v-once

データバインドを初回の1回だけ行う

v-cloak

マスタッシュ構文がレンダリングされる前に、一瞬そのまま表示されてしまわないように、該当箇所を一時的に非常時にする

v-if

条件分岐

v-if="条件"
v-else-if="条件"
v-el

v-show

条件分岐
v-ifと異なり、条件に合致ていなくても、タグはレンダリングされる

v-for

ループ処理

配列用

v-for="各要素を格納する変数 in ループ対象"
v-for="(各要素を格納する変数,インデックス値を格納する変数I) in ループ対象"

akitsuji

ステートについて

ステートとは

コンポーネントをまたいで管理されるデータのこと
ステートを用意するのも、利用するのもuseState()メソッドを利用する

ステートの用意

useState<ステートのデータ型>(
    ステート名,
    (): ステートのデータ型 => {
        ステートの初期値の生成処理
        return ステートの初期値;
    }
);

ステートの利用

const ステートを格納する変数 = useState<ステートのデータ型>(ステート名);

akitsuji

Nuxtのルーティングについて

ルーティング表示領域(NuxtPage)について

ルーティング（画面遷移）によって変化する表示領域を、<NuxtPage/>であらかじめ指定しておく。
例えば下記だと、「サンプル」というタイトルは固定で、<main>で囲まれている領域のみ、ルーティングにより表示が変わる。
デフォルトでは、pages/index.vueが該当する


<template>
  <header> 
    <h1>サンプル</h1>
  </header>
  <main> 
    <NuxtPage/>
  </main>
</template>

以下のようなイメージ

NuxtLinkによるリンク生成

NuxtLinkタグを利用することで、ルーティング機能を利用したリンクを作成できる。
ルーティング機能を利用したリンクは、ルーティング表示領域に遷移結果を表示する。

        <p>
            新規登録は<NuxtLink v-bind:to="{name: 'member-memberList-memberAdd''}">こちら</NuxtLink>から <!-- 1 -->
        </p>

ハイフン区切りで、リンク先のパス改装を表す
member-memberList-memberAddは、以下のフォルダ構成を意味する（最上位階層はpages固定)