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

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

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