Vue.js คืออะไร + สอนใช้งาน Vue.js เบื้องต้น

Vue Mar 5, 2023

Vue อ่านว่า วิว ออกเสียงแบบ View ในภาษาอังกฤษ จุดเริ่มต้นของ Vue เลยคือมันทำหน้าที่เป็น View ใน MVC (Model View Controller) นั่นแหละ เป็น JavaScript Framework ที่พัฒนาโดย Evan You เอาไว้สำหรับพัฒนาพวก UI (User Interface) ปัจจุบัน คือ Vue เวอร์ชั่น 3 ครับ

ในบทความนี้ ผมจะพูดถึง Vue 3 นะครับ ส่วน Vue 2 เนี่ย สามารถอ่านได้จากบทความเก่าที่ผมเคยเขียนไว้ครับ

จากโค๊ดแบบนี้ คือเป็นการสร้างปุ่ม 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-vue
npm 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