Vue.js เริ่มต้น ตอน2 (Component)

24 May 2018

Share to:

ในบทความตอนที่แล้ว “Vue.js เริ่มต้น ตอน1 (สร้าง Project)” ผมได้อธิบายถึงแนวทางการพัฒนาเว็บด้วย Vue.js ในแบบต่างๆ และการสร้าง Project ด้วย Vue-cli ถ้าใครยังไม่ได้อ่านกลับไปอ่านก่อนเนื่องจากเนื้อหาในบทความนี้เป็นเนื้อหาที่ต่อเนื่องจากบทความที่แล้ว

เอาละ… ก่อนที่จะเริ่มพัฒนาเว็บด้วย Vue.js เราจําเป็นต้องรู้ก่อนว่า แนวคิดของ Vue.js เป็นอย่างไร เพื่อเราจะได้ออกแบบเว็บของเราได้อย่างถูกต้อง และเข้าใจมากยิ่งขึ้น ดูรูปนี้ก่อนครับ

Image

Vue.js จะแบ่งหน้าเว็บของเราเป็นส่วนๆ โดยแต่ละส่วนนั้นจะเรียกว่า Component ซึ่งแต่ละ Component จะอยู่ซ้อนๆกันตามรูป เราอาจจะมองเป็นกล่องๆสีเขียวๆ ก็ได้ ถึงตรงนี้เราก็ทราบแล้วว่า Component ก็คือ บล็อกๆ นึง ที่อยู่บนหน้าเว็บเรานั่นเอง ต่อไปนี้ผมจะเรียกมันว่า Component นะครับ Component จะประกอบไปด้วย 2 สิ่ง ที่เราจะต้องรู้คือ

1. Life Cycle Hook

วัฏจักรของ Vue Instance ตั้งแต่สร้าง Instance ไปจนถึง Destroyed ว่ามันดําเนินการอะไรอย่างไรบ้างในแต่ละจุด ซึ่งในแต่ละจุด Vue จะมี hook function ให้ ซึ่งเราสามารถเขียนคําสั่งอะไรลงไปด็ได้ตามความต้องการ

Image

2. Options

คือ Option ต่างๆที่ทําให้เราจัดการ Component ได้อย่างง่ายดาย โดย Option สําคัญๆ และใช้งานบ่อยๆคือ

  • data คือ Component state หรือก็คือค่าตัวแปรที่ Component นั้นเก็บไว้
  • methods  คือ JavaScript function ธรรมดาที่เราเขียนให้ทํางานต่างๆนั่นแหละ
  • components  เป็นที่ลงทะเบียน Component อื่นๆ ที่ Import เข้ามาใช้งานภายใน Component นี้
  • props  รับค่าเข้ามาภายใน Component อารมณ์ เหมือน Parameter ของ function นั่นแหละ ทําให้เราสามารถส่งข้อมูลกันระหว่าง Component ได้

ในการออกแบบหน้าเว็บของเรานั้น เราจะออกแบบโดยแบ่งหน้าเว็บออกเป็นส่วนๆ(Component) ตามความเหมาะสม เช่น Header, menu, login, sidebar เป็นต้น ต่อไปเราจะมาสร้าง Component กัน

สร้าง Component

เพื่อจะเรียนรู้การสร้าง Component และใช้งาน Component เราจะตั้งเป้าหมายดังนี้ สร้างหน้าเว็บโดยมีการออกแบบ Component ประมาณนี้

Image

หลังจากที่สร้าง Project มาแล้ว Vue-cli จะสร้าง Component App และ HelloWorld เป็นตัวอย่างมาให้เราแล้ว หน้าที่ของเราคือ จะต้องสร้าง Component “MyComponent” แทรกเข้าไป ดังรูป จากบทความที่แล้ว(Vue.js เริ่มต้น ตอน1 (สร้าง Project)) Folder src เป็น Folder ที่เก็บ source code ดังนั้นเรามาดูกันก่อนว่าข้างในมีอะไรบ้าง และมันเริ่มทํางานจากไฟล์ไหน

Image

การทํางานนั้นจะเริ่มจากไฟล์ main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

ในไฟล์ mian.js จะ import Component App (./App.vue) เข้ามาเพื่อสร้าง Instance ของ Vue.js ซึ่งในตัวอย่างด้านบน หมายความว่า Vue.js จะเอา Component “App” Render ไปแปะไว้ใน tag ที่มี id=“app” ที่อยู่ในไฟล์ index.html

Image

พูดง่ายๆก็คือ เป็นจุดเริ่มต้นของ Vue.js นั่นเอง เริ่มสร้าง Component “MyComponent” โดยสร้างไฟล์ “./components/MyComponent.vue” ภายในจะมี source code ดังนี้

<template>
  <div id="helloText">
    Hello by ThitiBlog
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

<style>
  #helloText {
    color: #178bff;
  }
</style>

