ในเนื้อหาตอนที่ผ่านมาเราได้รู้จักภาพรวมของ vue project และ
vue appliction แบบกว้างๆ ไปแล้ว เนื้อหานี้เราจะลงไปรายละเอียด
รวมถึงการสร้าง Vue Application จากจุดเริ่มต้น โดยเนื้อหานี้เราจะ
ดัดแปลงโปรเจกต์เริ่มต้น ให้เหลือเฉพาะไฟล์เบื้องต้นเท่านั้น คือไฟล์ main.js
และ App.vue ตามโครงสร้างดังรูปด้านล่าง
การสร้าง Vue Application
ในทุกๆ Vue Application จะต้องมีการสร้าง Application instance ด้วยฟังก์ชั่น createApp() เสมอ Application instance
เป็นจุดเริ่มต้นที่ใช้ในการสร้างและทำงาน กับแอปพลิเคชัน Vue.js ทั้งหมด โดยใช้ API และเมธอดต่าง ๆ ที่ Vue.js มีให้ในอ็อบเจกต์นี้
Application instance ใน Vue.js คือการสร้างและกำหนดค่าของอ็อบเจกต์หลักของ Vue ที่ใช้ในการสร้างและจัดการกับแอปพลิเคชัน
Vue.js ทั้งหมดของคุณ เมื่อคุณใช้ createApp() เพื่อสร้างแอปพลิเคชัน Vue.js มันจะสร้าง instance ของ Vue application ที่เรียกว่า
application instance
Application instance คืออะไร ทำหน้าที่อะไร
Application instance จะใช้เก็บข้อมูลและการกำหนดค่าต่าง ๆ ที่เกี่ยวข้องกับ
แอปพลิเคชัน Vue.js ซึ่งรวมถึง:
1.Component: รายการของ components ที่ใช้ในแอปพลิเคชัน
2.Directive: รายการของ directives ที่ใช้ในแอปพลิเคชัน
3.Mixins: รายการของ mixins ที่ใช้ในแอปพลิเคชัน
4.Plugins: รายการของ plugins ที่ใช้ในแอปพลิเคชัน
5.Options: การกำหนดค่าต่าง ๆ ที่เกี่ยวข้องกับการกำหนดค่าและ
การทำงานของแอปพลิเคชัน Vue.js อื่น ๆ
ให้เราแก้ไขไฟล์ main.js เป็นดังนี้
ไฟล์ main.js
import { createApp } from 'vue'
const app = createApp({
/* root component options */
})
โค้ดข้างต้นจะมีการสร้าง application instance ของ Vue.js โดยใช้ฟังก์ชัน
createApp ที่ import เข้ามาจากโมดูล vue ซึ่งเป็นฟังก์ชันสำหรับสร้างแอปพลิเคชัน
Vue.js ใหม่
import { createApp } from 'vue':
คำสั่งนี้ใช้ในการ import ฟังก์ชัน createApp จากโมดูล vue เพื่อใช้ในการสร้าง
application instance ของ Vue.js
*const app = createApp({ / root component options */ })**:
ฟังก์ชัน createApp นี้ใช้ในการสร้าง application instance ใหม่ของ Vue.js โดย
จะรับ object ที่มีคุณสมบัติและการกำหนดค่าต่าง ๆ สำหรับ root component ของ
แอปพลิเคชัน Vue.js ซึ่งจะถูกใช้เป็นจุดเริ่มต้นในการสร้างและแสดง UI ของแอปพลิเคชัน
Vue.js นั้น ๆ โดย object ที่ส่งเข้าไปจะเป็น options ของ root component ซึ่ง
สามารถประกอบด้วย properties เช่น data, methods, computed, watch,
template, components, directives, filters, และอื่น ๆ ตามที่ต้องการใช้งาน
หลังจากที่ได้ application instance มาแล้ว เราสามารถใช้ instance นี้ในการเรียกใช้งาน
methods และ APIs ต่าง ๆ ของ Vue.js ที่เกี่ยวข้องกับการจัดการและพัฒนาแอปพลิเคชัน Vue.js ของเราได้
เกี่ยวกับ Root Component
ทุกๆแอป จะมี root component ที่สามารถมี component ลูกรวมกันอยู่ภายในได้ และ
โดยทั่วไปแล้ว ตัว root component จะเป็นค่าที่ถูกส่งเข้าไปในคำสั่ง createApp ให้เรา
แก้ไขไฟล์ main.js เล็กน้อยเป็นดังนี้
import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'
const app = createApp(App)
ในไฟล์ App.vue ในขั้นตอนนี้ เราจะเป็นไฟล์เปล่า ไม่มีข้อมูลอะไร เมื่อเราแก้ไขไฟล์
main.js ก็จะเกิด error ขึ้นตามรูปด้านล่าง
ทั้งนี้ก็เพราะในไฟล์ App.vue เราจะต้องกำหนดรูปแบบอย่างน้อยให้มี <template>
หรือ <script>
[plugin:vite:vue] At least one <template> or <script>
is required in a single file component.
ให้เราสร้าง template โดยให้มีปุ่มคำว่า Click Me เพิ่มเข้าไป ดังนี้
<template>
<button>Click Me</button>
</template>
เมื่อกำหนดตามตัวอย่างแล้ว error ก็จะหายไป แต่ตอนนี้หน้าแอปเราจะยังไม่ได้แสดงอะไร
เพราะเรายังไม่ได้ทำการ mount
Single File Component ใน Vue.js คืออะไร
Single File Component (SFC) ใน Vue.js คือ วิธีการเขียน component โดย
ใช้ไฟล์เดียวที่ประกอบด้วย HTML, CSS, และ JavaScript ทั้งหมดในไฟล์เดียว โดยมัก
จะใช้นามสกุล .vue เป็นส่วนขยายของไฟล์ ตัวอย่างเช่น HelloWorld.vue
ส่วนประกอบของ Single File Component ประกอบด้วย:
1.<template>: ส่วนที่ใช้สำหรับเขียน HTML หรือ template ของ component
2.<script>: ส่วนที่ใช้สำหรับเขียน JavaScript ที่ใช้ในการกำหนด behavior และ logic
ของ component โดยมักจะใช้ Composition API หรือ Options API
* Composition API / Options API จะได้อธิบายต่อไป
3.<style>: ส่วนที่ใช้สำหรับเขียน CSS หรือ style ของ component ซึ่งสามารถใช้
scoped CSS ได้เพื่อป้องกันการชนกับ style ของ component อื่น ๆ
ใน Single File Component นี้ ทุกอย่างอยู่ในไฟล์เดียว ทำให้ง่ายต่อการจัดการและ
เข้าใจโค้ด และยังสะดวกต่อการแก้ไขและพัฒนา component ใน Vue.js ได้อีกด้วย
นอกจากนี้ยังเป็นที่นิยมในการใช้งานและเรียนรู้ Vue.js อีกด้วย เนื่องจากมีความสะดวก
และเข้าใจได้ง่าย
ในแอปพลิเคชั่นที่มีความซับซ้อนจะมี component ซ้อนกันหลายชั้น ดูตัวอย่างโครงสร้าง
ตามรูปแบบด้านล่าง
App (root component) ├─ TodoList │ └─ TodoItem │ ├─ TodoDeleteButton │ └─ TodoEditButton └─ TodoFooter ├─ TodoClearButton └─ TodoStatistics
การ mount แอปพลิเคชัน Vue.js
ทบทวนอีกครั้งจากบทความที่แล้ว การ mount แอปพลิเคชัน Vue.js หมายถึงการเชื่อมโยง
(หรือใช้) แอปพลิเคชัน Vue.js กับ element บนหน้า HTML ของเว็บไซต์ โดยที่แอปพลิเคชัน
Vue.js จะถูกเริ่มต้นและทำงานบน element นั้น ๆ ใน DOM (Document Object Model) ของเว็บไซต์
ใน Vue.js, เราใช้ createApp() เพื่อสร้าง instance ของแอปพลิเคชัน Vue.js และเรียก
เมธอด mount() เพื่อ mount แอปพลิเคชัน Vue.js นี้บน element ใด ๆ ใน DOM
ของเว็บไซต์
ตัวอย่างด้านบน เราได้ทำการแก้ไขไฟล์ App.vue โดยเพิ่มปุ่มเข้าไปใน template
แต่ Application instance จะไม่แสดงผลลัพธ์หรือมีการเร็นเดอร์ใดๆ จนกว่าจะมีการ
เรียกใช้งานคำสั่ง .mount() โดยจะกำหนด DOM ที่ต้องการให้เป็น container เข้าไป
ในคำสั่งดังกล่าว เพื่อแสดงผลลัพธ์ออกมา ในไฟล์ index.html เราได้กำหนดตัว
container สำหรับ root component ไว้แล้วคือ <div id="app"></div> ดังนั้น
ในการ mount() เราก็จะกำหนดได้เป็นดังนี้
ไฟล์ main.js
import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
หลังจากที่เราเรียกใช้คำสั่งดังกล่าว ปุ่มที่เรากำหนดใน root component ที่ชื่อว่า App
ก็แสดงปุ่มดังรุปตัวอย่างด้านล่าง
บางครั้ง อย่างเช่นในโปรเจกต์ตัวอย่างที่ผ่านมา เราอาจจะไม่ได้สร้างตัวแปร App Instance
ขึ้นมาก็ได้ อาจจะทำการเรียกใช้ คำสั่งสร้าง App Instance แล้วทำการ Mount() เลย
เช่นใช้ในรูปแบบเป็น
createApp(App).mount('#app')
อย่างไรก็ดี การกำหนดตัวแปร สำหรับ App Instance ก็จะทำให้เราสามารถกำหนดการ
ตั้งค่าเพิ่มเติมให้กับแอปได้ เช่น การกำหนดการตั้งค่าระดับ App เกี่ยวกับการจัดการ error
โดยสามารถตรวจจับการเกิด error ไล่ระดับลงไปได้ โดยจะใช้ .config object ในการ
ตั้งค่า ดูตัวอย่างโค้ดด้านล่างประกอบ
app.mount('#app')
app.config.errorHandler = (err) => {
/* handle error */
}
หรือจะใช้สำหรับจัดการกับ component เช่น ให้สามารถใช้ได้ทุกส่วนในแอป ก็สามารถ
กำหนดในลักษณะนี้เพิ่มได้
app.mount('#app')
app.config.errorHandler = (err) => {
/* handle error */
}
app.component('TodoDeleteButton', TodoDeleteButton)
//app.component('ชื่อเรียกใช้งานกำหนดตามต้องการ', ชื่อคอมโพเนนท์)
รายละเอียดส่วนนี้ เราจะได้ศึกษาต่อๆ ไป
ตอนนี้เราได้รู้จักเกี่ยวกับการสร้าง Vue Application ตั้งแต่เริ่มต้น และเข้าใจส่วนต่างๆ
เพิ่มขึ้นมาอีกระดับ บทความตอนหน้าจะเป็นอะไร รอติดตาม
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง