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

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

หลักสูตร Basic Vue.js 3 สำหรับผู้เริ่มต้น เป็นการอบรมการพัฒนาเว็บแบบ Single Page Application ด้วย Vue.js 3 ตั้งแต่เตรียมเครื่องมือ Vue CLI จนถึง State Management ด้วย Vuex, Vue Router, Form Validation ด้วย VeeValidate และ Composition API เหมาะกับนักพัฒนาเว็บและนักศึกษาที่มีพื้นฐาน HTML และ JavaScript มาบ้าง

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

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

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

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

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

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 แล้ว

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

แนะนำการเตรียมเครื่องมือและสภาพแวดล้อมสำหรับการพัฒนา
เข้าใจภาพรวมของ 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

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

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

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

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

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

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

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

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

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

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

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

คำถามที่พบบ่อย

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

เหมาะกับ นักเรียนนักศึกษา · ครู อาจารย์ วิทยากรที่สนใจ · นักวิชาการ นักไอที หรือผู้ดูและระบบ พื้นฐานที่ผู้เรียนควรมี พื้นฐานการเขียนโปรแกรมมาบ้าง หากไม่มีจะมีการปรับพื้นให้เล็กน้อย · มีพื้นฐานภาษา JavaScript ES6 มาบ้าง หากไม่มีจะมีการปรับพื้นฐานให้ก่อนอบรม หากไม่แน่ใจว่าพื้นฐานพอหรือไม่ ปรึกษาทีมงานได้ฟรีทาง LINE @itgenius หรือโทร 02-570-8449

หลักสูตร Basic Vue.js 3 สำหรับผู้เริ่มต้น ราคาเท่าไร ใช้เวลาเรียนกี่ชั่วโมง

ราคาปกติ 6,500 บาท (โปรโมชันปัจจุบันเหลือ 5,850 บาท) ใช้เวลาอบรม 18 ชั่วโมง ราคานี้ยังไม่รวม VAT 7% (กรณีชำระในนามนิติบุคคล) ชำระค่าอบรมด้วยการโอนเข้าบัญชีบริษัท แล้วแจ้งชำระเงินผ่านหน้าแจ้งชำระเงินของเว็บไซต์ และขอใบเสร็จรับเงินหรือใบกำกับภาษีในนามบริษัทได้

เรียนจบได้รับ Certificate หรือไม่

ได้รับ ผู้ผ่านการอบรมทุกท่านจะได้รับใบประกาศนียบัตร (Certificate of Completion) จากสถาบันไอทีจีเนียส ใบประกาศแต่ละใบมีเลขที่ของตัวเอง ใครก็ตามที่มีเลขที่ใบประกาศตรวจสอบความถูกต้องออนไลน์ได้ที่หน้าตรวจสอบใบประกาศของสถาบัน จึงใช้แนบแฟ้มผลงานหรือส่งให้ฝ่ายบุคคลประกอบการพัฒนาบุคลากรได้

อบรมที่ไหน มีเรียนแบบออนไลน์หรือไม่

เรียนได้ทั้งแบบออนไซต์ที่สถาบันไอทีจีเนียส และนัดเรียนผ่านออนไลน์ และรับจัดอบรมเฉพาะทีม (In-house Training) ให้องค์กร สอบถามรอบและสถานที่ได้ที่ LINE @itgenius หรือโทร 02-570-8449

ถ้าเรียนไม่ทันหรือขาดเรียน มีเรียนซ้ำ/เรียนชดเชยหรือไม่

มี ผู้เรียนสามารถแจ้งขอเรียนซ้ำ (repeat) ในรอบถัดไปของหลักสูตรเดียวกันได้ฟรีตามเงื่อนไขของสถาบัน แจ้งชื่อหลักสูตรและรอบที่เคยเรียนกับทีมงาน แล้วทีมงานจะตรวจสอบและแจ้งรอบที่ยังมีที่นั่งว่างให้เลือก สอบถามได้ที่ LINE @itgenius หรือโทร 02-570-8449

สมัครเรียนหรือขอใบเสนอราคาในนามบริษัทได้อย่างไร

สมัครออนไลน์ได้จากแบบฟอร์มลงทะเบียนบนหน้านี้ ลงทะเบียนผู้เข้าอบรมหลายคนได้ในครั้งเดียว และกรอกเลขประจำตัวผู้เสียภาษีกับที่อยู่สำหรับออกใบกำกับภาษีได้ในฟอร์ม หรือขอใบเสนอราคา (Quotation) ในนามนิติบุคคลได้ทันทีจากปุ่มขอใบเสนอราคา สอบถามเพิ่มเติมโทร 02-570-8449 หรือ LINE @itgenius