cookies += 1;}}}); จะเห็นได้ว่า เราได้สร้าง event handler ชื่อว่า clicked ขึ้นมา ซึ่งจะทำการบวกจำนวนคุ๊กกี้ที่มีปัจจุบันไปทีละ 1, แต่ในตอนนี้ยังคงทำอะไรไม่ได้ เพราะเรายังไม่ได้สร้างปุ่มที่ไว้ใช้สำหรับการคลิ๊กเพื่อเพิ่มคุ๊กกี้ 🍪 ได้เวลาเพิ่มปุ่ม ที่เมื่อคลิ๊กจะทำการ call ไปที่ฟังก์ชั่น clicked ที่เราได้สร้างไว้โดยใช้ v:on ซึ่ง syntax จะมีลักษณะประมาณนี้ 1 < button v-on: click = " clicked " > Click me button > div > ในตอนนี้เกมเราก็สามารถเล่นได้แล้ว Hooray!!! 🎉🎉🎉 สรุป ทำให้การเขียน UI/UX แบบมี Logic นั้นเป็นเรื่องที่ง่าย และสนุกมากๆ 😆 จำนวนโค้ดที่เขียนไปไม่ได้เยอะอะไรเลย เมื่อเทียบกับ Library ตัวอื่นๆ จริงๆแล้ว ยังมีความสามารถอีกมากมายเช่น directive v:if ที่ทำให้เราสามารถ render แบบ logical ได้ง่ายๆ โดยไม่ต้องมาทำการสร้าง if-else statement นั้นไม่ได้ Backed โดยบริษัทขนาดใหญ่ เหมือนกับ React (Facebook), Angular(Google) ทำให้ความ Popularity ให้ช่วงเริ่มต้นสู้ตัวอื่นไม่ได้ แต่ในตอนนี้ ได้กลายเป็น MVC ที่มีการกดดาวเยอะนำกว่าใครไปแล้ว ⭐ repos แหล่งข้อมูล React Angular
$emit('blur', );}}, ในตัวอย่างด้านบนผมเปลี่ยน prop เป็น myInput และ event เป็น blue ตามที่เขียนใน model property เผื่อไว้ใช้เพื่อป้องกันการ conflict กับโค้ดอื่น ๆ ที่อาจเกิดขึ้นได้ อ้างอิง: How To Add v-model Support to Custom Components | DigitalOcean หมายเหตุ: ใน link ที่อ้างอิงเขาประกาศ prop ผิด ต้องเป็น props นะครับ
/ title: 'Component'}, ()}} ผลลัพ์ที่ได้ คือ "Component" ขอบคุณข้อมูลจาก:,
DOCTYPE html> < html > < head > < title > Vue Learning < title > < script src = " " > script > head > < body > < div id = " app " > < span > ตรงนี้เราจะให้มันแสดงข้อความตาม Data ที่เรากำหนดไว้ด้วย span > < div > body > html > ได้เวลาเพิ่ม JavaScript เพื่อใช้งาน 1 13 14 15 16 17 18 19 20 < span > Welcome to {{title}} span > < script > const vm = new Vue ( { el: "#app", data: { title: "Vue Learning"}}) script > html > ผลลัพท์ก็ประมาณนี้ 🎉 เราทำอะไรไปบ้าง ในตอนนี้เราได้สร้าง Instance ของ Vue ขึ้นมา เราให้ Vue ไปควบคุม div ที่มีไอดี app ("#" หมายถึง id และ ". "
สอนเขียน VueJS #21 Props Component Data Sharing - YouTube
บทความนี้ผมจะถือว่าผู้อ่านมีความรู้เรื่อง มาแล้วในระดับหนึ่ง เนื่องจากไม่ใช่บทความสอนการเขียน แต่เป็นส่วนเสริมเรื่องการทำ component ขึ้นมาเองแล้วรองรับการใช้งาน v-model (ถ้ายังไม่รู้ว่า v-model คืออะไร แนะนำให้ศึกษาเพิ่มเติมมาก่อน) ทำให้รองรับ v-model ยังไง? v-model มันคือการส่งข้อมูลไปกลับระหว่าง parent component และ child component ซึ่งถูกเรียกว่า two-way binding คือค่าของตัวแปรจะถูกส่งไปกลับระหว่าง 2 component นี้ ค่าตั้งต้นของการทำ v-model คือ component จะรับค่าผ่าน props ที่ชื่อว่า value และส่งค่ากลับไปด้วย event ที่ชื่อ input ขอยกตัวอย่างโค้ดง่าย ๆ เป็น ตามนี้ละกันครับ
และเมื่อนำไปใช้ก็จะหน้าตาแบบนี้
-- Dynamically -->
state = reactive ({
this. doubled = computed (() => this. state. count * 2);
watch ( this. count, ( newValue, oldValue) => {
console. log ( " The new counter value is: " + this. count. value);});
this. mounted ();});
count: this. count,
state: this. state,
doubled: this. doubled,
inc: this. inc. bind ( this), };}
inc () {
this. value ++;
this. count ++;}
mounted () {
this. count = 2;}}
return new Counter (). setup ( props);}, };
จะเห็นว่านี่ไม่ได้เป็นการสร้าง Vue component ขึ้นมาจาก class ซะทีเดียว แต่เป็นการยก logic จาก setup function เข้าไปไว้ใน class และใช้ประโยชน์จาก concept ของ field และ method ของ class
concept ของการส่งออก data และ method จาก setup ใน class นั้นเหมือน composition API เลย ยกเว้นคือ class method นั้นต้อง bind กับ this instance จึงจะสามารถทำงานได้ถูกต้อง เมื่อถึงคราวที่ vue runtime นำ method นี้ไปประกอบกลับเป็น Vue component
inc: this. bind ( this), };
เรามาลองทำให้ class ดูสะอาดมากขึ้นด้วยความพยายาม ครั้งที่ 2
Class 2
import { ref, reactive, onMounted} from " vue ";
import {
useLifeCycle,
useProps,
createComponentDef,
classWatch, } from ". /vue-class-composition ";
this. count = ref ( this. initialCounter);
//simplify watch syntax in class definition
classWatch ( this, this. count, this. countWatch);
//expose all class fields and methods
//expose getter as computed property
let componentDef = createComponentDef ( this);
return componentDef;}
get doubled () {
return this. count * 2;}
countWatch () {
console. value);}
const instance = new Counter ();
useLifeCycle ( instance);
useProps ( instance, props);
return instance. setup ( props);}, };
สิ่งที่ปรับปรุงคือ
ย้าย life cycle setup ไปไว้ใน function useLifeCycle
useProps ช่วย set props ให้กับ class field แบบอัตโนมัติ ทำให้สามารถใช้ field itialCounter ได้ใน class
classWatch function ช่วยให้ watch ใช้งาน class method ได้สะดวกขึ้น
ย้าย logic ของการ expose Vue option ไปไว้ใน createComponentDef ซึ่ง function นี้จะ expose ทุก field และ method ของ class ให้แบบอัตโนมัติ
สำหรับ getter จะถูก expose เป็น computed property
ซึ่งทั้งหมดนี้ทำด้วย js Reflect API
export function createComponentDef ( target) {
const componentDef = {};
const propertyKeys = Reflect. สอนเขียน VueJS #22 Emit - Component Data Sharing from Child to Parent - YouTube