ต่อไปนี้คือเนื้อหาเกี่ยวกับ Vue API ในรูปแบบที่คุณขอ โดยใช้ภาษาที่เข้าใจง่ายและละเว้นคำว่า "คำอธิบาย" และ "โค้ด" พร้อมปรับให้คำอธิบายชัดเจนและเป็นมิตรมากขึ้น:

Syntax Specification

Overview

<script setup> เป็นวิธีเขียนโค้ดใน Vue 3 ที่ช่วยลดความซับซ้อน ทำให้เขียนคอมโพเนนต์ได้สั้นและชัดเจนขึ้น โดยรวมทุกอย่างไว้ในบล็อกเดียว.

<script setup>
  // เขียนโลจิกทั้งหมดที่นี่
</script>

Language Blocks

Vue ใช้ไฟล์ Single-File Component (SFC) ที่ประกอบด้วย <template> สำหรับ HTML, <script> สำหรับ JavaScript, และ <style> สำหรับ CSS ซึ่งทำงานร่วมกันเป็นคอมโพเนนต์.

<template>
  <div>Hello, Vue!</div>
</template>
<script setup>
  console.log('คอมโพเนนต์โหลดแล้ว');
</script>
<style>
  div { color: blue; }
</style>

Automatic Name Inference

เมื่อใช้ <script setup> Vue จะตั้งชื่อคอมโพเนนต์ตามชื่อไฟล์อัตโนมัติ เช่น ไฟล์ MyComponent.vue จะได้ชื่อคอมโพเนนต์ว่า MyComponent.

<!-- MyComponent.vue -->
<script setup>
  // ชื่อคอมโพเนนต์จะเป็น MyComponent อัตโนมัติ
</script>

Pre-Processors

สามารถใช้ภาษาอื่น เช่น TypeScript หรือ SCSS ใน <script> หรือ <style> ได้โดยเพิ่ม attribute lang.

<script setup lang="ts">
  const msg: string = 'สวัสดี';
</script>
<style lang="scss">
  div { color: $primary-color; }
</style>

src Imports

สามารถนำเข้าไฟล์ JavaScript หรือ CSS จากไฟล์ภายนอกได้ด้วย attribute src.

<script src="./script.js"></script>
<style src="./styles.css"></style>

Comments

รองรับการเขียนคอมเมนต์ใน <script> และ <template> เหมือน JavaScript และ HTML ทั่วไป.

<script setup>
  // คอมเมนต์บรรทัดเดียว
  /* คอมเมนต์
     หลายบรรทัด */
</script>
<template>
  <!-- คอมเมนต์ใน HTML -->
</template>

<script setup>

Basic Syntax

<script setup> ทำให้เขียนโค้ดง่ายขึ้น ตัวแปรและฟังก์ชันที่กำหนดในนี้จะใช้งานใน <template> ได้ทันที.

<script setup>
  const count = 0;
</script>
<template>
  <div>{{ count }}</div>
</template>

Reactivity

ใช้ ref หรือ reactive เพื่อสร้างตัวแปรที่อัปเดตอัตโนมัติเมื่อข้อมูลเปลี่ยน เช่น นับจำนวนการคลิก.

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
<template>
  <button @click="count++">{{ count }}</button>
</template>

Using Components

นำเข้าคอมโพเนนต์อื่นมาใช้ได้ทันทีใน <template> โดยไม่ต้องลงทะเบียน.

<script setup>
import MyComponent from './MyComponent.vue';
</script>
<template>
  <MyComponent />
</template>

Using Custom Directives

นำเข้าและใช้ Custom Directives ได้อัตโนมัติใน <script setup>.

<script setup>
import { myDirective } from './myDirective';
</script>
<template>
  <div v-my-directive>Custom Directive</div>
</template>

defineProps() & defineEmits()

กำหนด props เพื่อรับข้อมูลจาก parent และ emits เพื่อส่งเหตุการณ์กลับไป.

<script setup>
const props = defineProps(['msg']);
const emit = defineEmits(['update']);
</script>
<template>
  <div @click="emit('update', props.msg)">{{ props.msg }}</div>
</template>

defineModel()

สร้าง v-model สำหรับคอมโพเนนต์ได้ง่าย ๆ เพื่อให้ parent และ child ซิงก์ข้อมูลกัน.

<script setup>
const model = defineModel();
</script>
<template>
  <input v-model="model" />
</template>

defineExpose()

เลือกเผยแพร่ตัวแปรหรือฟังก์ชันจากคอมโพเนนต์ให้ parent เข้าถึงได้.

<script setup>
import { ref } from 'vue';
const count = ref(0);
defineExpose({ count });
</script>

defineOptions()

กำหนดตัวเลือกของคอมโพเนนต์ เช่น ชื่อหรือการตั้งค่า inheritAttrs โดยไม่ต้องใช้ <script> ปกติ.

<script setup>
defineOptions({ name: 'MyComponent' });
</script>

defineSlots()

จัดการ slots ในคอมโพเนนต์เพื่อกำหนดตำแหน่งที่ parent สามารถแทรกเนื้อหาได้.

<script setup>
defineSlots({ default: () => {}, header: () => {} });
</script>
<template>
  <slot name="header"></slot>
</template>

useSlots() & useAttrs()

เข้าถึง slots และ attributes ของคอมโพเนนต์เพื่อใช้ในโลจิก.

<script setup>
import { useSlots, useAttrs } from 'vue';
const slots = useSlots();
const attrs = useAttrs();
</script>

Usage alongside normal <script>

ใช้ <script setup> ร่วมกับ <script> ปกติเพื่อกำหนดตัวเลือกเพิ่มเติม เช่น การปิด inheritAttrs.

<script>
export default {
  inheritAttrs: false
};
</script>
<script setup>
const msg = 'สวัสดี';
</script>

Top-level await

รองรับการใช้ await ใน <script setup> เพื่อดึงข้อมูลแบบ asynchronous ได้โดยตรง.

<script setup>
const data = await fetch('/api/data').then(res => res.json());
</script>

Import Statements

นำเข้าโมดูลหรือคอมโพเนนต์ใน <script setup> แล้วใช้งานได้ทันที.

<script setup>
import { ref } from 'vue';
import MyComponent from './MyComponent.vue';
</script>

Generics

ใช้ TypeScript Generics ใน defineProps เพื่อให้ props มีความยืดหยุ่นและปลอดภัย.

<script setup lang="ts">
interface Props<T> {
  items: T[];
}
const props = defineProps<Props<string>>();
</script>

Restrictions

<script setup> มีข้อจำกัด เช่น ไม่สามารถใช้ export default หรือ setup function ได้โดยตรง.

<script setup>
  // ไม่สามารถใช้ export default ได้
</script>

CSS Features

Scoped CSS

เพิ่ม scoped ใน <style> เพื่อให้ CSS ทำงานเฉพาะในคอมโพเนนต์นั้น ไม่กระทบส่วนอื่น.

<style scoped>
div { color: blue; }
</style>

CSS Modules

ใช้ CSS Modules ด้วย module เพื่อสร้างชื่อคลาสที่ไม่ซ้ำ หลีกเลี่ยงการชนกัน.

<style module>
.text { color: red; }
</style>
<template>
  <div :class="$style.text">Module CSS</div>
</template>

v-bind() in CSS

เชื่อมโยงตัวแปร JavaScript กับ CSS โดยใช้ v-bind() เพื่อเปลี่ยนสไตล์แบบไดนามิก.

<script setup>
import { ref } from 'vue';
const color = ref('blue');
</script>
<style scoped>
div {
  color: v-bind(color);
}
</style>