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 เห็นผลลัพธ์ดังภาพ
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 ที่มาตอนสร้างโปรเจคทิ้งไป
ผลลัพธ์ดังภาพ
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 แถว
ผลลัพธ์ดังภาพ
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 ก็จะมีการเปลี่ยนแปลงด้วย
บทความโดย อ.ผศ.ดร.กานต์ ยงศิริวิทย์
วิทยาลัยนวัตกรรมดิจิทัลเทคโนโลยี มหาวิทยาลัยรังสิต
