Web Development · WDC-59

Basic Vue.js 3 สำหรับผู้เริ่มต้น

18 hours 3 days

Last updated 25 Sep 2026

Basic Vue.js 3 สำหรับผู้เริ่มต้น is a 18-hour training course by IT Genius Institute. ยุคสมัยนี้การพัฒนาเว็บแอพพลิเคชั่นส่วนใหญ่เน้นไปทางการทำเว็บที่เป็นแบบ Single Page Application (SPA) คือการทำงานจบในหน้าเดียว ไม่ต้องรีโหลด หรือเปลี่ยนหน้าไปมา…

Training schedule

No public rounds are open right now — register your interest and we will contact you when the next round opens, or request an in-house session for your team.

Corporate training quote

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

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

ทำไม Vue.JS 3 จึงน่าใช้

มีการปรับปรุงจาก Vue.JS 2 มากกว่า 37 รายการ แยกโมดูลการทำงานเป็นย่อยๆ ระยะเวลาโหลดน้อยลง รองรับการทำงานกับ TypeScript ได้อย่างสมบูรณ์ ประสิทธิภาพดีขึ้นทุกกรณีเมื่อเทียบกับ Vue.JS 2 ลดการใช้แรมเหลือครึ่งหนึ่งของ Vue.JS 2 มีตัวจัดการ State Management ตัวใหม่ที่ชื่อว่า Pinia ทำได้ง่ายและประสิทธภาพสูงกว่า Vuex Framework ดังๆ หลายตัว อาทิ Laravel 9 ก็ใช้ Template เริ่มต้นด้วย Vue.JS 3 แล้ว

Objectives

แนะนำการเตรียมเครื่องมือและสภาพแวดล้อมสำหรับการพัฒนา
เข้าใจภาพรวมของ Vue.js 3
เข้าใจการทำงานกับ Vue.js 3 พื้นฐาน
เรียนรู้การทำงานกับ Vue.js 3 CLI
เรียนรู้การจัดการ State Management ด้วย Vuex
เรียนรู้ Vue Router Middleware and Navigation Guards
เรียนรู้การทำงานกับ Form Validation with VeeValidate
เข้าใจการใช้งาน Vue 3 Composition API

Who this course is for

นักเรียนนักศึกษา
ครู อาจารย์ วิทยากรที่สนใจ
นักวิชาการ นักไอที หรือผู้ดูและระบบ
ตลอดจนผู้สนใจทั่วไปในการพัฒนาเว็บไซต์แบบ SPA ด้วย Vue.JS Framework

Prerequisites

พื้นฐานการเขียนโปรแกรมมาบ้าง หากไม่มีจะมีการปรับพื้นให้เล็กน้อย
มีพื้นฐานภาษา JavaScript ES6 มาบ้าง หากไม่มีจะมีการปรับพื้นฐานให้ก่อนอบรม
ไม่จำเป็นต้องเคยใช้ Vue.js มาก่อน
มีพื้นฐานการเขียนเว็บไซต์ด้วยภาษา HTML, CSS, JS มาบ้างเล็กน้อย

Curriculum

ภาพรวมหัวข้อการอบรม

Section 1: การเตรียมเครื่องมือและสภาพแวดล้อมสำหรับการพัฒนา
Section 2: ภาพรวมของ Vue.js 3
Section 3: การทำงานกับ Vue.js 3 พื้นฐาน
Section 4: การทำงานกับ Vue.js 3 CLI
Section 5: จัดการ State Management ด้วย Vuex
Section 6: Vue Router Middleware and Navigation Guards
Section 7: Form Validation with VeeValidate
Section 8: Vue 3 Composition API

Section 1: การเตรียมเครื่องมือและสภาพแวดล้อมสำหรับการพัฒนา

ติดตั้ง Node.js และ Node Package Manager (NPM)
ติดตั้ง Vue.js Command Line Interface (CLI) สำหรับไว้สร้างโปรเจ็กต์
ติดตั้ง Visual Studio Code เป็น IDE ที่ใช้ในการเขียนโค้ด
ติดตั้ง Git สำหรับไว้ทำ Version Control
ทดสอบขึ้นโปรเจ็กต์ Vue.js 3 Application

Section 2: ภาพรวมของ Vue.js 3

รู้จัก Vue.JS framework และแนวคิดในการทำงาน
รู้จัก Single Page Application ด้วย Vue.js
ข้อดี ข้อด้อยของ Vue.JS

Section 3: การทำงานกับ Vue.js 3 พื้นฐาน

แนะนำ Vue.js 3
สร้าง Vue App
การทำงานกับ Attribute Binding
การเขียนเงื่อนไข Conditional Redering
การทำงานกับ List Rendering
การทำงานกับ Event Handling
การทำงานกับ Class & Style Binding
เรียนรู้ Computed Properties

Section 4: การทำงานกับ Vue.js 3 CLI

ภาพรวมการ Setup โปรเจ็กต์ผ่าน Vue CLI
Single File Components
Routing & Components Basics
API Calls with Axios
Dynamic Routing
Deploying with Render
Scaling the app

Section 5: จัดการ State Management ด้วย Vuex

How to Migrate Vue Application State to Vuex
Vuex Actions & Mutations
Creating a Forum Navbar
Fetching the Authenticated User From Vuex
Creating the User Profile Page
JavaScript: Passed by Reference vs by Value
Extracting User Posts and Threads to the Store
Updating the User Profile
Sharing Components Between Multiple Pages
Scroll to Top with Vue Router

Section 6: Vue Router Middleware and Navigation Guards

In Component Navigation Guards with Vue Router
Navigation Guards for Componentless Routes
Meta Fields and Global Navigation Guards
Navigation Guards and Firebase Authentication
404 Thread Show Page and Async Thread Data
Firestore Rules and Protecting Pages for Authenticated Users
Hiding Guest Pages from Logged In Users
Redirecting Users After Logging In to the Page they Tried to Visit
Allowing Only Authenticated Users to Create and Edit Posts

Section 7: Form Validation with VeeValidate

Introduction to VeeValidate
Displaying Error Messages with VeeValidate
Defining Global Components and Rules
Using Multiple Rules on a Single Field
Passing Arguments to VeeValidate Rules
Customizing VeeValidate Error Messages
Defining Async Rules with VeeValidate
Wrapping VeeValidate Field with Custom AppFormField
Adding Validation to all the Forms
Creating a Simple Autocomplete Location Field

Section 8: Vue 3 Composition API

Why the composition API
Setup & Reactive References
Methods
Computed Properties
The Reactive Syntax
Modularizing
Lifecycle Hooks
Watch
Sharing State
Suspense
Teleport

Frequently asked questions

Who is Basic Vue.js 3 สำหรับผู้เริ่มต้น for, and what background is needed?

Built for นักเรียนนักศึกษา · ครู อาจารย์ วิทยากรที่สนใจ · นักวิชาการ นักไอที หรือผู้ดูและระบบ Background you should have: พื้นฐานการเขียนโปรแกรมมาบ้าง หากไม่มีจะมีการปรับพื้นให้เล็กน้อย · มีพื้นฐานภาษา JavaScript ES6 มาบ้าง หากไม่มีจะมีการปรับพื้นฐานให้ก่อนอบรม Not sure the fit is right? Talk to our team on LINE @itgenius or call 02-570-8449.

How much does Basic Vue.js 3 สำหรับผู้เริ่มต้น cost and how long does it run?

THB 6,500 (currently THB 5,850 on promotion). The course runs 18 hours. The fee covers course materials, lunch and refreshments throughout. Pay by bank transfer to the company account, confirm it on our payment page, and we can issue the receipt or tax invoice in your company's name.

Do I get a certificate?

Yes. Everyone who completes the course receives a Certificate of Completion from IT Genius Institute. Each certificate carries its own number, and anyone holding that number can verify it online on our certificate page, so you can add it to your portfolio or pass it to HR as evidence of training.

Where does the training take place, and is there an online option?

You can attend onsite at IT Genius Institute or arrange to join online, and we also run it as a private in-house session for your team. Ask about dates and venues on LINE @itgenius or call 02-570-8449.

What if I fall behind or miss a session — can I retake it?

Yes. You may retake the same course free of charge in a later round, under the institute's conditions. Tell our team which course and round you attended, and we will check it and offer you the rounds that still have seats. Ask us on LINE @itgenius or call 02-570-8449.

How do I enrol, or request a quotation for my company?

Enrol online with the registration form on this page. You can register several attendees at once and enter your tax ID and billing address for the tax invoice. Or request a company quotation straight from the quote button. For anything else call 02-570-8449 or reach us on LINE @itgenius.