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 ก็จะมีการเปลี่ยนแปลงด้วย

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

--

--

Lecturer at Digital Innovation Technology, Rangsit University

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Karn Yongsiriwit

Karn Yongsiriwit

474 Followers

Lecturer at Digital Innovation Technology, Rangsit University