การแนะนำ

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 จะสลับการมองเห็นองค์ประกอบโดยใช้สไตล์ CSS
  • v-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 .