เรียน 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

ความเจ๋งของ Vue.Js 2.0 แบบคร่าวๆ แค่ 3 ข้อ

เนื่องจากอาจจะมีบางคนยังไม่เคยลองใช้ Vue.JS ผมลองสรุปๆ สิ่งที่เจ๋งๆ ของ Vue.JS version 2.0 ให้ดูแบบคร่าวๆ เพื่อประกอบการตัดสินใจเวลาจะเลือกใช้ Javascript framework สักตัวของหลายๆ คนนะครับ

 

  1. เร็วส์มาก ลองดูตาราง (ยิ่งน้อย ยิ่ง performance ดี ลองเทียบกับ Vanilla Javascript ได้ครับ) จะเห็นว่า Performance ดีขึ้นกว่าเดิมมากเมื่อเทียบกับ Vue 1 รวมทั้ง Angular 2 และ React อีกด้วย

 

 

2. ขนาดของ File เมื่อใช้ในการโหลด จะเห็นว่าตัวเพียวๆ แค่ 16.kb เท่านั้น หรือถ้าอยากได้ version ที่ครบถ้วน มี Vue Router และ Vuex ก็แค่ 26kb เท่านั้น

3. สามารถข้ามสายไปลองพัฒนา mobile app ได้โดยใช้ Vue.JS 2.0 โดยการใช้ Project Weex ซึ่งเป็น Project Open Source จาก Engineer ที่ Alibaba สำหรับทำ Mobile Cross PLatform Native UI Development (เหมือน ReactNative หรือ NativeScript) ลองติดตามรายละเอียดเพิ่มเติมจาก Link Project Weex ได้เลย

 

จริงๆ มีอีกหลายอย่าง สามารถตามอ่านกันได้ที่ link ด้านล่าง แต่ผมแค่สรุปให้ฟังคร่าวๆ จะได้อ่านกันแบบเร็วๆ ครับ

ใครอยากเรียน Vue.JS ครบถ้วน ฟรีๆ จบมาสามารถใช้งานได้จริง ตอนนี้เทพ Northโปรแกรมเมอร์สุดเทพเปิด course Vue.js สามารถลงทะเบียนกันได้เลยตอนนี้ะครับ ที่นี่เลย https://www.eventpop.me/e/1079

 

ที่มา

https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#.lkht9c8f2