พัฒนาเว็บไซต์ · WDC-41

Basic Vue.js 3 (หลักสูตรพื้นฐาน Vue.js)

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

ราคาเริ่มต้น 5,400 บาท / ท่าน 6,000 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา18 ชั่วโมง · 3 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

Basic Vue.js 3 (หลักสูตรพื้นฐาน Vue.js) ยุคสมัยนี้การพัฒนาเว็บแอพพลิเคชั่นส่วนใหญ่เน้นไปทางการทำเว็บที่เป็นแบบ Single Page Application (SPA) คือการทำงานจบในหน้าเดียว ไม่ต้องรีโหลด หรือเปลี่ยนหน้าไปมา จึงกำเนิด JavaScript Framework ที่รองรับการทำงานลักษณะนี้มากมาย ไม่ว่าจะเป็น Angular, React, NodeJS และ Vue.js ก็เป็นหนึ่งใน JavaScript Framework ที่กำลังได้รับความนิยมใช้กัน

ซึ่งในหลักสูตรนี้จะแนะนำภาพรวมตั้งแต่เริ่มต้นการใช้งาน ไปจนสามารถประยุกต์พัฒนาโปรเจ็กต์ของผู้เรียนได้เอง จึงเหมาะสำหรับผู้สนใจเกี่ยวกับการพัฒนาเว็บแอพสมัยใหม่ด้วย Vue.js เพื่อนำไปประยุกต์ใช้ในการพัฒนาเว็บแอพของตัวเองได้ต่อไป

สิ่งที่คุณจะได้รับ

เข้าใจแนวคิดของ Component Based Application ใน Vue.js 3
สร้างแอปด้วย createApp และเข้าใจ Options API กับ Composition API
ใช้งาน Basic Directives ได้
จัดการ State ด้วย ref, reactive และ Pinia ได้
จัดการ Event Handler ได้
จัดการ Attribute Binding ได้
สามารถจัดการฟอร์มและรับค่าจากฟอร์มด้วย v-model ได้
เข้าใจ Lifecycle Hook ของ Vue 3
สามารถเชื่อมต่อกับ HTTP Service ด้วย Fetch API หรือ Axios ได้
ประยุกต์สร้าง Single Page Application (SPA) ด้วย Vue Router ได้

หลักสูตรนี้เหมาะสำหรับ

นักเรียนนักศึกษา
ครู อาจารย์ วิทยากรที่สนใจ
นักวิชาการ นักไอที หรือผู้ดูแลระบบ
ผู้สนใจทั่วไป

พื้นฐานของผู้เข้าอบรม

พื้นฐาน HTML & CSS มาบ้าง
พื้นฐาน JavaScript มาบ้าง
พื้นฐานการใช้งาน Windows
พื้นฐานการค้นหาข้อมูลจากอินเตอร์เน็ต

หัวข้อการฝึกอบรม

Module 1 เริ่มต้นใช้งาน

Hello World
รู้จัก Vue.js 3
เตรียมสภาพแวดล้อมการพัฒนาบนเครื่อง (แบบง่าย)

Module 2 พื้นฐานของ Vue.js

แนะนำเนื้อหาในส่วนนี้
การทำงานกับ Template
Method
เรื่องควรรู้เกี่ยวกับ Arrow Function ของ ES6
รู้จัก Directive
แบบฝึกหัด: String Interpolation, Method และ Directive
การใช้ Expression ร่วมกับ Directive
รู้จัก Event
การส่ง Argument ให้ Event Listener
Directive และ Event Modifier
Key Modifier
ปุ่ม Modifier Key
แบบฝึกหัด: Event และ Modifier
การผูกข้อมูลสองทาง (Two-way Data Binding)
ความปลอดภัย: การแสดงผลและ Escape HTML
การแสดงผลองค์ประกอบเพียงครั้งเดียว
การแสดงผลองค์ประกอบตามเงื่อนไข
การแสดงและซ่อนองค์ประกอบ
ซ่อนองค์ประกอบจนกว่าแอปจะพร้อม (v-cloak)
การวนลูปผ่าน Array
การเข้าถึง Index ของลูป
การวนลูปผ่าน Property ของ Object
การวนลูปตามช่วงตัวเลข
ทำความเข้าใจกลยุทธ์การอัปเดตของ v-for และการใช้ key
การตรวจจับการเปลี่ยนแปลงของ Array
แบบฝึกหัด: Two-way Data Binding เงื่อนไข และลูป
เพิ่มประสิทธิภาพด้วย Computed Property
การเพิ่ม Getter และ Setter ให้ Computed Property
Watcher
แบบฝึกหัด: Computed Property และ Watcher
การจัดรูปแบบข้อมูลด้วย Method และ Computed Property (แทน Filter ที่ Vue 3 เลิกใช้)
แบบฝึกหัด: จัดรูปแบบข้อมูลที่แสดงผล
การกำหนดสไตล์ด้วย Inline CSS
การกำหนดสไตล์ด้วย CSS Class
แบบฝึกหัด: กำหนดสไตล์ด้วย Inline Style และ Class
รูปแบบย่อ (Shorthand) ของ Event และ Binding

