How does the Composition API in Vue 3 differ from the Options API?

The Options API organises a component's code by type, into data, methods, computed and watch. The Composition API is written in a script setup block, so code can be grouped by feature. State is declared with ref() and reactive(), and reusable logic can be extracted into composables, which suits larger components and works well with TypeScript. Both styles still work in Vue 3, but this course uses script setup throughout, in line with current practice.

What is the difference between ref and reactive in Vue 3?

ref() works with any value, including numbers and strings, and you read and write it through .value in JavaScript, although templates use the name directly. reactive() works with objects and arrays and lets you access properties directly, but replacing the whole object or destructuring it loses reactivity. Both rely on JavaScript proxies, and many teams default to ref for consistency.

What are the steps to start a Vue 3 project with Vite?

Install an LTS version of Node.js, then run npm create vue@latest, which uses create-vue to ask whether to add TypeScript, Vue Router, Pinia or Vitest. Move into the project folder, run npm install and then npm run dev to start the Vite development server, which updates the page as soon as you edit code. When you are ready to ship, run npm run build to produce the production files.

Should I use Pinia or Vuex for state management in Vue 3?

New projects should use Pinia, the state management library officially recommended by the Vue team. Pinia is more concise, has no mutations, works well with TypeScript and lets you inspect state in Vue DevTools, while Vuex is in maintenance mode only. This course teaches how to create stores with defineStore, in both the setup store and option store styles.

Who is the Basic Vue.js 3 course for, and what should I know beforehand?

It suits students, teachers, IT staff and system administrators, developers coming from Vue 2, and anyone who wants to build single-page applications with Vue 3. You should have some HTML, CSS and JavaScript, be comfortable with a basic command line and bring a laptop that can run Node.js and VS Code. No previous front-end framework experience is needed.

Can the Basic Vue.js 3 course be run in-house for our team?

Yes. It can be run in-house for your team, with examples adapted to your own work, such as building screens that call the APIs of the systems your team already uses. You can request a quotation from this page, or contact us on LINE @itgenius or by phone on 02-570-8449.

ພັດທະນາເວັບໄຊ · WDC-41

Basic Vue.js 3

หลักสูตร Basic Vue.js 3 เป็นการอบรมพื้นฐานการสร้างเว็บแบบ SPA ด้วย Vue 3 ตั้งแต่สร้างโปรเจกต์ด้วย Vite ทำ Component และฟอร์ม ไปจนถึง Routing ด้วย Vue Router เรียก REST API และจัดการ State ด้วย Pinia เหมาะกับนักศึกษา ครู อาจารย์ และทีมไอทีที่มีพื้นฐาน HTML, CSS และ JavaScript จบแล้ว Deploy เว็บแอปของตัวเองได้

ອັບເດດລ່າສຸດ 8 ຕ.ລ. 2026

ລາຄາເລີ່ມຕົ້ນ 5,400 ບາດ / ທ່ານ 6,000 −10% ຍັງບໍ່ລວມ VAT 7% · ມີລາຄາໝູ່ຄະນະ

ຂໍໃບສະເໜີລາຄາຝຶກອົບຮົມອົງກອນ ລົງຊື່ຈອງໄວ້

PDFດາວໂຫຼດ Course Outline

ໄລຍະເວລາ18 ຊົ່ວໂມງ · 3 ມື້
ຮູບແບບຢູ່ສະຖາບັນ / ອອນລາຍສົດ
ຮອບຕໍ່ໄປເປີດຕາມຄຳຂໍ
ໃບຢັ້ງຢືນມີໃບຢັ້ງຢືນ

ພາບລວມຫຼັກສູດ

เว็บแอปยุคใหม่ส่วนใหญ่ทำงานแบบ Single Page Application (SPA) ที่ตอบสนองทันทีโดยไม่ต้องโหลดหน้าใหม่ Vue.js เป็น JavaScript Framework ที่ได้รับความนิยมเพราะเริ่มต้นง่าย อ่านโค้ดเข้าใจได้เร็ว และขยายจากหน้าจอเล็ก ๆ ไปจนถึงระบบขนาดใหญ่ได้ แต่ตัวอย่างและบทความจำนวนมากบนอินเทอร์เน็ตยังเป็นแบบ Vue 2 หรือเครื่องมือรุ่นเก่า ผู้เริ่มต้นจึงมักสับสนว่าควรเขียนแบบไหนจึงจะตรงกับมาตรฐานปัจจุบัน

