สวัสดีครับ จะเป็นบทความสั้นๆนะครับ ที่เราจะมาเรียนรู้เกี่ยวกับสอง Option นี่คือ Data และ Methods ซึ่งผมจะอธิบายไปที่ละตัวพร้อมกับยกตัวอย่างครับ ดังนี้
ถ้าจะพูดแบบง่ายๆ Data เป็นที่สําหรับเก็บข้อมูล หรือ State ของ Component เมื่อใดที่ Data เปลี่ยน Component นั้นๆ จะทําการ Render component ใหม่เพื่อเปลี่ยนแปลง UI ให้แสดงผลตามที่ถูกเปลี่ยนแปลงไป
Methods คือ เป็นที่สําหรับเก็บ Funtion การทํางานทั้งหมด ของ Component เช่น Function คํานวณค่าต่างๆ, Function ในการดึงข้อมูล, Function สําหรับ Event ต่างๆ ฯลฯ ตามแต่ความต้องการครับ
เพื่อให้เข้าใจการทํางานของ Data และ Methods มากขึ้น ผมสร้าง Component ตัวอย่าง ที่มีลักษณะดังนี้ หน้าจอมีการแสดงผล Counter และปุ่ม “Click to increase” โดยมีการทํางานคือ ทุกๆครั้งที่กดปุ่ม “Click to increase” จะเพิ่ม Counter ขึ้นที่ละ 1 ตัวอย่างหน้าจอตามรูป
ตัวอย่าง Source code
<template>
<div>
Counter: {{ counter }} <br />
<button type="button" v-on:click="increase()">Click to increase</button>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data: function () {
return {
counter: 0
}
},
methods: {
increase: function () {
this.counter++
}
}
}
</script>
จาก Code ด้านบน จะมี data ซึ่งจะเก็บค่า counter ไว้ โดยมีค่าเริ่มต้นเป็น 0 ซึ่ง counter จะถูกนําไปแสดงผลใน template ด้านบนด้วย ส่วน methods ผมสร้าง Function ที่ชื่อว่า increase มีการทํางานภายในคือ ไปเพิ่มค่า counter ซึ่งในตัวอย่างเราใช้ this ในการอ้างถึง data ตัวอย่างเช่น this.counter เราสามารถนํา methods ที่เราสร้างขึ้น ไปใส่ใน Event ได้เลย ใน Code ตัวอย่างด้านบน ผมเอาไปใส่ใน onClick ของปุ่มกด ประมาณนี้ v-on:click=“increase()” การใช้งาน และการทํางานของ Data และ Methods ก็ประมาณนี้ครับ สองตัวนี้จะใช้งานค่อนข้างบ่อยครับ ลองศึกษาและ ประยุกต์ใช้งานดูครับ ผมก็ขอจบไว้แค่นี้ครับ :)
NOT gate เป็นวงจร digital ชนิดหนึ่ง โดย input ที่ป้อนให้กับวงจรในแต่ละขา จะเป็นได้สองสถานะคือ High, Low หรือ 0, 1
ในบทความนี้ ผมจะแนะนําการใช้ usb wifi กับ Raspberry Pi มาเริ่มกันเลยครับ ขั้นตอนแรกถ้าเราต้องการจะ Scan หาว่ามี wifi rounter ตัวไหนอยู่บริเวณนี้บ้าง ใช้คําสั่งนี้
วิธีการตรวจสอบว่าตัวแปรเป็น Nothing หรือ ไม่เป็น Nothing ใน vb ทําได้ดังนี้