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