หลักสูตรนี้ปูพื้นฐาน Vue 3 ตามแนวทางที่ทีม Vue แนะนำในปัจจุบัน เริ่มจากสร้างโปรเจกต์ด้วย create-vue บน Vite เขียน Component แบบ script setup ด้วย Composition API เข้าใจ Reactivity ด้วย ref, reactive, computed และ watch ใช้ Directive, Event และฟอร์ม จากนั้นแบ่งหน้าจอเป็น Component ที่สื่อสารกันด้วย Props, Emits และ defineModel แยกตรรกะที่ใช้ซ้ำเป็น Composable ทำ SPA ด้วย Vue Router เรียก REST API และจัดการ State ด้วย Pinia แล้วปิดท้ายด้วยการทดสอบ Build และ Deploy เว็บแอปของตัวเองขึ้นออนไลน์ (อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง ระดับ Beginner)

ສິ່ງທີ່ທ່ານຈະໄດ້ຮັບ

สร้างและจัดโครงสร้างโปรเจกต์ Vue 3 ด้วย create-vue และ Vite ได้
เข้าใจ Reactivity และใช้ ref, reactive, computed, watch ได้ถูกที่
ใช้ Directive, Event Handling, Class และ Style Binding ได้คล่อง
สร้างฟอร์มด้วย v-model พร้อมตรวจสอบข้อมูลก่อนส่ง
ออกแบบ Component ที่สื่อสารกันด้วย Props, Emits, defineModel และ Slot
แยกตรรกะที่ใช้ซ้ำออกเป็น Composable ได้
สร้าง Single Page Application ด้วย Vue Router พร้อม Route Guard
เรียก REST API และจัดการ State รวมศูนย์ด้วย Pinia ได้

ຫຼັກສູດນີ້ເໝາະສຳລັບ

นักเรียน นักศึกษา และผู้เริ่มต้นที่อยากสร้างเว็บแอปสมัยใหม่ด้วย Vue.js
ครู อาจารย์ และวิทยากรที่ต้องการอัปเดตความรู้ Frontend ให้ทันปัจจุบัน
นักไอทีและผู้ดูแลระบบที่ต้องสร้างหน้าจอหรือ Dashboard ภายในองค์กร
นักพัฒนาที่เคยใช้ Vue 2 หรือ jQuery และต้องการย้ายมาใช้ Vue 3
ผู้สนใจทั่วไปที่มีพื้นฐาน HTML, CSS และ JavaScript

ພື້ນຖານຂອງຜູ້ເຂົ້າຝຶກອົບຮົມ

เขียน HTML และ CSS พื้นฐานได้
เข้าใจ JavaScript พื้นฐาน เช่น ตัวแปร ฟังก์ชัน Array และ Object หากรู้จัก ES Module และ async/await จะเป็นประโยชน์
ใช้งาน Windows หรือ macOS และ Command Line เบื้องต้นได้
โน้ตบุ๊กที่ติดตั้ง Node.js และ VS Code ได้ พร้อมสิทธิ์ติดตั้งโปรแกรม

ຫົວຂໍ້ການຝຶກອົບຮົມ

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ที่เขียนใหม่ทั้งหมดจากหลักสูตร Vue.js รุ่นเดิม อัปเดตให้ตรงกับ Vue 3.5 และเครื่องมือปัจจุบัน อบรม 3 วัน วันละ 6 ชั่วโมง รวม 18 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายพร้อม Lab ต่อเนื่องบนโปรเจกต์ร้านค้าออนไลน์ชุดเดียวตลอดหลักสูตร ระดับ Beginner ใช้ script setup

และ Composition API เป็นหลัก สร้างโปรเจกต์ด้วย create-vue บน Vite 8 ใช้ Vue Router 5 และ Pinia 4 แทน Vue CLI, Vuex, Mixin และ Event Bus แบบเดิม ทุก Lab ทำงานบนเครื่องของผู้เรียนด้วยเครื่องมือโอเพนซอร์สที่ใช้ฟรี ผู้เรียนจะได้ Lab Guide และซอร์สโค้ดตัวอย่างครบทุก Lab กลับไปใช้งานต่อ

