Vue.js ง่ายกว่านี้ไม่มีอีกแล้ว

ถ้าคุณคิดจะเริ่มเขียน JS Frameworks สักตัว ผมว่า VueJS นี่ละ น่าจะเป็นทางเลือกแรก และมันเป็นทางเลือกที่ไม่เลวเลย

จากบทความก่อน ผมเกริ่น ข้อดี ข้อเสีย ของ VueJS ไปบ้างแล้ว ลองไปตามอ่านกันดูนะ คราวนี้มาเริ่มทำความรู้จักกับมันมากขึ้นดีกว่า อย่างที่บอก มันเป็นอะไรที่ง่ายมาก ถ้าคุณเคยเขียน Pure JavaScript หรือ Angular มาแล้ว VueJS ก็ไม่ต้องไปเรียกรู้อะไรใหม่ๆจากมันเลย งั้นมาเริ่มเขียนกันเลย

แค่สร้างไฟล์ HTML แล้วก็ใส่เท่านี้ ก็เสร็จละ ง่ายมั้ย การแสดงผลออกหน้า view โดยอ้างอิงจาก el ในที่นี่ #app

และนี่ก็เป็นการใช้ for loop ในการแสดงผลข้อมูล หรือถ้าจะใช้ condition ในการเลือกแสดงผลก็แค่ใช้ v-if=”seen” seen ในที่นี้ก็เป็นตัวแปร Boolean หรือ จะให้ return ค่าจาก function ใน method ก็ได้

ตัวอย่างการเรียกใช้ function ใน method โดยการใช้คำสั่ง v-on:click ส่งข้อมูลไป reverse ใน function กลับมา VueJS ยังอนุญาตให้ใช้ JSX เช่น onClick ได้อีกด้วยนะ

Component ของ VueJS มีความเหมือน React ตรงที่มีความเป็นคอมโพแนนท์ เราสามารถห่อหุ้มโค๊ดของ UI Component ที่สัมพันธ์กันไว้ใต้ Component เดียวกันได้ ในที่นี้ todo-item จะแสดงผล li ใน tag ol ซึ่งมีการส่ง props กลับมาด้วย และสังเกตุเราสามารถ bind id ของ element นั้นๆได้ โดยใช้ v-bind:id หรือจะใช้ id เฉยๆก็ได้

Directive ก็เหมือนกับ angular จากภาพ ข้อความ VueJS Directive จากเดิมจะแสดงเป็นสีดำตัวหนังสือขนาด 16px แต่ directive เปลี่ยน style ให้เป็นตัวหนังสือสีแดง ขนาด 30px แทน

การใช้ Filter ในภาพเป็น Global Filters ซึ่งจะเขียนแยกออกจาก component และมีอีกวิธี Local Filters คือการเขียนระบุ Filter ลงไปใน component นั่นๆเลย การเขียน Filter สามารถเขียนซ้อนกันได้หลายตัวเช่น {{ 351.99 | filter1| filter2 }}

สังเกตุว่าผม จะไม่ได้พูดถึงเรื่อง ui เลย VueJS มันสามารถเอาไปใช้กับ ui framworks อื่นๆได้มากมาย ก็ลองหามาใช้กันดูคับ

เอาแค่นี้ก่อนละกันคับ ยังมีอะไรอีกมากมายใน VueJS ให้ได้ศึกษากัน ลองเข้าไปศึกษากันดูในนี้นะคับ https://vuejs.org/v2/guide/