Skip to main content

แนะนำ Vue Component และ Concept

vue-component-core-concept สามารถดู video ของหัวข้อนี้ก่อนได้ ดู video

Document ต้นฉบับ:

เราเริ่มต้นจาก Component กันก่อน​

Component คือ 1 ใน core concept ของ vue. Component คือการแบ่งส่วนเว็บออกเป็นชิ้นเล็กๆทีรวม html, css และ javascript เอาไว้ในก้อนเดียวกัน นั่นคือ

  • template (html)
  • script (javascript logic)
  • style (css styling)

ซึ่ง Vue instance นั่นเองก็จะมีของที่ขนมาตามไม่ว่าจะเป็น data, method, computed properties และ life cycle ของตัวเอง

แล้วจุดเริ่มต้นของ Vue Application คือจุดไหน = Root component​

Root component คือ component ที่อยู่ส่วนบนสุดของ Application ยกตัวอย่างกับ เคสนี้คือ App.vue คือส่วนที่เป็น Root component ที่เป็นจุดเริ่มต้นของ Application

├─ index.html
├─ package.json
├─ public
├─ src
│   ├─ App.vue <--
│   ├─ assets
│   ├─ components
│   ├─ main.js
│   ├─ style.css
├─ vite.config.js

ซึ่งถ้าเราดู main.js นั้น (ซึ่งเป็นจุดเริ่มต้นของ javascript) มันจะมีคำสั่งเริ่มต้น application อยู่คือ createApp

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')
  • createApp คือจุดเริ่มต้นในการสร้าง vue application
  • component ที่ใส่ไป createApp = Root component
  • application จะไม่สามารถเกิดขึ้นได้หากไม่เกิดการ mount เข้า HTML DOM จริงๆ = ซึ่งนั่นก็คือ <div id="app"></div>
  • .mount('#app') คือการนำ javascript (ที่เขียนด้วย Vue component) ใส่กลับเข้าไปใน DOM html เพื่อให้สามารถ render จุดเริ่มต้นของ application ได้

ที่ index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

ซึ่งจริงๆ Vue instance สามารถสร้างมากกว่า 1 อันได้เช่น

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

แต่ตามปกติ สำหรับ Single Page Application นั้นสามารถใช้ id เป็นตัวแทนตัวเดียวก็ได้

พื้นฐานของ Component ประกอบด้วยอะไรบ้าง (Template Syntax)​

1 Component ประกอบด้วย 3 ส่วนใหญ่ๆ

<script>
/* ส่วนสำหรับวาง script ของ Vue*/
</script>

<template>
<!-- ส่วนสำหรับวาง html ของ vue-->
</template>

<style>
/* สำหรับใส่ style ของ component */
</style>

มาลอง Hello world Vue กันก่อน

  • เราจะทำการลบทั้งหมดใน App.vue
  • สร้างใหม่เป็นแบบนี้แทน โดย
    • เพิ่มตัวแปร 1 ตัวคือ message
    • สร้าง html div 1 ตัวที่แสดง message และใส่ class เข้าไป
    • และลองใช้ tag style แต่ง class นั้นดู
<script setup>
const message = 'Hello world'
</script>

<template>
  <div class="text">{{ message }}</div>
</template>

<style>
.text {
  font-size: 40px;
  color: blue;
}
</style>

ผลลัพธ์จะได้ออกมาเป็นแบบนี้ intro-01

เราจะมาเริ่มจากเรื่องแรก การ data binding กัน