Day 1 พื้นฐาน Vue 3 และ Reactivity

Section 1: Lab: เริ่มต้น Vue 3 ด้วย Vite

Vue.js คืออะไร แนวคิด Progressive Framework และ Single Page Application
ติดตั้ง Node.js และสร้างโปรเจกต์ด้วยคำสั่ง npm create vue@latest
โครงสร้างโปรเจกต์ Vite, Single File Component และ script setup
ใช้ Vue DevTools และส่วนขยาย Vue (Official) บน VS Code
Lab: Hello Vue แล้ว Build ไฟล์สำหรับ Production

Section 2: Template Syntax และ Reactivity

Text Interpolation, v-bind และรูปแบบย่อของ Binding
ประกาศ State ด้วย ref() และ reactive() และหลักการทำงานผ่าน Proxy
computed() สำหรับค่าที่คำนวณจาก State และ watch() กับ watchEffect()
Options API เทียบกับ Composition API และเหตุที่หลักสูตรใช้ script setup
Lab: ตัวนับและตะกร้าสินค้าอย่างง่าย

Section 3: Lab: Directive และ Event

แสดงผลตามเงื่อนไขด้วย v-if, v-else และ v-show
วนลูปด้วย v-for พร้อม key ทั้ง Array, Object และช่วงตัวเลข
จัดการ Event ด้วย v-on, Event Modifier และ Key Modifier
Class และ Style Binding ทั้งแบบ Object และ Array
Lab: แอปรายการงาน (Todo List) ที่เพิ่ม ลบ และกรองรายการได้

Section 4: Lab: ฟอร์มและ v-model

v-model กับ Text Input, Textarea, Checkbox, Radio และ Select
Modifier .trim, .number และ .lazy
ตรวจสอบข้อมูลในฟอร์มด้วย computed และแสดงข้อความแจ้งเตือน
ส่งฟอร์ม ป้องกันการส่งซ้ำ และล้างค่าในฟอร์ม
Lab: ฟอร์มลงทะเบียนที่ตรวจสอบข้อมูลก่อนส่ง

Section 5: Lifecycle, Template Ref และ TypeScript เบื้องต้น

Lifecycle Hook: onMounted, onUpdated และ onUnmounted
เข้าถึง DOM ด้วย useTemplateRef() และการใช้ nextTick()
เริ่มใช้ TypeScript กับ script setup lang="ts" แบบเบื้องต้น
อ่านข้อความ Error และ Debug ด้วย Vue DevTools
Lab: ช่องค้นหาที่โฟกัสอัตโนมัติและล้างค่าเมื่อออกจากหน้า

Day 2 Component และการใช้ตรรกะซ้ำ

Section 6: Component และ Props

แบ่งหน้าจอเป็น Component หลักการตั้งชื่อ และการจัดโฟลเดอร์
ส่งข้อมูลด้วย defineProps พร้อมกำหนด Type และค่าเริ่มต้น
Reactive Props Destructure ใน Vue 3.5 และหลัก One-way Data Flow
Scoped Style, CSS Module และ Global Style
Lab: การ์ดสินค้าที่ใช้ซ้ำได้ทั้งหน้ารายการ

Section 7: Lab: Emits, defineModel และ provide/inject

ส่ง Event จาก Component ลูกด้วย defineEmits
ทำ v-model บน Component ของตัวเองด้วย defineModel()
ส่งข้อมูลข้ามหลายชั้นด้วย provide และ inject แทน Event Bus
Lab: ช่องกรอกจำนวนสินค้าที่ผูกค่ากับตะกร้าแบบสองทาง

Section 8: Slot, Dynamic Component และ Teleport

Default Slot, Named Slot และ Scoped Slot
Dynamic Component ด้วย component :is และคงสถานะด้วย KeepAlive
Teleport สำหรับ Modal และ Notification
Async Component ด้วย defineAsyncComponent
Lab: Modal และ Tab ที่นำไปใช้ซ้ำได้

Section 9: Lab: Composable

