【ゼロから学ぶNuxt3×Typescript】③component作成-2

Nuxt３×TypeScript 学習
下記の参考サイトを見ながら、Nuxt３とTypescriptを学ぶ第３回。

▼　神回|vue3.js nuxt3 typescriptどうやる？【ゼロから解説】

前回はこちら👇

第1回はこちら👇

では始めます！！🧙

1./jobs/[id].vueを編集

・/jobs/[id].vue

<template>
  <p>あなたの名前は{{ name }}</p>
  <input type="text" name="name" v-model="name">
</template>

<script>
// nuxt3から導入されたref関数をvueのモジュールからimportしている
// [ref関数]_リアクティブ(状態管理)の値を定義するための関数
// https://field.asia/%E7%A5%9E%E5%9B%9Evue3-js-nuxt3-typescript%E3%81%A9%E3%81%86%E3%82%84%E3%82%8B%EF%BC%9F%E3%80%90%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E8%A7%A3%E8%AA%AC%E3%80%91/

import {ref} from 'vue'

export default {
  setup() {
    const name = ref("");

    return {
      name
    }
  }
}
</script>

<style>
</style>

▼ref関数とは

• Nuxt3から導入された関数
  import {ref} from 'vue'　でvueモジュールからimportしている。

• リアクティブ（状態管理）の値を定義するための関数

• setupの中でconst name = ref(’’)のように定義できるようになる

• オブジェクト以外の状態管理

  • オブジェクトはreactiveを使う

リアクティブなデータとは
データの変更に対して自動的に反応する性質

v-modelでnameを指定することによって、
value=”XXX”のXXXがリアルタイムでnameに渡され、
{{name}}としてリアルタイムに表示されます。

※vue2からvue3への変更点

vue2.Xでは<template>内を<div>で囲む必要があったのですが、3.Xでは複数のルートノードを持てるようになりました。
（必ずしもdivで囲む必要はない）

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

▼Vue.jsの公式ドキュメント
https://vueframework.com/docs/v3/ja/guide/migration/fragments.html#_2-x-%E6%A7%8B%E6%96%87

勉強で使用したコードも修正しておきます。

今回はここまで

参考サイト