Vue.js: สวัสดีชาวโลก!

สำหรับบทเรียนรู้นี้มาสวัสดีชาวโลกหรือ Hello World กับ Vue.js กันนะครับ ในที่นี้จะใช้การเรียก Vue.js ผ่าน Browser โดยไม่ได้ติดตั้งผ่าน cli เพื่อเป็นการเรียนรู้พื้นฐาน

สร้างไฟล์

ให้ทำการสร้างไฟล์ 3 ไฟล์ เพื่อเป็นไฟล์ประกอบการใช้งาน คือ index.css, index.html และ index.js

เขียนโปรแกรม

index.css เป็นไฟล์เก็บ css ที่ใช้ประกอบใน webpage เพื่อให้เข้าใจหลักการทำงานในหน้า webpage โดยเขียนในเบื้องต้นดังนี้

html, body {
    margin: 5px;
    padding: 0;
    color: grey;
}

index.html เป็นไฟล์สำหรับเปิดใน web browser โดยเขียนคำสั่ง html ดังต่อไปนี้

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        
        <div id="app">
            {{ message }}
        </div>
        
        <script src="index.js"></script>
    </body>
</html>

ทั้งนี้จะมีการเรียกใช้ vue.js แบบ cdn และมี tag <div id="app"> เพื่อเป็นการระบุ element ที่จะให้ใช้เป็น vue จากนั้นมี {{ message }} เป็นตัวแปรที่จะถูก render และแสดงผลซึ่งเกิดจาก index.js ที่ได้อ้างอิง

index.js เป็นไฟล์ โปรแกรมที่เขียน เนื่องจาก vue.js เป็น javascript ตัวหนึ่ง ซึ่งเรียกว่า progressive javascript นั่นเอง

var app = new Vue({ 
    el: '#app',
    data: {
        message: 'สวัสดีชาวโลก!'
    }
});

เริ่มจากสร้าง instance ใหม่ ชื่อ app โดยสร้างจาก Vue() จากนั้นระบุ element ที่จะเป็น vue โดยระบุด้วย id เช่น #app คือ id ของ <div id="app"> ในส่วนต่อไปคือ data เป็น object ที่มี message โดยมีค่าเป็น สวัสดีชาวโลก! โดยจะส่งไปยัง {{ message }} ในหน้า webpage ผ่าน dom โดยสามารถเปลี่ยนค่า message ใน index.js แล้ว dom ก็จะ update ค่าใหม่เช่นกัน (แบบ realtime เลยนะ)

ลองเปลี่ยนค่า

โดยการเพิ่มบรรทัดนี้ด้านล่าง object app

app.message = 'สวัสดีโปรแกรมเมอร์ไทยแลนด์';

จะเห็นว่าใน webpage เปลียนเป็นคำว่า สวัสดีโปรแกรมเมอร์ไทยแลนด์

See the Pen Vue02 by Manop Kongoon (@kongoon) on CodePen.

Vue.js: สวัสดีชาวโลก!