Who is Advanced Vue.js 3 for, and what background is needed?

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

How much does Advanced Vue.js 3 cost and how long does it run?

THB 9,500 (currently THB 8,550 on promotion). The course runs 24 hours. The price excludes 7% VAT (for payment in a company's name). 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.

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

Advanced Vue.JS 3 ขั้นสูง

หลักสูตร Advanced Vue.JS 3 เป็นการอบรมต่อยอดจาก Basic Vue.js 3 ครอบคลุมการใช้ Vue 3 ร่วมกับ TypeScript และ Vite, Composition API ขั้นสูง, VueUse, การจัดการ State ด้วย Pinia, Vuetify, Ant Design และการเชื่อม Firebase เหมาะกับนักศึกษา ครู อาจารย์ และนักไอทีที่มีพื้นฐาน HTML, CSS, JavaScript และ Vue.js 3

ລາຄາເລີ່ມຕົ້ນ 8,550 ບາດ / ທ່ານ 9,500 −10% ຍັງບໍ່ລວມ VAT 7% · ມີລາຄາໝູ່ຄະນະ

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

PDFດາວໂຫຼດ Course Outline

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

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

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

ในหลักสูตรนี้จะเป็นการต่อยอดจาก Basic Vue.js 3 สำหรับผู้เริ่มต้น ก่อนหน้าที่ผ่านมา เพื่อให้ผู้สนใจสามารถประยุกต์นำ Vue.JS ไปพัฒนาเว็บแอพของตัวเองได้อย่างมั่นใจ ด้วยเนื้อหาที่มีความสำคัญและนำไปใช้งานจริงได้มากมาย อาทิ การทำงานกับ TypeScript, การเขียนแบบ Composition

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

เข้าใจการทำงานกับ Vue 3 ร่วมกับ TypeScript
เรียนรู้การทำงานกับ Vue 3 ร่วมกับ Vite 3 ขั้นสูง
การใช้งาน Vue Composition API ขั้นสูง
การประยุกต์ใช้งาน VueUse Library
จัดการ State management ด้วย Pinia
การใช้งาน Vuetify
การใช้งาน Vue ร่วมกับ Firebase API
การออกแบบ UI ด้วย Ant Design
การทำงานกับ Styled Components
การใช้งาน Ckeditor 5 ร่วมกับ Vue.JS 3
การ deployed project ขึ้นใช้งานจริงบน Production

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

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

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

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

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

Section 1: การทำงานกับ Vue 3 ร่วมกับ TypeScript

Introduction to TypeScript with Vue.js 3
Bootstrap a Vue.js and TypeScript Project
Setup VS Code for TypeScript and Vue
TypeScript in Vue Components
Typing Reactive Data
Typing Computed Props
Typing Event Handlers
Declaring Component Events
Typing Component Events
Refactoring in TypeScript
Declaring and Typing Component Props
Typing Data Injected via Vue Provide/Inject
Using TypeScript with the Options API in Components
Augmenting Global Properties and Custom Options

Section 2: การทำงานกับ Vue 3 ร่วมกับ Vite 3 ขั้นสูง

Creating a Project with Vite and TypeScript
The project structure in deeep
Networking requests from Vite
Production Builds
Using Vite in Existing Vue Projects
Migrating vue.config.js

Section 3: การใช้งาน Vue Composition API ขั้นสูง

Introduction to the Vue.js 3 Composition API
Set up a Local Environment with Vite
Vue Composition API Setup Method
The Setup Method's Parameters: props and context
Reactive Primitives with Refs
Reactive Data with the Composition API
Refs vs Reactive With the Vue 3 Composition API
Computed Properties in the Composition API
Using Watch with the Composition API
The Composition API watchEffect Function
Using provide / inject with the Composition API
Lifecycle hooks and the Composition API
Script Setup
Creating a usePost Composable

Section 4: การประยุกต์ใช้งาน VueUse Library

Intro to VueUse
Browser - Reactive Browser Wrappers in VueUse - useTitle
Browser - Reactive Browser Wrappers in Vueuse - useClipboard
Browser - Theming with VueUse useDark and useColorMode
Sensors - The Keyboard and VueUse
Sensors - Device Sensors and VueUse
Sensors - Mouse & Touch with VueUse
Sensors - Scroll and VueUse
Sensors - Media and VueUse
Animation - useInterval and useIntervalFn in VueUse
Animation - Create an Animated Sprite with useIntevalFn and useRafFn
Animation - Timeouts and VueUse
Animation - Animating Time with VueUse
Animation - Transitions and VueUse
State - Ref History with VueUse
State - Persistent Storage with VueUse
VueUse Utilities: useFetch and Reactify
VueUse Utilities: refAutoReset and useBase64
VueUse Utilities: computedAsync and logic utils
How to Extend a VueUse Composable
Vue Components and VueUse

Section 5: จัดการ State management ด้วย Pinia

Introduction to Pinia
Install and Setup Up Pinia
Define Your First Pinia Store
Access State from a Pinia Store
Synchronous and Asynchronous Actions in Pinia
Create a Cart Store and the Pinia Devtools Timeline
An Example of Local Vs Global State
Getters in Pinia
Dynamic Getters and Displaying the Cart Items
Reset the State in Pinia
Access Stores from Other Stores
Access Pinia State in the Options API
Access Pinia Getters in the Options API
Access Pinia Actions in the Options API
Preserve State with Hot Module Replacement
Subscribing to Actions

Section 6 การใช้งาน Vuetify

Introduction Vuetify 3 and Vue 3
Creating a Vuetify Project
Using Javascript HTML - CSS
Layout
Vuetify Components
Grid System
CSS Classes
Adding Functionality

Section 7 การใช้งาน Vue ร่วมกับ Firebase API

Firebase 9 Introduction & Setup
Introduction to Firebase
Create a Firebase Project
Create App & Install Firebase
Setup Firestore Database
Connect to Database
Display Notes from Firestore
Firebase 9 Authentication
Firestore Authentication & Auth Store
Listen for Auth Changes & Store User Data

Section 8: การออกแบบ UI ด้วย Ant Design

Getting started
Create a new Vue 3 app
Install ant-design-vue
Ant Design components
Form handling
Ant Design icons

Section 9 การทำงานกับ Styled Components

Installing styled-components in Vue.JS
Passing the props in styled-components
Dynamic styling with props in Vue.JS
Applying the same style to multiple components
Dynamically changing the type of rendered component
Extending styles

Section 10: การใช้งาน Ckeditor 5 ร่วมกับ Vue.JS 3

Install the CKEditor 5 for Vue.JS
Using ES6 modules
Using the component locally
Integrating a build from the online builder
Using CKEditor from source
Using the Document editor build
Localization
Component directives
Component events

Section 11: การ deployed project ขึ้นใช้งานจริงบน Production

Vue 3 build and config project for production
Deploying A Vue.JS App With Netlify
Deploying A Vue.JS Site with Vercel
Deploying A Vue.JS App To Firebase Hosting

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

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

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

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

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

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

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

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

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

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

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

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

หลักสูตร Advanced Vue.JS 3 ขั้นสูง ราคาเท่าไร ใช้เวลาเรียนกี่ชั่วโมง

ราคาปกติ 9,500 บาท (โปรโมชันปัจจุบันเหลือ 8,550 บาท) ใช้เวลาอบรม 24 ชั่วโมง ราคานี้ยังไม่รวม 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