Vue js แบบขำขำ

ห่างหายไปนานกับการเขียน blog

เนื่องจากปัจจุบันทำงานเป็น Backend Dev ที่วันๆ อยู่แต่กับระบบหลังบ้าน

จนตอนนี้แทบจะไม่มีความรู้ด้าน Frontend แล้ว ( แล้วเทคโนโลยีฝั่ง front แม่งไปไวมากกกก)

ช่วงนี้นึกอยากจะเขียน Frontend ดูบ้าง เลยลองไปจับ React ดู (อันที่จริงเคยเขียนมาก่อนแล้ว เมื่อแสนนาน) ปรากฏว่ายาก ยาก ยาก งง งง งง อะไรไม่รู้ (จริงๆ คือเราโง่เอง)

จนมีคนแนะนำให้รู้จักกับ Vue.js เหมือนสวรรค์เลย ถึงไม่ง่ายทำ Ang1 แต่มันก็เข้าใจได้ไม่ยากนัก

วันนี้เลยบันทึกการเรียนรู้ไว้ซักหน่อย

มา เริ่ม

เอาแบบง่ายๆ สไตร์คนขี้เกียจติดตั้ง ก็ลองใช้ codepen แล้วกันนะครับ

ง่ายไหมครับ

ทีนี้มาลองรู้จัก Vue ให้มาขึ้นกัน

v-bind

v-bind คือการ bind ค่าตัวแปรกับ HTML Tag ต่างๆ

จาก code จะเห็นว่า ใน input box มีข้อความจาก ตัวแปร name มาแสดง เพราะเรา bind ตัวแปรไว้

แต่เมื่อเราแก้ค่าใน input ที่ {{ name }} กลับไม่เปลี่ยนไปด้วย
เดี๋ยวค่อยมาแก้กันครับ

v-on

v-on คือการดักฟัง Event ต่างๆ ที่เกิดขึ้น ใช้ยังไงไปดูกัน

ทีนี้มาที่โจทย์ก่อนหน้า ถ้าเราต้องการให้ เมื่อแก้ไขค่าใน input แล้ว ตัวแปรที่แสดงผลอยู่เปลี่ยนไปด้วย เราก็ทำได้ดังนี้

ใช้ v-on:keydown คือเมื่อมีการพิมพ์อะไรลงไปใน input มันจะไปทำให้ตัวแปร name เปลี่ยน

ซึ่งการทำแบบนี้ยังไม่ค่อยถูกเท่าไหร่นัก เนื่องจากครั้งแรกที่เข้ามา มันจะไม่แสดงค่าเริ่มต้นในตัวแปร name

v-model

คือ การทำ two-way data bindings ถ้าอธิบายมันจะเยอะไป ไปดูกันเลยยย

Method

method คือ function ใน javascript ปกติ จะมี input หรือไม่มีก็ได้

Computed

computed คือ ฟังก์ชั่นชนิดหนึ่ง ที่ไม่รับ input ใด แต่จะทำงานเมื่อมีค่าใดค่าหนึ่งที่ดังฟังอยู่เปลี่ยนแปลง

Watch

watch คือการ ดังฟัง ตัวแปร หรือ ฟังก์ชั่น จะทำงานหลังจาก ตัวแปร หรือฟังก์ชั่น นั้นๆ มีการทำงานเสร็จแล้ว

ง่ายไหมครับ ผมว่ามันค่อนข้างเข้าใจง่ายมาก แต่จริงๆ ยังมีอีกหลายเรื่องที่ผมยังไม่กล่าวถึง ลองไปอ่าน Doc ของ vue ดูครับ เข้าใจง่ายมาก ทำ Doc ดีมาก

แต่ในความเป็นจริงในโปรเจคที่ซับซ้อน คงไม่ได้ใช้ CDN สักเท่าไหร่

คราวหน้าผมจะลองพาไปรู้จักกับ CLI ของ vue รวมถึงการเขียน Component เพื่อให้แอพของเรา reuse ได้ง่ายๆกัน

ขอฝากเพจของผมไว้ด้วยนะครับ

ที่มา : https://vuejs.org/v2/guide/