แนวทางการออกแบบและพัฒนาเว็บสมัยใหม่เน้นไปทางรูปแบบ 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
  • พื้นฐานการค้นหาข้อมูลจากอินเตอร์เน็ต
  • 24 ชั่วโมง
  • ราคาปกติ 9,500 บาท / คน
  • โปรโมชั่นลด 10% เหลือ 8,550 บาท / คน
  • ราคาเหมาจ่าย (ผู้อบรมตั้งแต่ 10 คน) ตามแต่ตกลงกัน
  • ขอใบเสนอราคา

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             
30/11/2024 02:04:18