Module 3 เจาะลึก Application Instance และ Reactivity

แนะนำเนื้อหาในส่วนนี้
การสร้างแอปด้วย createApp และการ mount เข้ากับหน้าเว็บ
การใช้หลายแอปในหน้าเดียวกัน
Options API และ Composition API (setup และ script setup)
การประกาศ State ด้วย ref() และ reactive()
ทำความเข้าใจ Reactivity ที่ทำงานด้วย Proxy ของ JavaScript
คิวการอัปเดตแบบ Asynchronous และ nextTick()
ทำความเข้าใจ Virtual DOM
การสร้าง Watcher ด้วย watch() และ watchEffect()
การเข้าถึง DOM ด้วย Template Ref
การ unmount แอป
Lifecycle และ Hook ของ Component ใน Vue 3
การใช้ Lifecycle Hook (onMounted, onUnmounted และอื่น ๆ)

Module 4 เตรียมสภาพแวดล้อมการพัฒนาด้วย Vite

แนะนำเนื้อหาในส่วนนี้
ติดตั้งส่วนขยาย Vue DevTools บนเบราว์เซอร์
รู้จัก Vite และ create-vue
สร้างโปรเจกต์ด้วยคำสั่ง npm create vue@latest
ทำความเข้าใจโครงสร้างโปรเจกต์
Single File Component
การ Build สำหรับใช้งานจริง (Production)

Module 5 Component

รู้จัก Component
ทำไม Option data ต้องเป็นฟังก์ชัน และการประกาศ State ใน script setup
Global Component และ Local Component
หลักการตั้งชื่อ Component
สร้าง Component ในโปรเจกต์
แบบฝึกหัด: Global, Local และ Child Component
การจัดระเบียบ Component
Global Style และ Scoped Style
การส่งข้อมูลให้ Component ด้วย Props
การตรวจสอบข้อมูลที่ส่งเข้ามา
การทำงานกับ Event และการประกาศ emits
การส่งข้อมูลข้ามหลายชั้นด้วย provide และ inject (แทน Event Bus)
แบบฝึกหัด: การส่งข้อมูลและ Event
Slot
Named Slot
Dynamic Component
การคงสถานะ Dynamic Component ไว้ (KeepAlive)
Lifecycle Hook ของ Dynamic Component
การใช้ Vue DevTools จริง

Module 6 Composable

รู้จัก Composable และเหตุที่ใช้แทน Mixin ใน Vue 3
การสร้าง Composable
การส่งค่าเข้าและคืนค่าจาก Composable
การใช้ Composable ร่วมกันหลาย Component
การใช้ Plugin และ app.config.globalProperties

Module 7 ฟอร์ม

ซอร์สโค้ดฉบับเต็มอยู่ใน GitHub Repository
Text Input และ Textarea
Checkbox
Radio Button
Select (Dropdown)
Modifier
หลักการทำงานของ Directive v-model
การใช้ v-model กับ Component (defineModel)
การกำหนดค่าเริ่มต้น
การส่งฟอร์ม

Module 8 Animation และ Transition

รู้จัก Transition และ Animation
ทำความเข้าใจ Transition ขององค์ประกอบเดียว
การทำ Transition ด้วย CSS Class (v-enter-from, v-leave-to)
สร้าง Transition แรก
การกำหนดชื่อ Transition
การกำหนด Transition Class เอง
สร้าง CSS Animation แบบกำหนดเอง
การผสม Transition กับ Animation
Transition ระหว่างองค์ประกอบ
Transition Mode
Transition ตอนโหลดหน้าครั้งแรก (appear)
Transition ด้วย JavaScript Hook
การละเว้น CSS Class
Transition ของ Dynamic Component
Transition หลายองค์ประกอบด้วย TransitionGroup
Transition ขององค์ประกอบที่เคลื่อนที่

Module 9 Routing (SPA) ด้วย Vue Router

