แนะนำ เริ่มต้น Vue

เริ่มลง Vuejs (จากนี้จะขอเรียก Vue)

เพื่อให้ง่ายต่อการลง project เราจะขอใช้ CLI ที่ชื่อ Vite ในการลง Project กัน

Vite คือ bulid tool ที่ช่วยทำให้ build และ run project สำหรับพวก modern web framework (อย่าง vue, react, svelte ก็ใช้ผ่านตัวนี้ได้หมด) ข้อดีคือมันไวมากในการ bulid run แต่ละที (เป็นตัวที่แนะนำสำหรับตอนนี้)

เริ่มต้น Project vue กัน (ก่อนอื่นต้องลง nodejs ก่อนเพื่อให้สามารถใช้งาน npm ได้)

npm create vite@latest

หลังจากนั้นเริ่ม start project vue ขึ้นมา

npm create vite@latest new-app -- --template vue

เมื่อ run เรียบร้อยเราจะได้ project vue ที่มี structure แบบนี้มา

├─ index.html -- ไฟล์ html เริ่มต้น
├─ package.json -- รวม package เอาไว้
├─ public
├─ src
│   ├─ App.vue
│   ├─ assets
│   ├─ components -- folder รวม components ของ Vue
│   ├─ main.js -- ไฟล์หลักของ Vue
│   ├─ style.css -- ไฟล์หลักของ css
├─ vite.config.js -- config ของ vite

ลอง run ด้วย

npm install
npm run dev

จะได้หน้าเว็บออกมาได้ ถือว่าเราพร้อมแล้วสำหรับการ development

สำหรับ Course ทั้งหมดนี้

• เราจะใช้ Vue 3
• เป็น style แบบ Composition

2 style นี้ต่างกันยังไง ?

ถ้าสังเกตุใน Vue จะมีการเขียน Code 2 styles อยู่คือ Option API และ Composition API https://vuejs.org/guide/introduction.html#api-styles

จากบทความ: https://blog.logrocket.com/comparing-vue-3-options-api-composition-api/

Option API (ท่าที่ใช้มาแต่เดิมของ Vue 2)

• Pattern ต้องเป็นแบบนี้เสมอเปลี่ยนไม่ได้
• ข้อดี คือ ขึ้นงานง่ายกว่า (เนื่องจากเป็น Pattern ที่กำหนดไว้)
• ข้อพิจารณา คือ ส่วน code ระหว่าง data และ method แยกกัน หากจัดการ code ไม่ดีส่วน code จะงงมากและ method อาจจะอยู่ผสมๆกันได้

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    increment() {
      this.count++
    },
  },
}
</script>

Composition API (ท่าที่เพิ่มมาใหม่ของ Vue 3)

• Pattern ไม่จำเป็นต้องเป็นแบบเดิมเสมอ ขอแค่จัดการผ่านตัวแปร reactive (ซึ่งเดี๋ยวมีอธิบายใน Session ต่อไป) ก็สามารถจัดการได้ตามใจชอบ
• ข้อดี คือ code จะอิสระกว่า สามารถจัดการ code ได้ตามใจชอบกว่า
• ข้อพิจารณา คือ สำหรับมือใหม่ ที่ยังคิด pattern code ไม่ออก อาจจะงงได้ว่า ส่วนไหนควรเพิ่มไว้ตรงไหนได้ (ไม่ได้มี Guideline เป๊ะๆอย่าง Option API)

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment,
    }
  },
}
</script>

หรือสามารถเขียนได้อีกแบบ

<script setup>
  import { ref } from 'vue'

  const count = ref(0)

  const increment = () => {
    count.value++
  }
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

ซึ่งสำหรับตลอดทั้ง Course นี้เราจะ

• ทั้ง Option API และ Composition API ยังคงใช้พัฒนาได้ทั้ง 2 วิธีแต่เพื่อให้ Course นี้ไม่เกิดความสับสนในตัว code ทั้งหมดเราจะใช้วิธี Composition API ในการ code
• เราจะใช้ Document เป็น Reference ตลอดทั้ง Course

เพื่อให้ทุกคนสามารถไปอ่านเอกสารต้นฉบับที่เป็น Reference ได้