แนวคิด Composable และเหตุที่ใช้แทน Mixin ใน Vue 3
เขียน Composable ที่รับค่าเข้าและคืนค่า Reactive ออกไป
Composable สำหรับเรียกข้อมูลพร้อมสถานะ Loading และ Error
ใช้ VueUse สำหรับงานที่พบบ่อย เช่น Local Storage และขนาดหน้าจอ
Lab: useCart และ useFetch ที่ใช้ร่วมกันหลาย Component

Section 10: Transition และ Animation

Transition ขององค์ประกอบเดียวและ CSS Class ของแต่ละช่วง
Transition Mode และ Transition ระหว่าง Component
TransitionGroup สำหรับรายการที่เพิ่ม ลบ และสลับตำแหน่ง
JavaScript Hook และ CSS Animation แบบกำหนดเอง
Lab: เพิ่ม Animation ให้รายการสินค้าและ Modal

Day 3 SPA, API, State และการ Deploy

Section 11: Lab: Routing ด้วย Vue Router 5

ติดตั้งและตั้งค่า createRouter กับ createWebHistory
Dynamic Route, Route Props และการอ่านค่าด้วย useRoute()
Nested Route, Named Route และหน้า 404 แบบ Catch-all
นำทางด้วย RouterLink, useRouter() และ Lazy Loading ของหน้า
ภาพรวม File-based Routing ที่รวมอยู่ใน Vue Router 5

Section 12: Route Guard และ Meta Field

Global Guard ด้วย beforeEach และการใช้ Meta Field
Guard ระดับ Route และระดับ Component
Redirect, Query Parameter และการควบคุมการ Scroll
Lab: หน้า Admin ที่ต้อง Login ก่อนเข้าใช้งาน

Section 13: Lab: เชื่อมต่อ REST API

เรียก API ด้วย Fetch และ async/await พร้อมสถานะ Loading และ Error
ตั้งค่า Axios Instance ด้วย baseURL, Header และ Interceptor
GET, POST, PUT และ DELETE สำหรับงาน CRUD
แยกโค้ดเรียก API เป็น Service หรือ Composable
Lab: หน้าจัดการสินค้าที่เพิ่ม แก้ไข และลบผ่าน API

Section 14: Lab: จัดการ State ด้วย Pinia

ทำไมต้องมี State รวมศูนย์ และติดตั้ง Pinia ในโปรเจกต์
สร้าง Store แบบ Setup Store และ Option Store ด้วย defineStore
State, Getter และ Action รวมถึง Action ที่เรียก API
ดึงค่าจาก Store ด้วย storeToRefs และตรวจดูผ่าน Vue DevTools
Lab: Store ของตะกร้าสินค้าและผู้ใช้ที่ Login

Section 15: Workshop: ทดสอบ Build และ Deploy

ทดสอบ Component เบื้องต้นด้วย Vitest และ Vue Test Utils
ใช้ AI Assistant ช่วยเขียนและอธิบายโค้ด พร้อมตรวจผลก่อนใช้งาน
Build สำหรับ Production และตั้งค่า Environment Variable
Deploy ขึ้น Static Hosting แบบใช้ฟรี เช่น Netlify หรือ Cloudflare Pages
Workshop: ร้านค้าออนไลน์ขนาดเล็กแบบ SPA ตั้งแต่ต้นจนขึ้นออนไลน์

ຮອບຝຶກອົບຮົມ ແລະ ຮູບແບບການຝຶກອົບຮົມ

ສຳລັບບຸກຄົນ — ຮອບຝຶກອົບຮົມທົ່ວໄປ

ຂະນະນີ້ຍັງບໍ່ມີຮອບຝຶກອົບຮົມເປີດຮັບສະໝັກ ລົງຊື່ຈອງໄວ້ໄດ້ເລີຍ ທີມງານຈະຕິດຕໍ່ກັບເປັນກຸ່ມທຳອິດເມື່ອເປີດຮອບຕໍ່ໄປ ຫຼື ສອບຖາມທາງ LINE ຫຼື ໂທ 02-570-8449 ຫຼື 088-807-9770

ລົງຊື່ຈອງໄວ້ ສອບຖາມຮອບຝຶກອົບຮົມ

ສຳລັບອົງກອນ — In-house / Private Training

