[Vue.js] 1. Vueプログラミンの基礎

<script setup lang="ts">
  // スクリプトブロック
  // JavaScript (TypeScript) コードを記述する
</script>

<template>
  <!-- テンプレートブロック -->
  <!-- HTMLタブを記述する -->
</template>

<style>
  /* スタイルブロック */
  /* CSSコードを記述する */
</style>

<script setup lang="ts">
import {ref} from "vue"

const name = ret("山田太郎")
</script>

<template>
  <h1>こんにちは！{{name}}さん！</h1>
</template>

const name = ref("山田太郎")

import {ref} from "vue"

<script setup lang="ts">
import { ref } from 'vue'

// 現在の時刻を取得
const now = new Date()

// 現在の時刻の文字列を取得
const nowStr = now.toLocaleDateString()

// 現在時刻文字列をテンプレート変数としてref()で用意
const timeStrRef = ref(nowStr)

// 新しい時刻に変更する関数
function changeTime(): void {
  const newTime = new Date()
  const newTimeStr = newTime.toLocaleTimeString()
  timeStrRef.value = newTimeStr
}

// changeTime関数を1秒ごとに実行
// この関数により、１秒ごとにchangeTimeが実行され、
// timeStrRefが新しい時刻で更新される
setInterval(changeTime, 1000)
</script>

<template>
  <!-- timeStrRefの値を表示 -->
  <p>現在時刻: {{ timeStrRef }}</p>
</template>

const 変数名 = ref(値)
変数名.value = 新しい値

<template>
  <p>半径{{radius}}の円の面積を円周率{{PI}}で計算すると、{{PI * radius * radius}}</p>
</template>

<script setup lang="ts">
// vueからrefとcomputed関数をインポート
import { ref, computed } from 'vue'

// 半径の初期値を乱数で取得
const radiusInit = Math.round(Math.random() * 10)

// 円周率のテンプレート変数を用意
const PI = ref(3.14)

// 半径のテンプレートを用意
const radius = ref(radiusInit)

// 円の面積の算出プロパティを用意
const area = computed((): number => {
  return radius.value * radius.value * PI.value
})

// 半径のテンプレート半数に新しい乱数を１秒ごとに格納
setInterval((): void => {
  radius.value = Math.round(Math.random() * 10)
}, 1000)
</script>

<template>
  <p>半径{{ radius }}の円の面積を円周率{{ PI }}で計算すると、{{ area }}</p>
</template>

const 変数名 = computed(
  (): 計算結果のデータ型 => {
    計算処理
    return 計算結果
  }
}

const area = computed(
  function(): number {
    return radius.value * redius.value * PI.value
  }
}

const data = reactive({
  PI: 3.14,
  radius: Math.round(Math.random() * 10)
})

setInterval(():void => { data.radius = Math.round(Math.random() * 10)}, 1000)

■ hello-vue              プロジェクトルートフォルダ
│                          
├─■ .vscode              VSCode用の設定ファイル
├─■ dist                 デプロイ用ファイルセットが格納されたフォルダ
├─■ node_modules         ライブラリが格納されたフォルダ
├─■ public               Webに公開するファイル類を格納するフォルダ
│  │                      
│  └─□ favicon.ico      ファビコンファイル
│                          
├─■ src                  ソースコードファイルを格納するフォルダ
│  │                      
│  ├─■ assets           画像などのアセット類を格納するフォルダ
│  ├─■ components       コンポーネントファイルを格納するフォルダ
│  ├─□ App.vue          メインの単一コンポーネントファイル
│  └─□ main.ts          メインのスクリプトファイル
│                          
├─□ .editorconfig        エディタの設定ファイル
├─□ .gitignore           Git管理から除外するファイルを設定するファイル
├─□ .prettierrc.json     Prettierの設定ファイル
├─□ env.d.ts             環境変数を設定するファイル
├─□ eslint.config.js     ESLintに関するファイル
├─□ index.html           トップページ
├─□ package-lock.json    npmの依存関係に関する設定ファイル
├─□ package.json         npmに関する設定ファイル
├─□ README.md            ReadMeファイル
├─□ tsconfig.app.json    アプリケーションコードを TypeScript で書けるようにする
├─□ tsconfig.json        TypeScriptに関する設定のベースになるファイル
├─□ tsconfig.node.json   TypeScriptに関する追加の設定ファイル
└─□ vite.config.ts       Viteに関する設定ファイル

npm run build

import { createApp } from 'vue'    // Vue.js本体からcreateApp()関数をインポート
import App from '/App.vue'         // App.vueファイルをインポート
import './assets/main.css'         // main.cssファイルをインポート
createApp(App).mount('#app')