ซอร์สโค้ดฉบับเต็มอยู่ใน GitHub Repository
รู้จัก Single Page Application (SPA)
ติดตั้ง Vue Router
สร้าง Router ด้วย createRouter
การลงทะเบียน Route
การแสดงผล Component ตาม Route
การเลือก History Mode (createWebHistory และ createWebHashHistory)
Catch-all Route
ย้าย Route ไปไว้ในไฟล์แยก
การเพิ่มลิงก์นำทาง
การกำหนดสไตล์ให้ลิงก์ที่กำลังใช้งาน
Dynamic Route Matching
การลิงก์ไปยัง Dynamic Route
Named Route
การดึงค่าพารามิเตอร์ของ Route ด้วย useRoute()
การใช้ Route Props
การตอบสนองเมื่อพารามิเตอร์เปลี่ยน
การนำทางด้วยโค้ดด้วย useRouter() (Programmatic Navigation)
การนำทางใน History Stack ของเบราว์เซอร์
การ Redirect
Alias
Nested Route
Query Parameter
Hash Fragment
การควบคุมพฤติกรรมการ Scroll
Named View
Route Transition
Route Guard
Component Guard
Global Guard และ Meta Field
การตอบสนองต่อการนำทาง

Module 10 การเชื่อมต่อเซิร์ฟเวอร์ผ่าน HTTP

เริ่มต้นใช้ HTTP ใน Vue
เรียก API ด้วย Fetch API และติดตั้ง Axios
ดึงข้อมูลด้วย GET Request
การใช้ async/await และการแสดงสถานะ Loading
POST Request
PUT และ DELETE Request
การจัดการข้อผิดพลาด (Error Handling)
การตั้งค่าแบบ Global ด้วย Axios Instance (baseURL และ Header)
การแยกโค้ดเรียก API เป็น Service หรือ Composable
Interceptor

Module 11 จัดการ State ด้วย Pinia

รู้จัก Pinia
ทำไมต้องจัดการ State แบบรวมศูนย์
ติดตั้ง Pinia
สร้าง Store อย่างง่ายด้วย defineStore
การเข้าถึง State ของ Store
การเปลี่ยนแปลง State และการใช้ $patch
รู้จัก Getter
การเขียน Getter
การเข้าถึง Getter ตัวอื่น
การส่ง Argument ให้ Getter
การดึง State และ Getter มาใช้ใน Component ด้วย storeToRefs
รู้จัก Action
การเขียน Action
Action แบบ Asynchronous สำหรับเรียก API
การใช้ Pinia กับ Options API (mapState และ mapActions)
Two-way Data Binding กับ State ของ Store
การแบ่ง State เป็นหลาย Store
การเรียกใช้ Store อื่นภายใน Store
การ Reset State
Setup Store (เขียน Store แบบ Composition API)
การเชื่อมต่อกับ Vue DevTools
ควรใช้ Pinia เมื่อไร

Module 12: Workshop ลงมือทำกับ Vue

12 Workshop ระบบ E-commerce

แสดงรายการสินค้า
เพิ่มสินค้าลงตะกร้า
แสดงข้อมูลตะกร้าในเมนู
สลับระหว่าง View
แสดงตะกร้าสินค้า
จัดการกรณีเพิ่มสินค้าที่มีอยู่แล้วในตะกร้า
เพิ่มและลดจำนวนสินค้า
การ Checkout

13 Workshop แอปพลิเคชันอีเมล

แนะนำแอปพลิเคชัน
สร้าง Component สำหรับแต่ละ View
เพิ่ม Markup ของ Sidebar
สลับระหว่าง View
โหลดข้อความจากไฟล์
เพิ่มตัวเลขในเมนูนำทาง
แสดงกล่องจดหมายเข้า (Inbox)
ทำเครื่องหมายข้อความว่าสำคัญ
แสดงข้อความที่ส่งแล้ว ข้อความสำคัญ และข้อความในถังขยะ
แสดงข้อความ
ทำเครื่องหมายว่าอ่านแล้วโดยอัตโนมัติ
ย้อนกลับไปยัง View ก่อนหน้า
ลบข้อความ
ทำเครื่องหมายว่าอ่านแล้วหรือยังไม่อ่าน
รีเฟรชกล่องจดหมายเข้า
ส่งข้อความ

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 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 เขียนทุกอย่างในฟังก์ชัน setup หรือในแท็ก script setup และจัดกลุ่มโค้ดตามฟีเจอร์ได้ ใช้ ref() และ reactive() ประกาศ State และแยกตรรกะที่ใช้ซ้ำออกเป็น Composable ได้ จึงเหมาะกับ Component ขนาดใหญ่และใช้ร่วมกับ TypeScript ได้ดี ทั้งสองแบบยังใช้ได้ใน Vue 3

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

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

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

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

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

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

เรียนจบหลักสูตร Basic Vue.js 3 แล้วทำอะไรได้บ้าง

สร้างแอปด้วย Vue 3 ทั้ง Options API และ Composition API ใช้ Directive, Event และ v-model กับฟอร์ม แบ่งหน้าจอเป็น Component ที่ส่งข้อมูลด้วย Props และ emits ทำ Single Page Application ด้วย Vue Router เรียก API ด้วย Fetch API หรือ Axios และจัดการ State รวมศูนย์ด้วย Pinia ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

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

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