ປັບເນື້ອໃນໃຫ້ກົງກັບເຄື່ອງມື ແລະ ວຽກຈິງຂອງທີມ
ເລືອກວັນເອງ ຝຶກອົບຮົມທີ່ບໍລິສັດ ຫຼື ອອນລາຍສົດ
ອອກໃບສະເໜີລາຄາໃນນາມນິຕິບຸກຄົນໃຫ້ຝ່າຍຈັດຊື້

ຂໍໃບສະເໜີລາຄາຝຶກອົບຮົມອົງກອນ

ວິທະຍາກອນຜູ້ສອນ

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

ຄຳຖາມທີ່ພົບເລື້ອຍ

Composition API ใน Vue 3 ต่างจาก Options API อย่างไร

Options API แบ่งโค้ดของ Component ตามประเภท เช่น data, methods, computed และ watch ส่วน Composition API เขียนในแท็ก script setup และจัดกลุ่มโค้ดตามฟีเจอร์ได้ ประกาศ State ด้วย ref() และ reactive() และแยกตรรกะที่ใช้ซ้ำออกเป็น Composable จึงเหมาะกับ Component ขนาดใหญ่และใช้กับ TypeScript ได้ดี ทั้งสองแบบยังใช้ได้ใน Vue 3 แต่หลักสูตรนี้ใช้ script setup เป็นหลักตามแนวทางปัจจุบัน

ref กับ reactive ใน Vue 3 ต่างกันอย่างไร

ref() ใช้ได้กับค่าทุกชนิด รวมถึงตัวเลขและข้อความ โดยอ่านเขียนผ่าน .value ในโค้ด JavaScript แต่ใน Template ใช้ชื่อตัวแปรได้เลย ส่วน reactive() ใช้กับออบเจกต์หรืออาร์เรย์และเข้าถึง Property ได้ตรง ๆ แต่ถ้าแทนที่ทั้งออบเจกต์หรือ Destructure ออกมาจะเสีย Reactivity ทั้งสองแบบทำงานด้วย Proxy ของ JavaScript และหลายทีมเลือกใช้ ref เป็นหลักเพื่อความสม่ำเสมอ

เริ่มสร้างโปรเจกต์ Vue 3 ด้วย Vite มีขั้นตอนอย่างไร

ติดตั้ง Node.js รุ่น LTS ก่อน แล้วรันคำสั่ง npm create vue@latest ซึ่งใช้ create-vue ถามว่าจะเพิ่ม TypeScript, Vue Router, Pinia หรือ Vitest หรือไม่ จากนั้นเข้าโฟลเดอร์โปรเจกต์ รัน npm install และ npm run dev เพื่อเปิด Dev Server ของ Vite ที่อัปเดตหน้าให้ทันทีเมื่อแก้โค้ด เมื่อพร้อมใช้งานจริงให้รัน npm run build เพื่อสร้างไฟล์สำหรับ Production

ควรใช้ Pinia หรือ Vuex จัดการ State ใน Vue 3

โปรเจกต์ใหม่ควรใช้ Pinia ซึ่งเป็นไลบรารีจัดการ State ที่ทีม Vue แนะนำอย่างเป็นทางการ Pinia เขียนสั้นกว่า ไม่ต้องมี Mutation รองรับ TypeScript ได้ดี และตรวจดู State ผ่าน Vue DevTools ได้ ส่วน Vuex อยู่ในโหมดดูแลรักษาเท่านั้น หลักสูตรนี้สอนการสร้าง Store ด้วย defineStore ทั้งแบบ Setup Store และ Option Store

หลักสูตร Basic Vue.js 3 เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับนักศึกษา ครู อาจารย์ นักไอทีหรือผู้ดูแลระบบ นักพัฒนาที่เคยใช้ Vue 2 และผู้สนใจทั่วไปที่อยากสร้างเว็บแบบ Single Page Application ด้วย Vue 3 ควรมีพื้นฐาน HTML, CSS และ JavaScript มาบ้าง ใช้ Command Line เบื้องต้นได้ และมีโน้ตบุ๊กที่ติดตั้ง Node.js และ VS Code ได้ ไม่จำเป็นต้องเคยใช้ Framework ฝั่งหน้าเว็บมาก่อน

จัดอบรมหลักสูตร Basic Vue.js 3 ให้ทีมในองค์กรได้ไหม

ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น ฝึกสร้างหน้าจอที่เรียก API ของระบบที่ทีมใช้อยู่ ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449