จะเห็นว่า Syntax ของ Component ใน Vue.js จะแบ่งออกเป็น 3 ส่วน คือ

  • template ส่วนนี้จะเป็นส่วนของ UI
  • script ส่วนนี้จะเป็นส่วนของ พฤติกรรมของ Component นี้ ซึ่งจะเขียนด้วย javascript ที่รูปแบบการเขียนจะต้องเขียนตามรูปแบบของ Vue.js
  • style ส่วนนี้จะเป็นส่วนของ CSS ซึ่งถ้าเราใส่ scoped เข้าไปแบบนี้ css ที่อยู่ภายใน tag นี้ทั้งหมดจะมีผลเฉพาะกับ component นี้เท่านั้น

Script และ Style ไม่จําเป็นต้องมีก็ได้ครับ

จากตัวอย่างด้านบน Component ที่ผมสร้างขึ้น จะแสดงคําว่า “Hello by ThitiBlog” โดยผมใส่ style เป็นสี #178bff เมื่อได้ Component มาแล้ว เราก็ทําไปแปะไว้ใน  Component “App” โดยวางไว้เหนือจาก Component “HelloWorld” วิธีคือ ไปแก้ไฟล์ App.vue ดังนี้

Image

ก็จะได้หน้าตาประมาณนี้

Image

ขอแถมถ้ายเพิ่มเติมนะครับ ถ้าต้องการจะส่ง Content ของ HTML ให้กับ Component แบบนี้

<alert-box>
  Something bad happened.
</alert-box>

ก็สามารถทําได้ครับโดยใช้  ครับ ตัวอย่าง

<template>
  <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'demoAlertBox'
}
</script>

ถึงจุดนี้ เราสามารถสร้าง Component มาใช้เองได้แล้ว และเข้าใจการทํางานของ Vue.js มากขึ้น

Suggestion blogs

Pull up, Pull down คืออะไร?

Pull up, Pull down คืออะไร?คือการต่อ ตัวต้านทานที่ขา input ของไมโครคอนโทลเลอร์ เหตุผลที่ต้องต่อคือ ถ้าเราต่อสวิตส์หรือ เซนเซอร์ต่างๆ เข้ากับไมโครคอนโทรเลอร์ตรงๆ อย่างเดียว อาจจะทำให้เกิดสัญญาณรบกวนได้ในกรณีที่ input ถูกลอยขาไว้ ไม่ได้จ่าย logic high หรือ low เช่น การต่อสวิตส์ ถ้าเรากดสวิตส์ จะทำให้มี logic high จ่ายให้กับ input ของไมโครคอนโทลเลอร์ แต่ถ้าเราปล่อยสวิตส์ ทำให้ ขา input ถูกลอยไว้ ไม่ได้ต่อลงกราวหรือ logic low ดังนั้นจึงต้องต่อ Pull up, Pull down เพื่อให้แน่ใจว่าเป็น logic high หรือ low เสมอ ถึงแม้ว่าจะไม่มี input ป้อนเข้ามา

Arduino ตอน9 วิธีใช้ Analog output (PWM) ใน arduino

สวัสดีครับ วันนี้เราจะมาเรียนรู้การใช้งาน Analog output หรือ PWM ใน Arduino กันครับ โดยปกติแล้ว Arduino จะทํางานกับข้อมูลหรือ I/O ที่เป็นแบบ Digital HIGH/LOW (0V/5V) แต่ในบางกรณีเราอาจจําเป็นต้องใช้งาน I/O ที่เป็นแบบ Analog (0v, 1V, 2V...5V) เพื่อใช้ควบคุมอุปกรณ์ที่เป็นแบบ Analog เช่น ความสว่างของหลอดไฟ, ควบคุมความเร็วของ Motor ฯลฯ

เหรียญ 20 บาท รางวัลผู้นำโลกด้านทรัพย์สินทางปัญญา พ.ศ.2551

รางวัลผู้นำโลกด้านทรัพย์สินทางปัญญา พ.ศ.2551ข้อมูลเหรียญกษาปณ์ที่ระลึกเฉลิมพระเกียรติพระบาทสมเด็จพระปรมินทรมหาภูมิพลอดุลยเดช เนื่องในโอกาสที่องค์การทรัพย์สินทางปัญญาโลก ( WIPO ) ทูลเกล้าทูลกระหม่อมถวายรางวัลผู้นำโลกด้านทรัพย์สินทางปัญญา เพื่อเฉลิมพระเกียรติและเชิดชูพระอัจฉริยภาพในการส่งเสริมเผยแพร่บทบาทด้านทรัพย์สินทางปัญญาและพัฒนานวัตกรรมสิ่งประดิษฐ์ต่าง ๆ โดยพัฒนาคุณภาพชีวิตของคนไทยและเป็นประโยชน์ต่อชาวโลก เช่น กังหันน้ำชัยพัฒนา และโครงการทำฝนหลวง ทรงเป็นนักสร้างสรรค์ นักประดิษฐ์ ผลงานของพระองค์ท่านทดลองแล้ว ได้ประโยชน์และมีผลในการปฏิบัติได้จริง มีคุณค่าในด้านทรัพย์สินทางปัญญาของโลก


Copyright © 2024 thiti.dev |  v1.16.0 |  Privacy policy |  status | 

            วงแหวนเว็บ