レッスン 1: Vue.js の紹介 - プログレッシブ フレームワーク

Vue.js と Nuxt: 基本から高度まで

パート 1: Vue.js の基礎

xdev.asia

1.Vue.jsとは何ですか?

Vue.js もその 1 つです 進歩的な枠組み ユーザーインターフェイスを構築するため。 「プログレッシブ」とは、シンプルに始めて、小規模なライブラリから Nuxt を使用したフルスタック フレームワークまで徐々に拡張できることを意味します。

特長	ヴュー	反応する	角度のある	スレンダー
種類	プログレッシブ	図書館	完全なフレームワーク	コンパイラ
反応性	プロキシベース	仮想 DOM	ゾーン.js	コンパイル時
テンプレート	HTMLベース	JSX	HTML + ディレクティブ	HTML風
州	ピニア	リダックス/ズスタンド	RxJS/NgRx	店舗
SSR	ナクスト	Next.js	角度ユニバーサル	SvelteKit
学習曲線	簡単	平均	難しい	簡単

2.Viteでのセットアップ

# Tạo project Vue + TypeScript
npm create vue@latest my-app

# Options:
# ✔ TypeScript? Yes
# ✔ JSX Support? No
# ✔ Vue Router? Yes
# ✔ Pinia? Yes
# ✔ Vitest? Yes
# ✔ ESLint? Yes
# ✔ Prettier? Yes

cd my-app
npm install
npm run dev

3. 単一ファイルコンポーネント (SFC)

<!-- HelloWorld.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const message = ref('Xin chào Vue.js!')
const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <div class="container">
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<style scoped>
.container {
  padding: 1rem;
}
button {
  padding: 0.5rem 1rem;
  cursor: pointer;
}
</style>

4. テンプレートの構文

<template>
  <!-- Text interpolation -->
  <p>{{ message }}</p>
  <p>{{ count * 2 }}</p>

  <!-- Attribute binding -->
  <a :href="url">Link</a>
  <img :src="imageUrl" :alt="title" />

  <!-- Event handling -->
  <button @click="handleClick">Click</button>
  <button @click="count++">+1</button>
  <input @keydown.enter="submit" />

  <!-- Two-way binding -->
  <input v-model="name" />
  <p>Xin chào, {{ name }}!</p>

  <!-- Conditional rendering -->
  <p v-if="count > 10">Lớn hơn 10</p>
  <p v-else-if="count > 5">Lớn hơn 5</p>
  <p v-else>Nhỏ hơn hoặc bằng 5</p>

  <!-- List rendering -->
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

5.Vue開発ツール

インストール Vue 開発ツール デバッグ用の Chrome/Firefox の拡張機能:

• コンポーネントツリーと状態を参照
• ピニアの店舗を追跡する
• Vueルーターの検査
• タイムラインイベント
• パフォーマンスプロファイリング

6. プロジェクトの構造

my-app/
├── src/
│   ├── assets/         # Static assets
│   ├── components/     # Reusable components
│   ├── composables/    # Custom composables
│   ├── layouts/        # Layout components
│   ├── pages/          # Page components (if using vue-router)
│   ├── router/         # Vue Router config
│   ├── stores/         # Pinia stores
│   ├── types/          # TypeScript types
│   ├── App.vue         # Root component
│   └── main.ts         # Entry point
├── public/             # Static files
├── index.html
├── vite.config.ts
└── tsconfig.json

次の記事: 反応性システムと組成 API — 参照、リアクティブ、計算、監視。