
Vue อ่านว่า วิว ออกเสียงแบบ View ในภาษาอังกฤษ จุดเริ่มต้นของ Vue เลยคือมันทำหน้าที่เป็น View ใน MVC (Model View Controller) นั่นแหละ เป็น JavaScript Framework ที่พัฒนาโดย Evan You เอาไว้สำหรับพัฒนาพวก UI (User Interface) ปัจจุบัน คือ Vue เวอร์ชั่น 3 ครับ
ในบทความนี้ ผมจะพูดถึง Vue 3 นะครับ
จากโค๊ดแบบนี้ คือเป็นการสร้างปุ่ม button และเมื่อกด ก็จะเพิ่มค่า count ทีละ 1 ค่าจะเปลี่ยนทันทีโดยไม่ต้อง refresh หน้าจอ
import { createApp } from 'vue'
createApp({ data() { return { count: 0 } }}).mount('#app')
และ template จะมีหน้าตาแบบนี้
<div id="app"> <button @click="count++">Count is: {{ count }}</button></div>
- Declarative Rendering: จะคล้ายๆกับ HTML แต่มีส่วนเพิ่มเติม ที่ทำให้เราสามารถใช้ JavaScript ลงใน HTML ได้
- Reactivity: คือการที่ Vue จะทำการ track JavaScript state และทำการเปลี่ยนแปลงค่า DOM ให้อัตโนมัติ
Single File Components
การเขียน Vue แบบ Single File Component หรือ SFC คือทุกอย่าง จะอยู่ในไฟล์เดียว สมมติชื่อไฟล์ hello.vue ก็จะประกอบไปด้วย
- ส่วน
<script>
เป็นส่วนการทำงานของ Logic - ส่วน
<template>
เป็นส่วนแสดงผล เหมือน HTML - ส่วน
<style>
ก็เป็นส่วนของ CSS
<script>export default { data() { return { count: 0 } }}</script>
<template> <button @click="count++">Count is: {{ count }}</button></template>
<style scoped>button { font-weight: bold;}</style>
สร้างโปรเจ็ค Vue
เราสามารถสร้างโปรเจ็ค Vue ได้ด้วยการใช้คำสั่งด้านล่างนี้
npm init vue@latest
จากนั้นก็ทำการเลือกสิ่งที่ต้องการได้เลย ผมตั้งชื่อให้มันว่า hello-vue ส่วนตัวเลือก ส่วนใหญ่เลือก No เพราะเราจะเริ่มต้นจากง่ายๆก่อน
Vue.js - The Progressive JavaScript Framework
✔ Project name: … hello-vue✔ 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✔ Add Prettier for code formatting? … No / Yes
เมื่อได้โปรเจ็คแล้ว ก็เข้าไปที่โฟลเดอร์โปรเจ็ค และติดตั้ง dependencies
cd hello-vuenpm install
จะสังเกตในโฟลเดอร์ที่ถูกสร้างขึ้นมา มีไฟล์เริ่มต้นอยู่พอสมควร (ลองศึกษาเพิ่มเติมดูทีหลังได้ครับ) ตอนนี้ลอง start server ขึ้นมา ก่อน
npm run dev
ตัวเว็บเราที่รันบน local ก็จะอยู่ที่ url http://localhost:5173/ เมื่อเปิดหน้า จะเห็นหน้าตาแบบนี้
ลองสร้างไฟล์ ขึ้นมาไฟล์นึงชื่อ CounterButton.vue
ในโฟลเดอร์ components โดยเอาโค๊ดตัวอย่างด้านบนมาใส่
<script>export default { data() { return { count: 0 } }}</script>
<template> <button @click="count++">Count is: {{ count }}</button></template>
<style scoped>button { font-weight: bold;}</style>
จากนั้นแก้ไฟล์ App.vue
โดยเพิ่ม Component CounterButton ที่เราเพิ่งสร้างมาลงไป ต่อท้ายตรง HelloWorld
import CounterButton from './components/CounterButton.vue'
<div class="wrapper"> <HelloWorld msg="You did it!" /> <CounterButton></CounterButton></div>
ไฟล์ App.vue
สุดท้ายจะได้เป็นแบบนี้
<script setup>import HelloWorld from './components/HelloWorld.vue' import TheWelcome from'./components/TheWelcome.vue' import CounterButton from './components/CounterButton.vue'</script>
<template> <header> <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper"> <HelloWorld msg="You did it!" /> <CounterButton></CounterButton> </div> </header>
<main> <TheWelcome /> </main></template>
<style scoped>// style</style>
ลองกลับไปดูหน้าเว็บ http://localhost:5173 จะเห็นว่ามีปุ่มเพิ่มมา และทุกครั้งที่เรากด ค่าจะเพิ่มทีละ 1 นั่นเอง
จบแล้วครับ บทแรก บทความนี้ก็เป็นเพียงคำแนะนำเบื้องต้นเท่าไหร่ สิ่งสำคัญคือ อยากให้ผู้อ่านลองดูตัวอย่างโค๊ดในโปรเจ็คที่สร้าง ลองทำความเข้าใจด้วยตัวเอง ปรับแต่งค่า อ่านค่าดูครับ 💪
สำหรับบทความนี้ก็เป็นบทความเริ่มต้น รอติดตามบทความถัดๆไปนะครับ จะพูดถึง Concept ของ Vue รวมถึงการเขียน ว่าเค้าใช้แบบไหน และต่างกันอย่างไร เช่น Option API และ Composition API
- Authors
-
Chai Phonbopit
เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust