Tel. 02-570-8449 Mobile 088-807-9770 Payment
Mon–Fri 9:00–17:00 @itgenius
IT Genius Institute
IT Genius Institute
Courses
For business
In-house trainingAI Transformation (TH)Government training (TH)Development servicesTraining room rental
WorkshopScheduleArticles
About us
InstructorsPortfolioOur clients
Contact usOnline
Theme
Language
THEN
Ask about a coursePick whichever channel suits you
LINE @itgeniusFastest reply · Mon–Fri 9:00–17:00
Call us
02-570-8449Office088-807-9770Mobile
Email & social
contact@itgenius.co.thFor quotations and documentsFacebookitgeniusonlineYouTubeitgeniusengPlan training for your team
Home / Courses / Web Development / Detail
Web Development · WDC-67

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

24 hours 4 days
Last updated

Advanced Vue.JS 3 ขั้นสูง is a 24-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

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

Objectives

  • เข้าใจการทำงานกับ 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

Who this course is for

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

Prerequisites

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

Curriculum

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             

Frequently asked questions

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 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.

Instructors

Run this course for your whole team

We run this course in-house, tailored to your stack.

Corporate training quote