หัดเขียน Vue.js เล่นๆ EP.1
เริ่มต้น ทำความรู้จักกับ Vue.js
ตอนอื่นๆใน Series นี้
ตอนที่ 1 เริ่มต้นทำความรู้จักกับ Vue.js
ตอนที่ 2 Life Cycle Hook ใน Vue.js
สวัสดีครับ ในบทความนี้จะมาเล่าถึงความรู้สึก หลังจากที่ได้ลองเขียน Vue.js ครับ
ปกติงานที่ผมทำจะใช้ Angular เป็นหลัก ซึ่งพอได้มาเขียน Vue.js นี่ รู้สึกเลยว่า มันง่ายมาก Learning curve ก็ต่ำกว่า ถ้าเทียบกับ Frontend Framework ตัวอื่นๆ เช่น React, Angular อย่าง React ก็ไม่มี template (html)ให้ใช้ ต้องมาเขียน เป็น JSX ทุกอย่างถูก render มาจาก javascript หมด ส่วน Angular ดีหน่อยที่เขียน html ได้เลย แต่ก็ยังต้องเรียนรู้เรื่อง TypeScript เพิ่มอีก แต่ Vue.js นี่มี template ให้เลย เขียนเหมือนปกติแทบทุกอย่าง ทั้งคอนเซ็ป วิธีการเขียน นั้นเรียบง่าย สั้น กระชับ และ เป็นมิตร ต่อ Developer มาก
ผมกล้าบอกได้เลยว่า ถ้าท่านเคยเขียน React หรือ Angular มาก่อน การจะมาเขียน Vue.js นี่ไม่ยากเกินไปครับ
ซึ่งในบทความนี้จะพาไปลองเล่น Vue.js แบบง่ายๆโดยเรียกใช้ผ่าน CDN กันครับ
<script src="https://cdn.jsdelivr.net/npm/vue"></script>Hello World ครั้งแรก กับ Vue.js
อธิบาย
new Vue({}) เป็นการเรียกใช้งาน Vue.js โดยการสร้าง Instance ขึ้นมาใหม่
el หมายถึง element ที่ Vue.js จะใช้อ้างถึง (selector) ว่าเราจะทำงานในส่วนนี้
ในที่นี้อ้างถึง id “app”
data เป็น Object ธรรมดา ที่เอาไว้ประกาศตัวแปร หรือกำหนดค่า ต่างๆ ในที่นี้ ประกาศตัวแปร message และกำหนดค่าให้เท่ากับ ‘Hello World!’
{{}} ใช้สำหรับแสดงผลตัวแปรที่ต้องการ
ผลลัพธ์ที่ได้
Methods
ใช้สำหรับประกาศ Function ต่างๆ ไว้ใช้งาน เช่น เราจะทำการสร้าง Function ที่จะ Return ค่าออกมาเมื่อทำการเรียกใช้ สามารถทำได้ดังนี้
ผลลัพธ์ที่ได้
Directive
ใน Vue.js จะมีสิ่งนึงที่เรียกว่า Directive จริงๆมันก็คือ Attribute นั่นแหละ แต่ใน Vue.js ถ้าขึ้นต้นด้วย v- จะเรียกสิ่งนั้นว่า Driective
v-on
ใช้สำหรับ ดักจับ Event ต่างๆที่เกิดขึ้น เช่น เราจะทำการสร้าง Function สำหรับการแปลง ตัวอักษร จาก Input ให้เป็นตัวอักษรใหญ่ (Uppercase()) ทันทีที่มีการพิมพ์
สามารถ ทำได้ดังนี้
ขั้นแรก เราจะทำการสร้าง input box ขึ้นมา แล้วใช้ v-on:input ในการจับ event ในการพิมพ์ ซึ่งทุกๆครั้งที่พิมพ์ จะไปเรียก Function ที่ชื่อว่า convertToUpperCase()
ผลลัพธ์ที่ได้
v-bind
ใช้สำหรับเปลี่ยนแปลง หรือ กำหนดค่าต่างๆ ไม่ว่าจะเป็น attribute, style, src เป็นต้น เช่น เราต้องการที่จะ สร้างปุ่ม ขึ้นมา เมื่อทำการคลิก ให้ทำการเปลี่ยนสี ตัวอักษร สามารถทำได้ดังนี้
เราสามารถย่อ คำสั่ง v-bind:style ให้เหลือแค่นี้ได้ :style
โดยตอนแรก คำว่า Hello World! นั้นเป็นสีดำ หลังจากคลิกที่ปุ่ม ตัวอักษรจะเปลี่ยนเป็นสีแดง
v-model
เป็นการ bining ข้อมูล แบบไปกลับ (two way data binding) คือสามารถรับส่งข้อมูล จาก input และส่งไปยัง output ได้แบบ realtime เลย คล้ายๆกับที่เราใช้ v-bind:input ให้ตอนแรก แต่ v-model นั้น จะใช้วิธี ผูกกับตัวแปร ที่ประกาศไว้ แล้วมันจะดักจับข้อมูลให้เราโดยที่เราไม่ต้องไปดักจับ Event เอง เช่น เราต้องการแสดง Output ทันที ที่มีการพิมพ์ สามารถทำได้ดังนี้
ผลลัพธ์ที่ได้
v-if v-else-if v-else
ใช้ในการกำหนด เงื่อนไขในการแสดงผล เช่น เราต้องการให้แสดงคำว่า welcome ก็ต่อเมื่อทำการกดปุ่ม login ก่อน ซึ่งก่อน กดปุ่ม ให้แสดงคำว่า please login สามารถ ทำได้ดังนี้
ผลลัพธ์ที่ได้
หรือ อยากทำเป็นแบบ if, else if, else ก็ได้ เช่นเรา อยากจะทำ select box ให้เขาเลือก เพศ ชาย, หญิง, อื่นๆ แล้วพอเลือกเสร็จ ก็ให้แสดงสิ่งที่เขาเลือก
สามารถ ใช้ v-if, v-else-if, v-else กำหนดไว้ใน template ได้ดังนี้
ผลลัพธ์ที่ได้
v-show
รูปแบบการใช้คล้ายๆกับ v-if แต่ ลักษณะการทำงาน แตกต่างกัน คือ เวลาใช้ v-if จะเป็นการกำหนดเงื่อนไขว่า ต้องการ render element หรือไม่ คือกำหนดตั้งแต่การ render เลย
ส่วน v-show นั้น เงื่อนไขไม่ต่างกัน แต่ต่างกันตรงที่ v-show นั้น render ทั้งหมด ออกมาก่อน แล้วใช้ css (display:none, display:block) กำหนดการแสดงผลแทน
เช่นผมต้องการทำปุ่มเปิดปิด สถานะ สามารถทำได้ดังนี้
ผลลัพธ์ที่ได้
อันนี้ทำด้วย v-if
จะสังเกตุว่า มันจะทำการ render element ใหม่ทุกครั้งเลย
เปรียบเทียบ v-if และ v-show
v-if ยืดหยุ่นกว่า เพราะทำการ render ใหม่ในทุกๆครั้ง แต่ถ้าข้อมูลมีเยอะ ก็ช้ากว่า
v-show เร็วกว่า เพราะไม่ต้อง render ใหม่ทุกรอบ แต่ไม่ค่อยยืดหยุ่น เพราะใช้เทคนิคปิดการแสดงผลโดยใช้ css ซึ่งถ้ามีเยอะๆ บางทีอาจจะทำให้สับสน อีกอย่าง ไม่ค่อยปลอดภัย เพราะ ข้อมูลมันถูก render มาแล้ว แค่ใช้ css ปิดไว้
v-for
ใช้สำหรับ วนลูปข้อมูลเพื่อนำมาแสดงผล เช่นเรามีข้อมูลชุดนึง แล้วอยากนำมาแสดงผลใน tag ul>li
ตัวอย่างของข้อมูล
users: [{ id: 1, name: 'user 1'},{id: 2, name: 'user 2'}]สามารถทำได้ดังนี้
ผลลัพธ์ที่ได้
สำหรับบทความนี้ขอตัดจบไว้เพียงเท่านี้นะครับ เดี๋ยวจะยาวเกินไป ว่างๆ จะมาต่อ EP.2 ให้ครับ -/\-