การใช้งานเบื้องต้น Vue.js
สารบัญ
Vue.js คืออะไร?
Vue.js เป็น Javascript Framework ที่ใช้สร้างแอปพลิเคชันเว็บแบบเต็มรูปแบบ (full-featured) และส่วนติดต่อผู้ใช้ (user interface) ซึ่งได้รับความนิยมอย่างแพร่หลายในวงกว้างในชุมชนการพัฒนาเว็บไซต์ ซึ่ง Vue.js มีจุดเด่นในเรื่องของความง่ายในการเริ่มต้นใช้งาน และเป็นเครื่องมือที่มีประสิทธิภาพสำหรับการสร้างแอปพลิเคชันเว็บแบบ Single-Page Applications (SPA) โดยให้นักพัฒนาสามารถสร้างส่วนติดต่อผู้ใช้ที่กระชับและใช้งานได้ง่าย รวมถึงการจัดการสถานะและการอัปเดตข้อมูลอัตโนมัติในหน้าเว็บ
อีกจุดเด่นหนึ่งของ Vue.js คือ
- ในการใช้งาน Vue.js เราสามารถใช้ได้ทั้ง 2 แบบก็คือ SPA (Single-Page Applications) เป็นการเชื่อมโยงไฟล์โยตรงในแต่ละเพจ และแบบ CLI (Command Line Interface) เป็นการสร้าง Vue App ขนาดใหญ่
- ใช้หลัการการพัฒนาด้วย Vue.js ที่ไม่ซับซ้อน ซึ่งเป็นข้อดีต่อผู้ที่จะเริ่มต้นศึกษา Framework นี้
- สะดวดและใช้งานได้มากว่า ถ้าเทียบกับ Framework อื่น ๆ
การใช้งาน Vue.js
ในการพัฒนา Vue.js ซึ่งหลายรูปแบบในการนำ Vue.js ซึ่งส่วนใหญ่จะมีลักษณะการใช้งานดังนี้
- การเชื่องโยงกับไฟล์แบบ SPA
- สร้าง Web App ขนาดใหญ่ในรูปแบบของ CLI
- การติดตั้งโดยใช้ Node Package Manager (NPM)
ในส่วนนี้เราจะใช้แบบ SPA ในการสร้างแอป เพื่อความสะดวกรวดเร็วต่อการทดลองใช้งาน ซึ่งมาทำความรู้จักกับ SPA (Single-Page Applications) คือ รูปแบบของแอปพลิเคชันเว็บที่มีเพียงหน้าเว็บเดียวเท่านั้น ใน SPA, เว็บแอปพลิเคชันจะโหลดและแสดงผลเนื้อหาทั้งหมดในหน้าเว็บเดียวเมื่อผู้ใช้ทำการโหลดหน้าเว็บครั้งแรก และจากนั้นจะใช้ JavaScript เพื่อปรับปรุงและแสดงผลส่วนต่าง ๆ ของหน้าเว็บโดยไม่ต้องโหลดหน้าเว็บใหม่ เมื่อผู้ใช้ทำการทำปฏิสัมพันธ์กับเว็บแอปพลิเคชัน เช่น คลิกปุ่มหรือกรอกข้อมูลในฟอร์ม จะไม่มีการโหลดหน้าเว็บใหม่ แต่จะใช้ JavaScript เพื่อดึงข้อมูลใหม่หรือปรับปรุงส่วนต่าง ๆ ของหน้าเว็บตามต้องการ ซึ่งทำให้ประสบการณ์ใช้งานเว็บเหมือนแอปพลิเคชันแบบตัวจริง
การเชื่อมผ่าน CDN
เป็นวิธีการโหลดไฟล์จากเครือข่าย ดังนั้น จำเป็นต้องเชื่อมต่ออินเทอร์เน็ตตลอดเวลา ในการใช้งานให้กำหนดตำแหน่งไฟล์ด้วย <script> ไว้ในหน้าเพจ ดังตัวอย่างต่อไปนี้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>การใช้งานเบื้องต้น vue.js</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
</body>
</html>การเชื่อมไฟล์ในเครื่องของเรา
เป็นวิธีการดาวน์โหลดไฟล์มาเก็บไว้ในเครื่องคอมพิวเตอร์ของเราโดยไม่ต้องมาเชื่อมอินเทอร์เน็ตตลอดเวลาซึ่งเป็นข้อดีอย่างหนึ่ง ซึ่งสำหรับจัดดาวน์โหลดไฟล์นั้นก็ในเว็บเดียวกับวิธีเชื่อมต่อผ่าน CDN นั้น ก็คือลิงก์นี้ https://unpkg.com/[email protected]/dist/vue.global.js
ซึ่งจะมี 2 วิธี ในการโหลดไฟล์ เช่น
- วิธีให้เราสร้างไฟล์ js ไว้ในโปรเจคของเรา แล้วไป Copy โค้ดทั้งหมดมาวางใส่ในไฟล์ js ที่เราได้เอาไว้
- กับวิธีนี้คือดาวน์โหลดในลิงก์ vue ที่ได้กล่าวข้างต้น และกด Save As ไปวางที่โปรเจคของ้รานั้นเอง
กดบันทึกแบบ Save As
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>การใช้งานเบื้องต้น vue.js</title> <script src="/js/vue.global.js"></script> </head> <body>
การใช้งานร่วมกับ Bootstrap 5
การนำ Bootstrap มาจัดเนื้อหาของเพจก็สามารถได้ 2 แบบ แบบเดี่ยวกับ Vue ก็คือเชื่อมไฟล์ผ่าน CDN หรือโหลดไฟล์มาเก็บไว้ในเครื่องของเราเลย ซึ่งในส่วนนี้เราจะคัดลอกไฟล์ Bootstrap 5 มาเก็บไว้ในเครื่องนั้นเอง
ตัวอย่างการเชื่อมไฟล์
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>การใช้งานเบื้องต้น vue.js</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/vue.global.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
</head>
<body>
</body>
</html>การแทรกข้อมูลด้วย Mustache
ในตัวของ Vue.js ก็มีจุดเด่นอย่างหนึ่ง ก็คือ การแทรกข้อมูลลงในอิลิเมนต์ของ HTML โดยใน Vue.js จะใช้สัญลักษณ์ที่เรียกว่า Mustache ซึ่งจะกำหนดด้วยวงเล็บ {} ซ้อน 2 อัน ดังตัวอย่าง
{{data}}จากนั้นก็ให้มีการแทรกข้อมูลด้วยวิธี Mount โดยใช้ Component (Class) ที่ชื่อของ Vue ซึ่งจะมีวิธีการใช้ดังนี้
<body>
<div class="app">
{{'Hello ' + 'Vue'}} <br/>
10 + 30 = {{ 10 + 30 }} <br/>
</div>
</body>
<script>
const app = Vue.createApp({})
app.mount('.app')
</script>อธิบายโค้ด
<div class="app">
{{'Hello ' + 'Vue'}} <br/>
10 + 30 = {{ 10 + 30 }} <br/>
</div>- <div class="app"> สร้างตัวครอบของแอพพลิเคชัน Vue.js โดยมีคลาส CSS เป็น "app"
- {{'Hello ' + 'Vue'}} แสดงผล "Hello Vue" โดยใช้ String Concatenation
- 10 + 30 = {{ 10 + 30 }} แสดงผล "10 + 30 = 40" โดยใช้ Expression ในการคำนวณค่า
const app = Vue.createApp({})
app.mount('.app')
- const app = Vue.createApp({}) สร้างแอพพลิเคชัน Vue.js ใหม่โดยใช้ Vue.createApp() ซึ่งจะเป็นการสร้าง instance ของ Vue.js โดยมี object ว่างเปล่าเป็น parameter
- app.mount('.app') เชื่อมโค้ด HTML กับ instance ของ Vue.js โดยใช้ method .mount() ซึ่งจะเชื่อมโค้ด HTML กับคลาส CSS .app ที่กำหนดไว้ด้านบนเพื่อเปิดใช้งานแอพพลิเคชัน Vue.js
ผลลัพธ์ที่ได้
การกำหนดข้อมูลด้วยเมธอด data()
เมธอด data() ใน Vue.js ใช้สำหรับกำหนดข้อมูลหรือสถานะ (state) ให้กับแอพพลิเคชัน Vue.js โดยทั่วไปแล้วเราจะกำหนดข้อมูลที่ต้องการใช้งานในแอพพลิเคชันในเมธอด data() เพื่อให้ Vue.js ติดตามการเปลี่ยนแปลงของข้อมูลนั้น และทำการเรนเดอร์ (render) อัพเดตส่วนที่เกี่ยวข้องของหน้าเว็บอัตโนมัติเมื่อข้อมูลเปลี่ยนแปลง
ตัวอย่างการใช้เมธอด data()
<div class="bg-success bg-gradient text-white m-4 p-3" id="app2">
สินค้า : {{productName}} <br>
ราคา : {{price}} บาท <br>
สีของสินค้า : {{colorProduct.join(', ')}}
</div>
<script>
Vue.createApp({
data() {
return {
productName : 'คอมพิวเตอร์',
price : 30000,
colorProduct : ['สีแดง', 'สีดำ', 'สีขาว', 'สีเขียว']
}
}
}).mount('#app2');
</script>อธิบายโค้ด
ในส่วนของ HTML
<div class="bg-success bg-gradient text-white m-4 p-3" id="app2">
สินค้า : {{productName}} <br>
ราคา : {{price}} บาท <br>
สีของสินค้า : {{colorProduct.join(', ')}}
</div>
- <div> คือแท็กที่ใช้สร้างกล่องหรือพื้นที่ในหน้าเว็บไซต์
- class="bg-success bg-gradient text-white m-4 p-3" คือคลาส CSS ที่กำหนดสีพื้นหลังและรูปแบบของกล่องสำหรับส่วนนี้
- id="app2" คือระบุ ID ให้กับส่วนนี้เพื่อใช้ในการเชื่อมต่อกับ Vue.js
และในส่วนของ Javascript
Vue.createApp({
data() {
return {
productName : 'คอมพิวเตอร์',
price : 30000,
colorProduct : ['สีแดง', 'สีดำ', 'สีขาว', 'สีเขียว']
}
}
}).mount('#app2');- Vue.createApp({}) เริ่มต้นการสร้างแอปพลิเคชัน Vue.js โดยใช้เมธอด createApp จาก Vue.js
- data() {} เป็นเมธอดที่กำหนดข้อมูลให้กับแอปพลิเคชัน Vue.js ภายใต้เมธอดนี้จะมีการกำหนดค่าข้อมูลสินค้า
- return {} ส่งคืนออบเจ็กต์ที่ประกอบไปด้วยข้อมูลสินค้าที่จะถูกใช้ในแอปพลิเคชัน Vue.js
- productName: 'คอมพิวเตอร์' เป็นตัวแปรที่เก็บชื่อสินค้า ซึ่งในที่นี้คือ "คอมพิวเตอร์"
- price: 30000 เป็นตัวแปรที่เก็บราคาสินค้า ซึ่งในที่นี้คือ 30,000 บาท
- colorProduct: ['สีแดง', 'สีดำ', 'สีขาว', 'สีเขียว'] เป็นตัวแปรที่เก็บสีของสินค้าในรูปแบบของอาร์เรย์ โดยมีสีแดง, สีดำ, สีขาว, และสีเขียว
ผลลัพธ์ที่ได้
การกำหนดวิธีดำเนินการด้วย Option Methods
Vue.js, Option methods คือเมธอดที่ใช้ในการกำหนดวิธีการดำเนินการหรือเหตุการณ์ต่างๆ ในระหว่างการทำงานของแอปพลิเคชัน Vue.js ซึ่งสามารถใช้งานได้ในอ็อบเจ็กต์ต่าง ๆ ในรูปแบบของเมธอดหรือฟังก์ชัน เพื่อจัดการข้อมูลหรืออื่น ๆ ได้
ตัวอย่าง
<div class="bg-success bg-gradient text-white m-4 p-3" id="app2">
เดือนกับปีที่เกิด : {{month + ' / ' + year}} <br>
ปี พ.ศ. ปัจจุบัน : {{thisYear}} <br>
อายุ : {{age()}} ปี
</div>
<script>
Vue.createApp({
data() {
return {
month : '09',
year : '2540',
thisYear : new Date().getFullYear() + 543
}
},
methods : {
age() {
return this.thisYear - this.year
}
}
}).mount('#app2');
</script>อธิบายโค้ด
- Vue.createApp({}) ใช้สร้างแอปพลิเคชัน Vue.js
- data() เป็นเมธอดที่กำหนดข้อมูลให้กับแอปพลิเคชัน Vue.js ภายใต้เมธอดนี้จะมีการกำหนดค่าข้อมูลสำหรับเดือน (month) ปี (year) และปีปัจจุบันที่ถูกคำนวณจากฟังก์ชัน new Date().getFullYear() (thisYear)
- methods เป็นตัวแปรที่ใช้ในการกำหนดเมธอดต่างๆ ในที่นี้มีเพียงเมธอดเดียวที่ชื่อว่า age() ซึ่งใช้สำหรับคำนวณอายุโดยลบปีปัจจุบัน (thisYear) ด้วยปีที่กรอกเข้ามา (year)
- .mount('#app2') ใช้เชื่อมต่อแอปพลิเคชัน Vue.js กับอิลิเมนต์ใน HTML ที่มี ID เป็น app2 ซึ่งจะทำให้ Vue.js เริ่มทำงานและแสดงผลในหน้าเว็บไซต์
ผลลัพธ์ที่ได้
การคำนวณด้วย Computed
Option Computed เป็นการเมธอดอีกแบบ ซึ่งส่วนใหญ่ จะเป็นการนำข้อมูลที่กำหนดด้วย data() มาดำเนินการบางอย่างเพื่อให้ได้ผลลัพธ์ที่แตกต่างออกไป หลักการก็จะคล้ายเมธอดที่เราสร้างด้วย Option Methods ในกรณีนี้ เราจะนำผลลัพธ์ที่คืนกลับมาเพื่อนำไปแทรกลงในเนื้อหาด้วย Mustache เราจะต้องทำพร็อปเพอร์ตี้ หรือก็คือให้ใส่แค่ชื่อเมธอดไม่ต้องมีวงเล็บ () ต่อท้าย
ตัวอย่างการใช้ Computed
<div class="bg-success bg-gradient text-white m-4 p-3 fs-5 text-center" id="app3">
วันนี้คือ {{thisDate}}
</div>
<script>
Vue.createApp({
data() {
return {
now : new Date()
}
},
computed : {
thisDate() {
const months = [
"มกราคม",
"กุมภาพันธ์",
"มีนาคม",
"เมษายน",
"พฤษภาคม",
"มิถุนายน",
"กรกฎาคม",
"สิงหาคม",
"กันยายน",
"ตุลาคม",
"พฤศจิกายน",
"ธันวาคม"
];
d = this.now
return `${d.getDate()} ${months[d.getMonth()]}
${d.getFullYear() + 543}`
}
}
}).mount('#app3');
</script>อธิบายโค้ด
- <div> ใช้สร้างตัวแสดงผลที่จะแสดงวันที่ปัจจุบัน
- Vue.createApp({}) ใช้สร้างแอปพลิเคชัน Vue.js
- data() เป็นเมธอดที่กำหนดข้อมูลให้กับแอปพลิเคชัน Vue.js ในที่นี้กำหนดตัวแปร now เพื่อเก็บวันที่ปัจจุบัน
- computed เป็นตัวแปรที่ใช้ในการกำหนดค่าที่คำนวณได้จากข้อมูลอื่นๆ ในที่นี้กำหนด computed property ที่ชื่อ thisDate ซึ่งจะคำนวณวันที่ปัจจุบันในรูปแบบที่กำหนด โดยใช้ข้อมูลจากตัวแปร now และตัวแปร months เพื่อระบุชื่อเดือนในภาษาไทย
- .mount('#app3') ใช้เชื่อมต่อแอปพลิเคชัน Vue.js กับอิลิเมนต์ใน HTML ที่มี ID เป็น app3 ซึ่งจะทำให้ Vue.js เริ่มทำงานและแสดงผลในหน้าเว็บไซต์
ผลลัพธ์ที่ได้
ดังนั้น Vue.js เป็นเฟรมเวิร์กสำหรับพัฒนาเว็บแอปพลิเคชันเชิงกลยุทธ์ (SPA) ที่ใช้ JavaScript ในการสร้างอินเทอร์เฟซผู้ใช้เชิงประสบการณ์ (UI) ที่สวยงามและสตรีมไลน์ มีความยืดหยุ่นสูงและใช้งานง่าย และยังมีการออกแบบให้ง่ายต่อการเริ่มต้นด้วยไลบรารีหรือใช้งานผ่านการเรียกใช้ในแท็ก <script> ในไฟล์ HTML ที่กำหนด โดยสามารถนำมาใช้ได้ทั้งแบบเต็มหน้าจอหรือแบบเป็น Component และหลักการทำงานของ Vue.js คือใช้สถานะ (state) เพื่อควบคุมการแสดงผลในเว็บแอปพลิเคชัน โดยสามารถผูกสถานะกับองค์ประกอบต่าง ๆ ของอินเทอร์เฟซผู้ใช้ (UI) เช่น กล่องข้อความ (text box) หรือปุ่ม (button) เพื่อให้การเปลี่ยนแปลงสถานะส่งผลต่อการแสดงผลอัตโนมัติ
