การแนะนำ
Vue.js เป็นเฟรมเวิร์ก JavaScript แบบก้าวหน้าที่ได้รับความนิยมในหมู่นักพัฒนาส่วนหน้าเนื่องจากความเรียบง่ายและความสามารถรอบด้าน ไม่ว่าคุณจะเพิ่งเริ่มพัฒนาส่วนหน้าหรือต้องการขยายทักษะ คู่มือสำหรับผู้เริ่มต้นนี้จะมอบรากฐานที่มั่นคงให้คุณในการเริ่มสร้างแอปพลิเคชันเว็บแบบโต้ตอบด้วย Vue.js
วิว 3 คืออะไร?
Vue 3 ต่อยอดความสำเร็จของ Vue 2 รุ่นก่อน และแนะนำการปรับปรุงที่สำคัญหลายประการ นี่คือคุณสมบัติที่สำคัญบางประการของ Vue 3:
- Composition API: Vue 3 ขอแนะนำ Composition API ซึ่งเป็นวิธีที่มีประสิทธิภาพในการจัดระเบียบและนำตรรกะกลับมาใช้ใหม่ภายในส่วนประกอบต่างๆ ให้ความยืดหยุ่นมากกว่าและปรับปรุงการจัดระเบียบโค้ดเมื่อเทียบกับ Options API ใน Vue 2
- ระบบปฏิกิริยา: ระบบปฏิกิริยาของ Vue 3 ได้รับการปรับปรุงเพื่อให้ประสิทธิภาพที่ดีขึ้นและการรองรับ TypeScript ระบบที่ใช้พร็อกซีใหม่ช่วยให้สามารถติดตามการพึ่งพาได้อย่างละเอียด ส่งผลให้การอัปเดตมีประสิทธิภาพมากขึ้น
- แฟรกเมนต์และเทเลพอร์ต: Vue 3 แนะนำแฟรกเมนต์ ซึ่งช่วยให้คอมโพเนนต์ส่งคืนองค์ประกอบรูทหลายรายการ Teleport อีกหนึ่งคุณสมบัติใหม่ ช่วยให้สามารถเรนเดอร์เนื้อหาในส่วนต่างๆ ของแผนผัง DOM ได้ ทำให้มีประโยชน์สำหรับโมดัล คำแนะนำเครื่องมือ และอื่นๆ
การตั้งค่าโครงการ Vue 3
ในการเริ่มต้นโปรเจ็กต์ Vue 3 คุณสามารถใช้ Vue CLI ซึ่งเป็นเครื่องมือบรรทัดคำสั่งที่ออกแบบมาโดยเฉพาะสำหรับโปรเจ็กต์ Vue ต่อไปนี้คือวิธีตั้งค่าโปรเจ็กต์ Vue 3 ด้วย Vue CLI
- ติดตั้ง Vue CLI ทั่วโลกโดยเรียกใช้
npm install -g @vue/cli
- สร้างโปรเจ็กต์ Vue 3 ใหม่โดยดำเนินการ
vue create project-name
- เลือกค่าที่ตั้งล่วงหน้าเริ่มต้นหรือเลือกคุณสมบัติด้วยตนเองตามความต้องการของโครงการของคุณ
- เมื่อสร้างโปรเจ็กต์แล้ว ให้นำทางไปยังไดเร็กทอรีโปรเจ็กต์โดยใช้
cd project-name
- เริ่มต้นเซิร์ฟเวอร์การพัฒนาด้วย
npm run serve
และเข้าถึงโปรเจ็กต์ที่ URL ในเครื่องที่ให้ไว้
นอกจากนี้ คุณยังสามารถตั้งค่าโปรเจ็กต์ของคุณด้วย Vite ซึ่งเป็นเครื่องมือสร้างใหม่ในระบบนิเวศ Vue ที่มีเซิร์ฟเวอร์การพัฒนาที่เร็วกว่า Vue CLI อย่างมาก (เร็วกว่า 10–100 เท่า)
ข้อกำหนดเบื้องต้น:
- ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js บนเครื่องของคุณแล้ว คุณสามารถดาวน์โหลดได้จากเว็บไซต์อย่างเป็นทางการ: https://nodejs.org
คำสั่งนี้จะติดตั้งและดำเนินการ create-vue ซึ่งเป็นเครื่องมือนั่งร้านโครงการ Vue อย่างเป็นทางการ คุณจะได้รับข้อความแจ้งสำหรับคุณสมบัติเสริมหลายอย่าง เช่น TypeScript และการสนับสนุนการทดสอบ:
✔ Project name: … <your-project-name> ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit testing? … No / Yes ✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / Yes Scaffolding project in ./<your-project-name>... Done.
หากคุณไม่แน่ใจเกี่ยวกับตัวเลือก ให้เลือก No
โดยกด Enter ทันที เมื่อสร้างโปรเจ็กต์แล้ว ให้ทำตามคำแนะนำเพื่อติดตั้งการขึ้นต่อกันและเริ่มเซิร์ฟเวอร์ dev:
> cd <your-project-name> > npm install > npm run dev
- Vite จะสร้างโปรเจ็กต์ Vue 3 ของคุณและเปิดตัวเซิร์ฟเวอร์การพัฒนา
- คุณสามารถเข้าถึงแอป Vue ของคุณได้จาก URL ท้องถิ่นที่ให้ไว้ (เช่น
http://localhost:3000
)
และนั่นมัน! ตอนนี้คุณได้ตั้งค่าโปรเจ็กต์ Vue 3 ด้วย Vite แล้ว คุณสามารถเริ่มสร้างส่วนประกอบ Vue ของคุณและเขียนตรรกะของแอปพลิเคชันของคุณภายในไดเร็กทอรี src
การสร้างองค์ประกอบ Vue แรกของคุณ
ส่วนประกอบต่างๆ จะสร้างบล็อคของแอปพลิเคชัน Vue ใน Vue 3 คุณสามารถใช้ประโยชน์จาก Composition API เพื่อสร้างส่วนประกอบที่นำมาใช้ซ้ำและเขียนได้ ต่อไปนี้เป็นวิธีสร้างองค์ประกอบ Vue 3 แรกของคุณ:
- ในไดเร็กทอรีโปรเจ็กต์ ให้นำทางไปยังโฟลเดอร์
src/components
- สร้างไฟล์ใหม่ชื่อ
MyComponent.vue
- เปิดไฟล์และกำหนดเทมเพลต สคริปต์ และสไตล์สำหรับส่วนประกอบโดยใช้รูปแบบคอมโพเนนต์ไฟล์เดียว
- ภายในส่วนสคริปต์ ให้นำเข้าฟังก์ชันที่จำเป็นจากแพ็คเกจ
vue
เช่นdefineComponent
และreactive
- ใช้ฟังก์ชัน
defineComponent
เพื่อสร้างส่วนประกอบใหม่และกำหนดเทมเพลต คุณสมบัติข้อมูลเชิงโต้ตอบ และวิธีการที่ใช้ Composition API
<script setup> import { ref } from 'vue' const count = ref(0) </script> <template> <button @click="count++">You clicked me {{ count }} times.</button> </template>
นี่คือส่วนประกอบปุ่มอย่างง่ายที่มีสถานะการนับ คุณยังสามารถค้นหาตัวอย่างนี้ได้ในเอกสารประกอบของ Vue
คำสั่ง Vue 3
คำสั่งใน Vue 3 นั้นคล้ายคลึงกับคำสั่งใน Vue 2 ซึ่งช่วยให้คุณสามารถจัดการ DOM และเพิ่มลักษณะการทำงานแบบไดนามิกให้กับส่วนประกอบของคุณ คำสั่งที่ใช้กันทั่วไปใน Vue 3 ได้แก่:
v-bind
: คำสั่งv-bind
ช่วยให้คุณสามารถผูกข้อมูลส่วนประกอบกับแอตทริบิวต์ HTML หรืออุปกรณ์ประกอบฉาก โดยอัปเดตค่าแบบไดนามิกตามการเปลี่ยนแปลงในข้อมูลv-if
และv-show
: คำสั่งเหล่านี้ควบคุมการมองเห็นองค์ประกอบตามเงื่อนไข คำสั่งv-if
จะลบหรือเพิ่มองค์ประกอบใน DOM ในขณะที่คำสั่งv-show
จะสลับการมองเห็นองค์ประกอบโดยใช้สไตล์ CSSv-for
: คำสั่งv-for
ช่วยให้คุณสามารถวนซ้ำอาร์เรย์หรือออบเจ็กต์เพื่อแสดงรายการองค์ประกอบแบบไดนามิก มันสร้างหลายอินสแตนซ์ขององค์ประกอบตามข้อมูลที่ให้ไว้v-on
: คำสั่งv-on
แนบตัวฟังเหตุการณ์เข้ากับองค์ประกอบและทริกเกอร์วิธีการหรือนิพจน์เมื่อเหตุการณ์เกิดขึ้น ช่วยให้คุณสามารถจัดการกับการโต้ตอบของผู้ใช้และตอบสนองตามนั้นv-model
: คำสั่งv-model
ช่วยลดความยุ่งยากในการผูกข้อมูลแบบสองทางสำหรับการป้อนแบบฟอร์ม โดยจะซิงค์ค่าอินพุตกับคุณสมบัติข้อมูลของส่วนประกอบโดยอัตโนมัติ
การจัดการข้อมูลด้วย Vue
ref
— รับค่าภายในและส่งกลับออบเจ็กต์การอ้างอิงแบบโต้ตอบและไม่แน่นอน ซึ่งมีคุณสมบัติเดียว.value
ที่ชี้ไปที่ค่าภายใน ดูตัวอย่างด้านบน- ใน Vue 3 คุณสามารถใช้ฟังก์ชัน
reactive
จากแพ็กเกจvue
เพื่อกำหนดอ็อบเจ็กต์ข้อมูลเชิงโต้ตอบ ออบเจ็กต์เหล่านี้จะทริกเกอร์การอัปเดตใน UI โดยอัตโนมัติเมื่อคุณสมบัติเปลี่ยนแปลง - คุณสมบัติที่คำนวณ: คุณสมบัติที่คำนวณเป็นฟังก์ชันที่คำนวณและค่าแคชตามการพึ่งพาเชิงรับ ช่วยให้คุณสามารถคำนวณหรือแปลงข้อมูลและให้ผลลัพธ์ที่มีประสิทธิภาพ
- ผู้เฝ้าดู: ผู้เฝ้าดูอนุญาตให้คุณดำเนินการเมื่อคุณสมบัติข้อมูลเฉพาะมีการเปลี่ยนแปลง ด้วยการใช้ฟังก์ชัน
watch
จากแพ็คเกจvue
คุณสามารถกำหนดตรรกะที่กำหนดเองเพื่อให้ทำงานเมื่อข้อมูลที่เฝ้าดูเปลี่ยนแปลงได้
บทสรุป
ยินดีด้วย! ตอนนี้คุณได้รับการแนะนำให้รู้จักกับโลกของ Vue.js และได้รับความเข้าใจที่มั่นคงเกี่ยวกับแนวคิดหลักบางประการแล้ว ในส่วนที่สอง เราจะสำรวจแนวคิดขั้นสูงบางอย่าง เช่น เหตุการณ์และวิธีการ การเชื่อมโยงแบบฟอร์มและอินพุต การกำหนดเส้นทาง สไตล์ และการปรับใช้
โปรดจำไว้ว่า การฝึกฝนและการทดลองเป็นกุญแจสำคัญในการเรียนรู้เทคโนโลยี ดังนั้นจงสร้างและสำรวจความเป็นไปได้ที่น่าตื่นเต้นด้วย Vue!
เนื้อหาเพิ่มเติมได้ที่ PlainEnglish.io.
ลงทะเบียนเพื่อรับ จดหมายข่าวรายสัปดาห์ฟรี ของเรา ติดตามเราบน Twitter, LinkedIn, YouTube และ Discord .