VueJS - บทนำ
Vueเป็นกรอบงาน JavaScript สำหรับสร้างส่วนต่อประสานผู้ใช้ ส่วนหลักของมันเน้นที่เลเยอร์มุมมองเป็นหลักและเข้าใจง่ายมาก เวอร์ชันของ Vue ที่เราจะใช้ในบทช่วยสอนนี้คือ 2.0
เนื่องจาก Vue ถูกสร้างขึ้นโดยพื้นฐานสำหรับการพัฒนาส่วนหน้าเราจะจัดการกับไฟล์ HTML, JavaScript และ CSS จำนวนมากในบทต่อ ๆ ไป เพื่อทำความเข้าใจรายละเอียดให้เราเริ่มต้นด้วยตัวอย่างง่ายๆ
ในตัวอย่างนี้เราจะใช้เวอร์ชันการพัฒนาของ vuejs
ตัวอย่าง
<html>
<head>
<title>VueJs Introduction</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
});
</script>
</body>
</html>เอาต์พุต
นี่เป็นแอพแรกที่เราสร้างโดยใช้ VueJS ดังที่เห็นในโค้ดด้านบนเราได้รวม vue.js ไว้ที่จุดเริ่มต้นของไฟล์. html
<script type = "text/javascript" src = "js/vue.js"></script>มี Div ที่เพิ่มในร่างกายที่พิมพ์ “My first VueJS Task” ในเบราว์เซอร์
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
</div>นอกจากนี้เรายังได้เพิ่มข้อความในการแก้ไขเช่น {{}}. สิ่งนี้โต้ตอบกับ VueJS และพิมพ์ข้อมูลในเบราว์เซอร์ เพื่อให้ได้ค่าของข้อความใน DOM เรากำลังสร้างอินสแตนซ์ของ vuejs ดังนี้ -
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task'
}
})ในข้อมูลโค้ดด้านบนเรากำลังเรียกอินสแตนซ์ Vue ซึ่งรับ id ขององค์ประกอบ DOM เช่น e1: '# intro' ซึ่งเป็น id ของ div มีข้อมูลพร้อมข้อความที่กำหนดค่า‘My first VueJS Task’. VueJS โต้ตอบกับ DOM และเปลี่ยนค่าใน DOM {{message}} ด้วย’My first VueJS Task’.
หากเราเปลี่ยนค่าของข้อความในคอนโซลสิ่งเดียวกันนี้จะปรากฏในเบราว์เซอร์ ตัวอย่างเช่น -
รายละเอียดคอนโซล
ในคอนโซลด้านบนเราได้พิมพ์วัตถุ vue_det ซึ่งเป็นตัวอย่างของ Vue เรากำลังอัปเดตข้อความด้วย“VueJs is interesting” และสิ่งเดียวกันนี้จะเปลี่ยนไปในเบราว์เซอร์ทันทีตามที่เห็นในภาพหน้าจอด้านบน
นี่เป็นเพียงตัวอย่างพื้นฐานที่แสดงการเชื่อมโยง VueJS กับ DOM และวิธีที่เราสามารถจัดการได้ ในสองสามบทถัดไปเราจะเรียนรู้เกี่ยวกับคำสั่งส่วนประกอบการวนซ้ำตามเงื่อนไข ฯลฯ