เรียน Vue.JS ด้วยกัน ตอนที่ 1 / 5

เนื่องจากผมอ่านพวกเปรียบเทียบ 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

Our recommended articles about outsourcing freelances

As a Vice President of Thailand Programmer Association and the founder& CTO of 3 software houses company in Thailand, I had a lot of works from my clients and sometime we outsourced the projects to some of freelances in Thailand and India, also. With my experience, it is very difficult for everyone to start outsourcing the works to freelances without knowing the process of Software Development or do not know how to deal with freelances. These 3 articles cover some of knowledge that anyone need to know before outsourcing the works

In summary, if you do not want to learn a lot in detail of how to deal with freelance to get the work, or how to know that any freelances are capable of working with your project. You just need to fill in detail in our form here http://www.topwork.asia/hire-top-talent/. Within 1 business day, we will contact back to you and find you the top freelances that are suitable with your projects and we will work together until the end of your project.