เรียน Vue: โค้ดและสร้าง
เรียน Vue: โค้ดและสร้าง — เรียนรู้ Vue.js ด้วยการสร้างคอมโพเนนต์บนโทรศัพท์ของคุณ
เรียน Vue: โค้ดและสร้าง คือแอป iOS และ Android ที่เริ่มต้นใช้งานได้ฟรี สอน Vue.js สำหรับผู้เริ่มต้นที่รู้จัก HTML และ JavaScript มาบ้าง รวมถึงนักพัฒนาที่กำลังเปลี่ยนจาก Options API ไปใช้ Composition API มี 42 คอร์สและ 156 บทเรียน ตั้งแต่เทมเพลตแรกของคุณไปจนถึง Pinia, Vue Router และ Nuxt 3 อีกทั้ง single-file components ยัง คอมไพล์บนอุปกรณ์ของคุณ ได้ จึงทำให้โปรเจกต์แนะนำ 20 โปรเจกต์ ภารกิจ และ Vue Lab ทำงานได้โดยไม่ต้องใช้เซิร์ฟเวอร์
- ราคา
- ฟรี อัปเกรดเป็น Pro
- แพลตฟอร์ม
- iOS และ Android
- ภาษา
- 22
- การจัดอันดับอายุ
- 4+
- เวอร์ชัน
- 82.6.0
- ต้องใช้
- iOS 15.1 ขึ้นไป
- App Store
- 3.0 ★ (2)
คอมโพเนนต์จะเข้าใจได้ง่ายขึ้น เมื่อคุณได้ลองทำให้คอมโพเนนต์หนึ่งพังด้วยตัวเอง
Vue Lab มอบคอมโพเนนต์ที่ใช้งานไม่ได้ให้คุณค้นหาบั๊กทุกวัน เปิดให้คุณปรับ props ของคอมโพเนนต์ด้วยตัวควบคุมแบบเรียลไทม์ และแสดงให้เห็นว่า state เปลี่ยนแปลงอย่างไรเมื่อคุณคลิก Single-file components คอมไพล์บนโทรศัพท์ได้ ดังนั้นพรีวิวจึงพังและกลับมาใช้งานได้ต่อหน้าคุณ พร้อมการ์ดข้อผิดพลาดที่บอกว่าเกิดอะไรขึ้น
คืออะไร
เรียน Vue: โค้ดและสร้าง คือแอป iOS และ Android ที่ใช้งานได้ฟรี สอน Vue.js ผ่าน 42 คอร์สและ 156 บทเรียน ตั้งแต่ไวยากรณ์ของเทมเพลตและ data binding ไปจนถึง Composition API, Pinia, Vue Router และ TypeScript ต่อด้วย Nuxt 3, การทดสอบด้วย Vitest และแอป full-stack Single-file components คอมไพล์บนอุปกรณ์ได้ จึงทำให้โปรเจกต์แนะนำ ภารกิจเขียนโค้ด และ Vue Lab แบบลงมือทำทำงานบนโทรศัพท์ได้โดยไม่ต้องใช้เซิร์ฟเวอร์ และ AI mentor ใน Pro ยังช่วยอธิบายโค้ดและข้อผิดพลาด
ภายในแอป
หน้าตาเป็นอย่างไร
คอร์ส
คอร์ส Vue ครอบคลุมอะไรบ้าง
42 คอร์สและ 156 บทเรียนจากรายการคอร์สของแอป ครอบคลุมตั้งแต่เทมเพลตแรกไปจนถึงการเรนเดอร์ฝั่งเซิร์ฟเวอร์และรูปแบบการพัฒนาสำหรับโปรดักชัน
เริ่มต้นใช้งาน Vue.js
แนะนำ Vue.js, Vue CLI และโครงสร้างโปรเจกต์ ไวยากรณ์เทมเพลต และการไบด์ข้อมูล
Reactivity และ Composition API
พื้นฐาน Vue 3 Composition API, ไวยากรณ์ script setup, reactivity และ computed properties รวมถึง Vue directives
คอมโพเนนต์และฟอร์ม
พื้นฐานคอมโพเนนต์และการสื่อสารระหว่างคอมโพเนนต์, slots, provide และ inject, ฟอร์มและการตรวจสอบความถูกต้อง รวมถึงวงจรชีวิตของคอมโพเนนต์
การนำกลับมาใช้ซ้ำและการปรับแต่ง
composables ของ Vue 3, transitions และ animations, การจัดการข้อผิดพลาด รวมถึง render functions และ JSX
State และ Routing
การจัดการ state ด้วย Pinia, Vuex, การทำ routing ด้วย Vue Router และรูปแบบ router ขั้นสูง รวมถึงการจัดการ API และข้อมูลแบบอะซิงโครนัส
TypeScript, i18n และเครื่องมือ
การใช้ TypeScript ร่วมกับ Vue 3, internationalization, การผสานการทำงานกับ Storybook รวมถึงการดีพลอยและดูแลแอป Vue
Nuxt 3, การทดสอบ และเรียลไทม์
การเรนเดอร์ฝั่งเซิร์ฟเวอร์ด้วย Nuxt 3, การทดสอบคอมโพเนนต์ด้วย Vitest, GraphQL ด้วย Apollo และแอปแบบเรียลไทม์ด้วย WebSockets
รูปแบบการพัฒนาสำหรับโปรดักชัน
ประสิทธิภาพ แนวปฏิบัติด้านความปลอดภัยที่ดี การพัฒนาปลั๊กอิน การเผยแพร่ไลบรารีคอมโพเนนต์ progressive web apps และ micro-frontends
ทำงานอย่างไร
การเรียน Vue ในแอปเป็นอย่างไร
แต่ละคอร์สแบ่งตามระดับ และทุกบทเรียนหลังจากคอร์สแรกที่เปิดให้ใช้ฟรีจะเริ่มต้นด้วยพรีวิวฟรี คุณจึงดูได้ว่าหัวข้อนั้นมีเนื้อหาอย่างไรก่อนตัดสินใจเรียนต่อ
เริ่มต้นด้วย Introduction to Vue.js
คอร์สแรกเปิดให้ใช้ฟรี เริ่มจากการทำความรู้จัก Vue การตั้งค่าสภาพแวดล้อม และแอป Hello Vue คอร์สต่าง ๆ มีป้ายกำกับตั้งแต่ A1 ถึง C1 จึงเห็นได้ชัดว่าควรเริ่มจากตรงไหนและควรเรียนอะไรต่อ
สร้างและรันคอมโพเนนต์บนโทรศัพท์
แก้ไข single-file component และดูพรีวิวได้ทันที โปรเจกต์แนะนำจะค่อย ๆ ขยายแอปทีละขั้น และ App Studio ช่วยให้คุณสร้างแอปหลายหน้าจอด้วย router และ store จากบลูพรินต์สำเร็จรูป
ฝึกฝนใน Vue Lab
ตามล่าบั๊กรายวัน จับคู่ดีไซน์เป้าหมายใน Style Lab แข่งกับเวลาในดวล speed-build หรือเขียนคอมโพเนนต์ Options API ใหม่ในรูปแบบ Composition
มีอะไรอยู่ข้างใน
สิ่งที่มาพร้อมกับแอป
42
คอร์ส, 156 บทเรียน
ตั้งแต่ไวยากรณ์ของเทมเพลตและ directives ไปจนถึง lifecycle, slots, provide และ inject รวมถึง composables ต่อด้วย Nuxt 3, GraphQL, PWAs และ micro-frontends
20
โปรเจกต์แนะนำ
ค่อย ๆ ขยายแอปทีละขั้นด้วย single-file components ที่คอมไพล์ได้โดยตรงบนอุปกรณ์ของคุณ พร้อมการ์ดข้อผิดพลาดเมื่อพรีวิวทำงานผิดพลาด
28
ภารกิจเขียนโค้ด
แบบฝึกหัดตั้งแต่ง่ายไปจนถึงยาก พร้อมบลูพรินต์ App Studio สำหรับแอปหลายหน้าจอที่มี router และ store
แล็บ
Vue Lab
เครื่องมือตรวจสอบ reactivity ภารกิจตามล่าบั๊กรายวัน 12 ระดับใน Style Lab ดวล speed-build สนามฝึก Options to Composition API และคลัง My Components ที่คุณแชร์เป็นการ์ดรูปภาพได้
สัมภาษณ์
คำถามสัมภาษณ์ Vue
คำถามสำหรับการสัมภาษณ์นักพัฒนา front-end พร้อมแบบทดสอบ เซสชันทบทวนด้วยแฟลชการ์ด และชีตสรุปที่เปิดดูได้ทุกเมื่อ
AI
AI mentor (Pro)
ถามเกี่ยวกับแนวคิดหรือข้อผิดพลาด ขอให้ช่วยอธิบายโค้ด หรือสร้างบทเรียนแบบกำหนดเองในหัวข้อใดก็ได้ที่คุณต้องการศึกษา
ข้อมูลพื้นฐาน
Vue.js คืออะไร และผู้เริ่มต้นควรเรียนรู้อะไรก่อน?
Vue คือเฟรมเวิร์ก JavaScript สำหรับสร้างเว็บอินเทอร์เฟซแบบโต้ตอบด้วยคอมโพเนนต์ ซึ่งเป็นส่วนเล็ก ๆ ที่นำกลับมาใช้ซ้ำได้ โดยแต่ละส่วนดูแลเทมเพลต ลอจิก และสไตล์บางส่วนของตัวเอง จุดเด่นสำหรับผู้เริ่มต้นคือเริ่มเรียนได้อย่างค่อยเป็นค่อยไป เพราะคุณเริ่มจาก HTML ธรรมดาและ JavaScript เพียงเล็กน้อย แล้วค่อยเพิ่มโครงสร้างไปทีละขั้น ลำดับที่เหมาะสมคือเรียนเทมเพลตและ data binding จากนั้นจึงเรียน reactivity และคอมโพเนนต์ ต่อด้วย Composition API และค่อยเรียน routing, state management และ server rendering ในภายหลัง
Reactivityแนวคิดสำคัญที่เป็นแกนกลาง
เมื่อคุณเปลี่ยนข้อมูลบางส่วน หน้าจอที่ขึ้นอยู่กับข้อมูลนั้นจะอัปเดตด้วยตัวเอง การทำความเข้าใจว่าค่าใดเป็น reactive รวมถึงสิ่งที่ computed properties และ watchers เพิ่มเข้ามา จะช่วยขจัดความสับสนส่วนใหญ่ในช่วงเริ่มต้นของการเรียน Vue
Options API และ Composition APIสองวิธีในการเขียนคอมโพเนนต์
Options API แบบดั้งเดิมจัดกลุ่มโค้ดตามประเภท เช่น data และ methods ส่วน Composition API ที่ใช้ script setup จะจัดกลุ่มตามฟีเจอร์ และทำให้สร้าง composables ที่นำกลับมาใช้ซ้ำได้ง่าย บทเรียนและโค้ดเบสจำนวนมากยังคงใช้ทั้งสองรูปแบบ ดังนั้นการอ่านโค้ดทั้งสองแบบจึงเป็นทักษะที่มีประโยชน์
Pinia, Vuex และ routerสิ่งที่แอปจริงต้องมีเพิ่มเติม
เมื่อแอปมีหลายหน้าจอ ก็ต้องมี routing เพื่อใช้เปลี่ยนไปมาระหว่างหน้าจอ และต้องมี shared store สำหรับข้อมูลที่มีคอมโพเนนต์มากกว่าหนึ่งตัวใช้งานร่วมกัน Pinia คือ store ปัจจุบันสำหรับ Vue ส่วน Vuex คือแบบก่อนหน้าที่โปรเจกต์เดิมจำนวนมากยังคงใช้
Nuxt และ server renderingเมื่อการค้นหาและความเร็วมีความสำคัญ
Nuxt ต่อยอดจาก Vue เพื่อเรนเดอร์หน้าเว็บบนเซิร์ฟเวอร์ ซึ่งช่วยให้โหลดครั้งแรกได้เร็วขึ้นและช่วยให้มองเห็นในผลการค้นหา โดยทั่วไปหัวข้อนี้เหมาะสำหรับเรียนในระยะที่สอง หลังจากคุณคุ้นเคยกับคอมโพเนนต์ routing และ state แล้ว
เหมาะกับคุณไหม
เหมาะกับใคร — และไม่เหมาะกับใคร
เหมาะกับคุณหากคุณ
- รู้จัก HTML และ JavaScript เล็กน้อย และต้องการเรียนรู้เฟรมเวิร์กแรก
- กำลังย้ายจาก Options API ไปยัง Composition API หรือจาก Vuex ไปยัง Pinia
- กำลังเตรียมตัวสัมภาษณ์งานนักพัฒนา Vue.js หรือสมัครงาน front-end งานแรก
- เรียนรู้ได้ดีกว่าด้วยการแก้คอมโพเนนต์ที่เสีย มากกว่าการอ่านเกี่ยวกับคอมโพเนนต์นั้น
- ต้องการบทเรียนสั้น ๆ ที่เรียนระหว่างเดินทางได้
ไม่ใช่เครื่องมือที่เหมาะ หากคุณ
- ไม่เคยเห็น HTML หรือ JavaScript มาก่อน — ควรเริ่มจากคอร์ส JavaScript ก่อน
- ต้องการปล่อยแอปสำหรับโปรดักชันจากโทรศัพท์ — แต่แล็ปท็อปก็ยังเป็นอุปกรณ์ที่ใช้ทำงานนั้น
- คาดหวังให้ทุกอย่างเรียนฟรี: คอร์สแรกและบททดลองเรียนฟรี ส่วน Pro จะปลดล็อกหลักสูตรทั้งหมด
- ต้องการเนื้อหา Vue.js อย่างเป็นทางการ — นี่คือแอปการเรียนรู้อิสระ
คำถาม
คำถามที่พบบ่อย
วิธีที่ดีที่สุดในการเรียนรู้ Vue.js บนโทรศัพท์คืออะไร
เรียนรู้ผ่านการรันคอมโพเนนต์ แทนที่จะอ่านเกี่ยวกับคอมโพเนนต์เพียงอย่างเดียว เรียน Vue: โค้ดและสร้าง คอมไพล์ single-file components บนอุปกรณ์โดยตรง ทำให้โปรเจกต์แบบมีผู้แนะนำ 20 โปรเจกต์ มิชชัน 28 มิชชัน และ Vue Lab ทั้งหมดใช้งานบนโทรศัพท์ได้ บทเรียนสั้น ๆ จาก 42 คอร์สจะพาคุณตั้งแต่ไวยากรณ์เทมเพลตไปจนถึง Nuxt 3 พร้อมคอร์สแรกที่เรียนฟรีเพื่อเริ่มต้น
แอปสอน Composition API และ Pinia หรือไม่
สอน เรียน Vue: โค้ดและสร้าง มีคอร์สเกี่ยวกับพื้นฐาน Vue 3 Composition API, ไวยากรณ์ script setup, composables และการจัดการ state ด้วย Pinia รวมถึง Vuex รุ่นเก่าสำหรับโปรเจกต์ที่มีอยู่แล้ว นอกจากนี้ Vue Lab ยังมี dojo สำหรับแปลงจาก Options API ไปเป็น Composition API ให้คุณเขียนคอมโพเนนต์แบบคลาสสิกใหม่ในรูปแบบสมัยใหม่
Options API และ Composition API ใน Vue แตกต่างกันอย่างไร
Options API จัดกลุ่มโค้ดของคอมโพเนนต์ตามประเภท เช่น data, methods และ computed ขณะที่ Composition API ที่ใช้ script setup จัดกลุ่มตามฟีเจอร์ และทำให้การสร้าง composables ที่นำกลับมาใช้ซ้ำทำได้ง่าย เรียน Vue: โค้ดและสร้าง สอน Composition API ด้วย script setup และมี dojo สำหรับแปลงจาก Options API ไปเป็น Composition API ใน Vue Lab เพื่อเขียนคอมโพเนนต์แบบคลาสสิกใหม่ในรูปแบบสมัยใหม่
ต้องรู้จัก JavaScript ก่อนเรียน Vue หรือไม่
การมีพื้นฐาน HTML และ JavaScript เล็กน้อยช่วยได้มาก เรียน Vue: โค้ดและสร้าง มุ่งเป้าไปที่ผู้เริ่มต้นที่รู้พื้นฐานและต้องการเรียนรู้เฟรมเวิร์กแรก จึงอธิบายแนวคิดของ Vue ตั้งแต่เริ่มต้น แต่ไม่ได้สอน JavaScript หากคุณยังไม่คุ้นเคยกับตัวแปรและฟังก์ชัน ควรเรียนคอร์ส JavaScript ก่อน
Vue Lab คืออะไร
Vue Lab คือพื้นที่ฝึกปฏิบัติใน เรียน Vue: โค้ดและสร้าง ประกอบด้วยเครื่องมือตรวจสอบ reactivity, ภารกิจล่าบั๊กประจำวันพร้อมคอมโพเนนต์ที่เสีย, ด่าน Style Lab ที่ให้คุณสร้างดีไซน์ให้ตรงกับเป้าหมายด้วย CSS, การดวล speed-build, dojo สำหรับแปลงจาก Options API ไปเป็น Composition API และคลัง My Components สำหรับเก็บสิ่งที่คุณสร้าง
มีเนื้อหา Nuxt 3 และการเรนเดอร์ฝั่งเซิร์ฟเวอร์หรือไม่
มี คอร์สขั้นสูงใน เรียน Vue: โค้ดและสร้าง ครอบคลุมการเรนเดอร์ฝั่งเซิร์ฟเวอร์ด้วย Nuxt 3, SSR streaming ด้วย Suspense และ Vue แบบ full-stack ด้วย Fastify และ authentication รวมถึงการทดสอบคอมโพเนนต์ด้วย Vitest และแอปแบบเรียลไทม์ด้วย WebSockets
แอปช่วยเตรียมตัวสัมภาษณ์งาน Vue.js หรือไม่
ช่วยได้ เรียน Vue: โค้ดและสร้าง มีคำถามสัมภาษณ์ Vue สำหรับตำแหน่ง front-end developer พร้อมแบบทดสอบ เซสชันทบทวนด้วยแฟลชการ์ด และชีตสรุป เนื้อหาคอร์สที่อยู่เบื้องหลังครอบคลุม reactivity, lifecycle, composables และการจัดการ state ซึ่งเป็นหัวข้อที่มักพบในการสัมภาษณ์
เรียน Vue: โค้ดและสร้าง ใช้งานฟรีหรือไม่
ดาวน์โหลดได้ฟรี คอร์สแรก บททดลองเรียนของทุกบทเรียน โปรเจกต์แบบมีผู้แนะนำโปรเจกต์แรก มิชชันแรก ภารกิจล่าบั๊กประจำวัน ด่าน Style Lab สามด่าน แบบทดสอบ คำถามสัมภาษณ์ และชีตสรุปใช้งานได้ฟรี ส่วนเวอร์ชันฟรีจะแสดงโฆษณา Pro จะปลดล็อกหลักสูตรและ Lab ทั้งหมด เมนเทอร์ AI และการสอบรับใบรับรอง พร้อมลบโฆษณา
แอปนี้สร้างโดยทีม Vue.js หรือไม่
ไม่ใช่ เรียน Vue: โค้ดและสร้าง เป็นแอปการเรียนรู้อิสระ และไม่มีส่วนเกี่ยวข้องหรือได้รับการรับรองจากโปรเจกต์ Vue.js แอปสอน Vue.js ในฐานะเฟรมเวิร์กโอเพนซอร์สผ่านคอร์สและแบบฝึกหัดของตัวเอง
มีใบรับรองหรือไม่
ใช่ การสอบปลายภาคซึ่งเป็นส่วนหนึ่งของ Pro จะทำให้คุณได้รับใบรับรองการเรียนจบ ใบรับรองนี้แสดงผลงานที่คุณทำ และไม่ใช่วุฒิการศึกษาที่ได้รับการรับรอง จึงเหมาะที่สุดเมื่อใช้ประกอบกับ components และโปรเจกต์ที่คุณสามารถอธิบายได้
รองรับแพลตฟอร์มและภาษาอะไรบ้าง
เรียน Vue: โค้ดและสร้าง ใช้งานบน iPhone ผ่าน App Store (iOS 15.1 หรือใหม่กว่า) และบน Android ผ่าน Google Play อินเทอร์เฟซมีให้บริการใน 22 ภาษา และแอปได้รับการจัดอันดับ 4+ บน App Store
เริ่มต้นใช้งาน
สร้าง Vue component แรกของคุณวันนี้
เริ่มต้นใช้งานได้ฟรีบน iOS และ Android ใน 22 ภาษา
เพิ่มเติมจาก CoddyKit
ใช้งานได้บน iOS และ Android