Vue 3 ก้าวแรกสู่ Front-End Developer (Vue Components, Template, Props, State and calling REST API)

บทความนี้จะแนะนำ Vue 3 พื้นฐาน สำหรับก้าวแรกสู่การเป็น Front-End Developer และไม่ได้ใช้ package อะไรเพิ่มเลย โดยเนื้อหาจะครอบคลุม Components, Template, Props, State และการเรียก REST API ครับ แนะนำว่าควรมีพื้นฐาน HTML, CSS, JavaScript ก่อนนะครับ

เริ่มต้นเขียน Vue

สร้างโปรเจค

npm init vue@latest

แล้วจะมีให้ใส่ชื่อของโปรเจค และเลือก option ต่าง ๆ โดยสามารถเลือก No ก็ได้ครับ เพื่อทำตามตัวอย่างในบทความนี้

√ Project name: … vue-basic
√ 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
√ Add ESLint for code quality? … No / Yes

รัน development server

cd vue-basic
npm install
npm run dev

เข้า URL http://127.0.0.1:5173/ ด้วย web browser เห็นผลลัพธ์ดังภาพ

http://127.0.0.1:5173/

MyBar Component

สร้างแถบด้านบนสำหรับเป็นเมนู ด้วยการสร้าง Component ที่มีชื่อว่า MyBar
สร้างไฟล์ src/components/MyBar.vue

• ใน tag template ใส่ส่วนของการแสดงผลด้วย html สำหรับการแสดงแถบเมนู
• ใน tag style (ใส่ scoped เพื่อระบุว่าใช้สำหรับ component นี้เท่านั้น) ใส่การตกแต่ง Component MyBar ด้วย CSS โดยตกแต่งให้เป็นแถบแนวนอนและเพิ่มสีเข้าไป โดยดูตัวอย่างจาก https://www.w3schools.com/css/css_navbar.asp

แก้ไขไฟล์ src/App.vue เพื่อเพิ่ม Component MyBar เข้าไปในหน้าเว็บ

แก้ไขไฟล์ src/assets/main.css เพื่อลบส่วนของ CSS ที่มาตอนสร้างโปรเจคทิ้งไป

ผลลัพธ์ดังภาพ

http://127.0.0.1:5173/

MyCard Component

สร้าง Component สำหรับเป็นการ์ดแสดงข้อมูล โดยดูตัวอย่างที่เป็น HTML และ CSS จาก https://www.w3schools.com/howto/howto_css_cards.asp
สร้างไฟล์ src/components/MyCard.vue

แก้ไขไฟล์ src/App.vue เพื่อเพิ่ม Component MyCard เข้าไปหลาย ๆ อัน และเพิ่มใน tag style เพื่อให้รองรับการแสดงผลแบบ responsive รองรับทุกอุปกรณ์ โดยใช้ grid (แถวและคอลัมน์)
โดยถ้าหน้าจอขนาดเล็ก (576px) จะแสดง 1 Component/คอลัมน์ ต่อ 1 แถว
แต่ถ้าเป็นหน้าจอขนาดใหญ่ (992px) จะแสดง 3 Component/คอลัมน์ ต่อ 1 แถว

ผลลัพธ์ดังภาพ

http://127.0.0.1:5173/

Vue Props

ก่อนอื่นให้ดาวน์โหลดไฟล์ข้อมูล attractions.json จาก:
https://melivecode.com/file/?f=json/attractions.json
จากนั้นนำไฟล์ไปใส่ที่ src/attractions.json

แก้ไขไฟล์ src/App.vue เพื่ออ่านค่าจาก json มาเก็บที่ตัวแปร items (บรรทัดที่ 4)

Props ใช้สำหรับการส่งค่าเข้าไปใน Component เพื่อนำค่าดังกล่าวไปแสดงผลใน Component โดยสามารถส่งค่าเข้าไปดังตัวอย่างบรรทัดที่ 15–20 (ค่า เป็น array ของ object จึงสามารถใช้ index ในการดึงค่ามาแต่ละ object ได้) โดยใช้เป็น Attribute Bindings v-bind เพื่อส่งทุก ๆ property ใน object เข้าไปใน Component

แก้ไขไฟล์ src/components/MyCard.vue
เพิ่ม Props เข้าไปใน tag script โดยระบุว่ามี Props อะไรที่ส่งมาบ้างแบบ array (บรรทัดที่ 12) จากนั้นเราจะสามารถใช้ค่าของ Props ใน template ในบรรทัดที่ 3–6

ผลลัพธ์ดังภาพ

แก้ไขไฟล์ src/App.vue โดยใช้ v-for เพื่อ loop ข้อมูลมาแสดงผลพร้อมทั้งส่ง Props เข้าไปด้วย (บรรทัดที่ 9)

ผลลัพธ์ดังภาพ

State และเรียก REST API

แทนที่จะเป็นการอ่านไฟล์ json สามารถเปลี่ยนมาเรียก REST API (GET) ได้จาก: https://www.mecallapi.com/api/attractions/

แก้ไขไฟล์ src/App.vue ใน tag script

• เพิ่มฟังก์ชัน data เพื่อประกาศตัวแปร State ชื่อว่า items (บรรทัดที่ 7) เป็น array เพื่อใช้ในการเก็บข้อมูลที่ได้จากการเรียก REST API
• เพิ่มฟังก์ชัน created เพื่อเรียก REST API โดย created จะถูกเรียกหลังจากที่ Component ถูกสร้างขึ้น

ผลลัพธ์บนหน้าเว็บยังเป็นเหมือนเดิม แต่เปลี่ยนมาเรียกใช้ REST API แทน แสดงว่าถ้ามีการเพิ่มเติมข้อมูลใน REST API หน้าแสดงผล Front-End ก็จะมีการเปลี่ยนแปลงด้วย

บทความโดย อ.ผศ.ดร.กานต์ ยงศิริวิทย์
วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต