เนื่องจากผมอ่านพวกเปรียบเทียบ Vue.js กับ framework อื่นๆ เช่น React, Angular 1, Angular 2 รวมทั้งได้รับการแนะนำจากเทพ North ว่า Vue.js เจ๋งที่สุดแล้ว

เลยได้โอกาสเริ่มเขียน Blog  ให้อ่าน และ เรียนรู้ไปด้วยกันซะทีครับ ทั้ง 5 ตอน คงเริ่มสอนง่ายๆ ให้ทำ app ง่ายๆ ได้

 

สิ่งที่ได้รับจากการอ่านทั้งหมด

  • สามารถรู้ function พื้นฐานให้เข้าใจ Concept ของ Vue.js ได้
  • เนื้อหาสำหรับบุคคลทั่วไปที่มีความรู้ด้าน Javascript และ HTML  มาก่อน
  • จะพยายามใช้คำให้ง่ายๆ สำหรับการอ่านตามได้นะครับ

สำหรับใครที่ขี้เกียจอ่าน สามารถไปลงเรียนกับเทพ North เรียน Online Free Free กันได้ ทั้งหมด 12 ชั่วโมง รู้ลึกเต็มอิ่มแน่นอน ที่นี่เลย https://www.eventpop.me/e/1079

 

เริ่มเลยละกัน แนะนำ Vue.js ก่อน

Vue อ่านว่า “วิว” (View – /vjuː/) เป็น Progressive framework อันนึงที่ถูกออกแบบมาให้จัดการ กับ ui โดยตัว Core library หลักจะเน้น focus ที่ส่วน View Layer เท่านั้น ด้วยการออกแบบที่ใช้งานได้ง่ายทำให้เหมาะสมกับการนำมาใช้ที่ส่วนๆ นึงใน Website หรือใช้กับทั้ง Website ได้เลยในรูปแบบของ Single Page Applcation 

รวมทั้งตอนนี้ยังมี Community และ Resources อื่นๆ ให้ศึกษาและนำไปใช้ได้ที่นี่เลยนะครับ https://github.com/vuejs/awesome-vue

 

Hello World

เริ่มด้วยการ include .js สำหรับใช้งาน Vue.js ด้วยแค่บรรทัดนี้ได้เลย

 <script src="https://unpkg.com/vue/dist/vue.js"></script>

 

จากนั้น ก็ลองใส่ html พวกนี้ลงไป

<body>
    <div id="app">
        {{ message }}
    </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
            var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World Topwork!'
            }
            })
    </script>
</body>

อธิบายเพิ่มเติมทีละจุดดังนี้

  • {{message}} – ถ้าเห็น tag ปีกกาแบบนี้คือเหมือนการนำค่าตัวแปรที่ชื่อว่า message มาแสดงผล
  • app = new Vue(…) – เป็นการสั่งสร้าง object Vue เพื่อนำไปใช้การ โดยการใส่ค่าเริ่มตั้นว่า scope ของ element ที่เราจะเขียน code ลงไปคือ #app (id = app) และมีค่า data ที่จะใส่เข้าไปในตัวแปรแค่อันเดียว คือ ตัวแปร message ให้มีค่าเป็น “Hello World Topwork!

ให้ลองนำ code ไปใส่ใน File test.html แล้ว ลองเปิดใน browser ดู จะเห็นว่ามีหน้าจอแสดงผลว่า “Hello World Topwork!” ดังรูปด้านล่าง

screen-shot-2559-11-05-at-9-35-41-pm

คำสั่งง่ายๆ น้อยๆแค่นี้ แต่ว่าจริงๆ มีการทำงานมากมายด้านหลัง โดย Vue ได้ทำการ bind ตัวแปร app เข้าไปใน DOM แล้ว โดยเราสามารถลอง Test ได้ด้วย javascript console โดยการเปลี่ยนค่าตัวแปร app.message = “Hello Earth Topwork!” ได้เลย จะเห็นว่าค่า “Hello World Topwork!” จะถูกเปลี่ยนเป็น “Hello Earth Topwork!”

 

screen-shot-2559-11-05-at-9-40-16-pm

แค่นี้ก็ได้เรียนรู้ Vue.js กันแบบคร่าวๆ Style Hello World กันแล้วนะครับ

ใครสนุกก็ช่วยแชร์ ช่วย Like กันด้วย จะได้มีกำลังใจครับ 🙂

 


ขอบคุณที่มา http://vuejs.org/v2/guide/index.html

ปล.อย่าลืมลงทะเบียนเรียนกันนะครับ https://www.eventpop.me/e/1079

อ่อ สามารถ download source code ของ file ในบทเรียนนี้ได้ที่นี่นะครับ https://github.com/kchalermsook/vuejs-lesson