เริ่มศึกษา VueJS อะไร เป็นยังไง ทำหน้าที่อะไร จากโค้ดตัวอย่าง

บทความใหม่ เดือนนี้ โดย Ninenik Narkdee
vuejs

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ vuejs

ดูแล้ว 231 ครั้ง


เนื้อหาตอนต่อไปนี้ เราจะทำความเข้าใจต่อเนื่องจากโปรเจกต์ตัวอย่าง
ต่อจากตอนที่แล้ว แต่ก่อนอื่น ในการเขียนโปรแกรมด้วย VueJS ชิ้นงาน
สุดท้ายที่จะถูกนำไปใช้ก็จะเป็นภาษา JavaScript เราจะมาทำการ build
โดยสมมติว่าโปรเจกต์ของเราได้เสร็จเรียบร้อยแล้ว และพร้อมนำไปใช้งาน
เราจะมาดูว่า เมื่อเราทำการ build หรือคอมไพล์ออกมาแล้วจะได้ผลลัพธ์
เป็นอย่างไร โดยไปที่ โฟลเดอร์ของโปรเจกต์ และใช้คำสั่งดังนี้
 

การส่งออกเป็น production เบื้องต้น

เมื่อเตรียม Vue.js project เรียบร้อยแล้วและต้องการส่งออกเป็น production
 
npm run build
 


 
 
เครื่องมือ vite จะทำการคอมไพล์ไฟล์ต่างๆ สำหรับนำไปใช้งาน ตามโครงสร้างดังรูป
จะเห็นว่า มีการสร้างโฟลเดอร์ dist ตามที่เรากำหนดไว้ สำหรับในการตั้งค่าจากบทความ
ตอนที่แล้ว ซึ่งเราสามารถนำไฟล์ต่างๆในโฟลเดอร์ดังกล่าว ไปใช้งานหรืออัปโหลดขื้น server
ได้เลย 
 
อย่างไรก็ตาม เราสามารถทดสอบรันไฟล์ production ก่อนนำไปอัปโหลดได้ โดยหาก
เครื่องของเราได้ทำการติดตั้ง Python ไว้อยู่แล้ว สามารถ เข้าไปยังโฟลเดอร์ dist แล้ว
รันคำสั่ง
 
python3 -m http.server 8000
 


 
 
เสร็จแล้วทำการเปิดบราวเซอร์แล้วเข้าไปยัง http://localhost:8000/
ก็จะเห็นผลลัพธ์ เราสามารถทดสอบการทำงานได้
 
หรือกรณีเราไม่มี  Python ติดตั้งอยู่ สามารถติดตั้ง serve เพื่อใช้งานได้ โดยทำ
ตามคำสั่งดังนี้  
 
npm install -g serve
 


 
 
แล้วเข้าไปยังโฟลเดอร์ dist แล้วใช้คำสั่ง
 
serve -s .
 


 
 
เท่านี้เราก็สามารถดูผลลพัทธ์โดยเข้าไปที่ http://localhost:3000 
หรือจะเข้าทดสอบผ่านมือถือที่ใช้ในเน็ตเวิร์คเดียวกันที่ http://159.154.98.133:3000
 
กลับมาดูกันที่โฟลเดอร์ dist ที่เป็นโฟลเดอร์ไฟล์ production 
 


 
 
ไฟล์ css และ js ไฟล์จะถูกบีบอัดอยู่ในรูปแบบ minify สามารถนำไปใช้งานได้ทันที
 
 

ศึกษา VueJS จากโค้ดตัวอย่าง

ตอนนี้เราทิ้งส่วนของ production ไปก่อน กลับมาส่วนการของการพัฒนากันต่อ เรามาดู
ว่า เราสามารถจะศึกษาหรือทำความเข้าใจภาษา VueJS เบื้องต้นจากโค้ดตัวอย่างได้อย่างไร
สำหรับโค้ดตัวอย่าง ผลลัพธ์ที่ได์ ก็จะคล้ายๆ กับหน้าเพจหนึ่งหน้า ที่แสดงข้อมูล ดังนั้น เนื้อหา
เกี่ยวกับ VueJS ตอนนี้อาจจะไม่มีอะไรมาก เรามาดูกัน
 


 
 

ไฟล์ index.html

 


 
 
<div id="app"></div>: ในที่นี้เป็นตำแหน่งที่ Component หลักของแอปพลิเคชัน 
Vue.js จะถูกแสดงผล โดยมักจะมี ID เป็น "app" ตามที่โค้ด Vue.js ได้กำหนดไว้
 
<script type="module" src="/src/main.js"></script>: เชื่อมโยงไฟล์ JavaScript
เพื่อให้แอปพลิเคชัน Vue.js เริ่มต้นการทำงาน โดยที่ src/main.js คือไฟล์ JavaScript 
ที่เริ่มต้นแอปพลิเคชัน Vue.js โดยไฟล์นี้มักจะใช้ createApp(App).mount('#app') 
เพื่อทำการสร้างและ mount แอปพลิเคชัน Vue.js ใน Element ที่มี ID เป็น "app" 
ตามที่กำหนดไว้ใน HTML นี้
 
โค้ด HTML ดังกล่าวเป็นโครงสร้างพื้นฐานของหน้าเว็บไซต์ Vue.js ที่ถูกสร้างด้วย Vite 
หรือ Vue CLI และสามารถแก้ไขและปรับแต่งตามความต้องการของโปรเจคได้ตามต้องการ
 
 

การ mount แอปพลิเคชัน Vue.js คืออะไร

การ mount แอปพลิเคชัน Vue.js หมายถึงการเชื่อมโยง (หรือใช้) แอปพลิเคชัน Vue.js 
กับ element บนหน้า HTML ของเว็บไซต์ โดยที่แอปพลิเคชัน Vue.js จะถูกเริ่มต้นและ
ทำงานบน element นั้น ๆ ใน DOM (Document Object Model) ของเว็บไซต์
 
ใน Vue.js, เราใช้ createApp() เพื่อสร้าง instance ของแอปพลิเคชัน Vue.js และเรียก
เมธอด mount() เพื่อ mount แอปพลิเคชัน Vue.js นี้บน element ใด ๆ ใน DOM 
ของเว็บไซต์
 
เราไปต่อกันที่ไฟล์ main.js
 

ไฟล์ main.js

 


 
 
โค้ดข้างต้นเป็นส่วนหนึ่งของการสร้างแอปพลิเคชัน Vue.js โดยมีลักษณะการทำงานดังนี้:
 
import './assets/main.css': 
บรรทัดนี้ใช้สำหรับ import CSS file เข้าสู่โครงสร้างของแอปพลิเคชัน Vue.js โดยไฟล์ CSS 
ที่ import เข้ามานั้นคือ './assets/main.css' ซึ่งอาจจะเป็นไฟล์ CSS ที่ใช้สำหรับสไตล์
แอปพลิเคชัน เช่น การกำหนดรูปแบบ, การจัดหน้าเว็บ, หรือการทำงานกับคลาสที่กำหนดเอง
import { createApp } from 'vue': 
ในบรรทัดนี้เรากำหนดการ import createApp function จากไลบรารี Vue ซึ่งเป็นฟังก์ชัน
หลักที่ใช้ในการสร้าง instance ของแอปพลิเคชัน Vue.js
import App from './App.vue':
ในบรรทัดนี้เรากำหนดการ import component หลักของแอปพลิเคชัน Vue.js ซึ่งอาจจะ
ชื่อว่า App.vue ซึ่งเป็นโครงสร้างหลักของแอปพลิเคชัน Vue.js และบังคับให้แอปพลิเคชันเริ่มต้นใช้ App component นี้
createApp(App).mount('#app'): 
ในบรรทัดสุดท้ายนี้ เราสร้าง instance ของแอปพลิเคชัน Vue.js โดยใช้ createApp() 
และนำ App component ที่เรา import เข้ามาเป็นอาร์กิวเมนต์ จากนั้นเราใช้เมธอด 
mount('#app') เพื่อนำแอปพลิเคชัน Vue.js มาผูกกับ element ที่มี id เป็น 'app'
ใน HTML นั่นหมายความว่าแอปพลิเคชัน Vue.js จะเริ่มทำงานบน element นี้และจะ
แสดงผลลัพธ์ที่ได้ไปยัง DOM ในส่วนที่มี id เป็น 'app'
 
โดยสรุปคือ โค้ดดังกล่าวมีคำสั่งสำหรับ import CSS file, import ฟังก์ชัน createApp
และ import component หลักของแอปพลิเคชัน Vue.js ซึ่งจากนั้นจะสร้าง instance 
ของแอปพลิเคชัน Vue.js และผูกกับ element ใน DOM เพื่อให้แอปพลิเคชันเริ่มทำงาน
 

ไฟล์ App.vue

 
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
 
ไฟล์ App.vue เป็น component หลักที่ใช้ในการสร้างหน้าเว็บแอปพลิเคชันใน Vue.js 
โดยส่วนที่แสดงด้านบนคือ Single-File Component (SFC) ที่ประกอบด้วยส่วน script, template, และ style
ซึ่งเป็นส่วนหนึ่งของ Vue.js ที่ช่วยให้เราสามารถเขียน HTML, JavaScript, และ CSS ได้ในไฟล์เดียว
เป็นรูปแบบส่วนใหญ่ที่ใช้งานร่วมกับการเขียนที่มี การ build ตามที่เรากำลังทำอยู่
 
อธิบายแต่ละส่วนของไฟล์ App.vue:
 
<script setup>: 
ในส่วนนี้เราใช้ <script setup> ซึ่งเป็นส่วนหนึ่งของ Composition API ใน Vue 3.
ในบรรทัดต่อไปเรา import component HelloWorld.vue และ TheWelcome.vue 
เข้ามาในไฟล์ App.vue เพื่อนำมาใช้งานในส่วนของ template 
<template>: 
ส่วนนี้เป็นโค้ด HTML ที่ใช้สำหรับแสดง UI ของเว็บแอปพลิเคชัน Vue.js 
<header>: ส่วนหัวของหน้าเว็บ ซึ่งประกอบไปด้วยโลโก้ Vue.js และ component HelloWorld ที่ถูกนำเข้ามา
<main>: ส่วนหลักของหน้าเว็บ ซึ่งประกอบด้วย component TheWelcome ที่ถูกนำเข้ามา
<style scoped>: 
ส่วนนี้เป็นส่วนของ CSS ที่ใช้สำหรับสไตล์ UI ของเว็บแอปพลิเคชัน Vue.js ของเรา โดยมี 
scoped attribute เพื่อให้สไตล์ที่ระบุในส่วนนี้มีผลเฉพาะกับ component App.vue เท่านั้น
 
รายละเอียดเพิ่มเติม:
 
<script setup>: เป็นตัวย่อของ <script> ซึ่งใช้ในการกำหนด logic และการ 
import/export ของโค้ดใน component โดยใช้ Composition API
<template>: ส่วนนี้ใช้ในการกำหนดโค้ด HTML สำหรับแสดงผลบนหน้าเว็บของแอปพลิเคชัน
<style scoped>: ส่วนนี้ใช้ในการกำหนดสไตล์ CSS สำหรับ component ของ Vue.js 
โดย scoped attribute จะทำให้สไตล์ CSS ที่ระบุในส่วนนี้มีผลกับเฉพาะ component นั้น ๆ 
และไม่มีผลต่อ component อื่น ๆ ในแอปพลิเคชัน
 
เราจะดูเพิ่มเติมอีก 2-3 ไฟล์ จะไม่ได้นำทั้งหมดมาอธิบาย ทั้งนี้เพราะรูปแบบแต่ละไฟล์จะ
ไม่แตกต่างกันมากนัก
 

ไฟล์  HelloWorld.vue

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
    </h3>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>
 
ไฟล์ HelloWorld.vue เป็น Component ที่ใช้ในการแสดงข้อความต้อนรับบนหน้าเว็บ 
Vue.js โดยมีโครงสร้างของ Single-File Component (SFC) ประกอบด้วยส่วน 
<script setup>, <template>, และ <style scoped> ดังนี้:
 
<script setup>:
ใช้สำหรับกำหนดโค้ด JavaScript โดยใช้ Composition API ใน Vue 3
ใช้ defineProps() เพื่อกำหนด Props ที่ชื่อ msg ซึ่งมี type เป็น String 
และจำเป็นต้องระบุ
<template>:
ใช้สำหรับกำหนดโค้ด HTML ที่ใช้แสดงผลบนหน้าเว็บ
ประกอบด้วย Element <div> ซึ่งมี class เป็น greetings และประกอบด้วย Element <h1> และ <h3> เพื่อแสดงข้อความต้อนรับ
<style scoped>:
ใช้สำหรับกำหนดสไตล์ CSS สำหรับหน้า HTML ใน Component HelloWorld.vue
มีการกำหนดสไตล์ของ Element <h1> และ <h3> เพื่อปรับขนาดและจัดตำแหน่งข้อความ
มีการใช้ Media Query เพื่อปรับแต่งสไตล์ของ Element <h1> และ <h3> ให้เหมาะสมกับ
ขนาดหน้าจอที่ใหญ่ขึ้น (min-width: 1024px) โดยทำให้ข้อความอยู่ชิดซ้ายในขนาด
หน้าจอใหญ่ขึ้น
 
 

ไฟล์ TheWelcome.vue

<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
</script>

<template>
  <WelcomeItem>
    <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>Documentation</template>

    Vue’s
    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
    provides you with all information you need to get started.
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <ToolingIcon />
    </template>
    <template #heading>Tooling</template>

    This project is served and bundled with
    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
    recommended IDE setup is
    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
    you need to test your components and web pages, check out
    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
      >Cypress Component Testing</a
    >.

    <br />

    More instructions are available in <code>README.md</code>.
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <EcosystemIcon />
    </template>
    <template #heading>Ecosystem</template>

    Get official tools and libraries for your project:
    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
    you need more resources, we suggest paying
    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
    a visit.
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <CommunityIcon />
    </template>
    <template #heading>Community</template>

    Got stuck? Ask your question on
    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
    Discord server, or
    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
      >StackOverflow</a
    >. You should also subscribe to
    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
    the official
    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
    twitter account for latest news in the Vue world.
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <SupportIcon />
    </template>
    <template #heading>Support Vue</template>

    As an independent project, Vue relies on community backing for its sustainability. You can help
    us by
    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
  </WelcomeItem>
</template>
 
ไฟล์ TheWelcome.vue เป็น Component ที่ใช้ในการแสดงรายการต้อนรับหลาย
รายการบนหน้าเว็บ Vue.js โดยมีโครงสร้างของ Single-File Component (SFC) 
ประกอบด้วยส่วน <script setup>, <template> ดังนี้:
 
<script setup>:
- ใช้สำหรับกำหนดโค้ด JavaScript โดยใช้ Composition API ใน Vue 3
- นำเข้า Component WelcomeItem และ Icons ต่าง ๆ มาใช้งาน
<template>:
- ใช้สำหรับกำหนดโค้ด HTML ที่ใช้แสดงผลบนหน้าเว็บ
- ประกอบด้วย Element <WelcomeItem> ที่มีการนำ Icons และข้อความต้อนรับมาแสดงผล
- มีการใช้งาน Template Slots เพื่อกำหนดการแสดงผลของ Icons และ Heading 
ที่มีข้อความแตกต่างกันในแต่ละ WelcomeItem
 
จุดเด่นของไฟล์ TheWelcome.vue คือการใช้งาน Slot ในการแทรกข้อมูลแบบ dynamic 
ไปยัง Component WelcomeItem และการใช้งาน Template Slots เพื่อกำหนด
การแสดงผลของ Icons และ Heading ในแต่ละ WelcomeItem ที่มีโครงสร้างที่เป็น
ไปตามความต้องการของผู้ใช้งาน
 

ไฟล์ WelcomeItem.vue

<template>
  <div class="item">
    <i>
      <slot name="icon"></slot>
    </i>
    <div class="details">
      <h3>
        <slot name="heading"></slot>
      </h3>
      <slot></slot>
    </div>
  </div>
</template>

<style scoped>
.item {
  margin-top: 2rem;
  display: flex;
  position: relative;
}

.details {
  flex: 1;
  margin-left: 1rem;
}

i {
  display: flex;
  place-items: center;
  place-content: center;
  width: 32px;
  height: 32px;

  color: var(--color-text);
}

h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--color-heading);
}

@media (min-width: 1024px) {
  .item {
    margin-top: 0;
    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
  }

  i {
    top: calc(50% - 25px);
    left: -26px;
    position: absolute;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    border-radius: 8px;
    width: 50px;
    height: 50px;
  }

  .item:before {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    bottom: calc(50% + 25px);
    height: calc(50% - 25px);
  }

  .item:after {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    top: calc(50% + 25px);
    height: calc(50% - 25px);
  }

  .item:first-of-type:before {
    display: none;
  }

  .item:last-of-type:after {
    display: none;
  }
}
</style>
 
ไฟล์ WelcomeItem.vue เป็น Component ที่ใช้ในการแสดงรายการต้อนรับแต่ละรายการ
บนหน้าเว็บ Vue.js โดยมีโครงสร้างของ Single-File Component (SFC) ประกอบด้วย
ส่วน <template> และ <style scoped> ดังนี้:
 
<template>:
- ใช้สำหรับกำหนดโค้ด HTML ที่ใช้แสดงผลบนหน้าเว็บ
- ประกอบด้วย Element <div> ที่มี class เป็น item ที่ประกอบด้วย Element <i> 
และ <div class="details"> โดยใช้ Template Slots เพื่อแทรกข้อมูลและ Element 
จาก Component ที่เรียกใช้งาน WelcomeItem
<style scoped>:
- ใช้สำหรับกำหนดสไตล์ CSS สำหรับหน้า HTML ใน Component WelcomeItem.vue
- มีการกำหนดสไตล์ของ Element .item และ .details เพื่อจัดการวางและการจัดข้อความ
- มีการใช้งาน Media Query เพื่อปรับสไตล์ของ Element .item เมื่อหน้าจอมีขนาดใหญ่ขึ้น 
(min-width: 1024px) โดยทำให้แต่ละ WelcomeItem มีการจัดตำแหน่งและการแสดงผล
ที่สวยงามขึ้น
 
ไฟล์ WelcomeItem.vue เป็น Component ที่มีโครงสร้างที่เป็นเหมือนและเป็นที่เข้าใจง่ายเพื่อใช้ในการแสดง
รายการต้อนรับที่หลากหลายในหน้าเว็บ Vue.js โดยมีความสามารถในการปรับแต่งการแสดงผลตามความต้องการของผู้ใช้งาน
 

ไฟล์ IconCommunity.vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
    <path
      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
    />
  </svg>
</template>
 
 
ไฟล์ IconCommunity.vue เป็น Component ที่ใช้ในการแสดงไอคอนที่เกี่ยวข้องกับ
ชุมชนบนหน้าเว็บ Vue.js โดยมีโครงสร้างของ Single-File Component (SFC) 
ประกอบด้วยส่วน <template> ดังนี้:
 
<template>:
- ใช้สำหรับกำหนดโค้ด HTML ที่ใช้แสดงผลไอคอนบนหน้าเว็บ
- มีการใช้งาน SVG (Scalable Vector Graphics) เพื่อแสดงรูปแบบของไอคอนที่
เกี่ยวข้องกับชุมชน
- รายละเอียดของไอคอนถูกกำหนดใน Attribute d ซึ่งแสดงเส้นทางของเส้นและการวาด
รูปร่างของไอคอน
 
ไฟล์ IconCommunity.vue จะแสดงไอคอนที่เกี่ยวข้องกับชุมชนบนหน้าเว็บ Vue.js ใน
รูปแบบของ SVG ซึ่งเป็นวิธีที่นิยมในการแสดงภาพและไอคอนในเว็บไซต์แบบ scalable 
ที่สามารถปรับขนาดได้โดยไม่เสียคุณภาพ
 
เนื้อหาในตอนนี้ ให้เราอ่านทำความเข้าใจแต่ละส่วน ซึ่งจะมีประโยชน์อย่างมาก ทำให้เราเข้า
ใจการทำงานของ vue ในเบื้องต้นได้  ตอนนี้ เรายังไม่ได้ลงลึกไปเกี่ยวกับการเขียนโปรแกรม
ด้วยรูปแบบภาษา VueJS แต่ให้รู้โดยทั่วไปก่อนว่า แต่ละส่วนคืออะไร มีความหมายอย่างไร
ใช้ทำอะไร
 
โดยถ้ามองตามความเข้าใจเบื้องต้น มองว่าข้างต้น หลักๆ เป็นคล้ายกับรูปแบบการกำหนด html
สำหรับแสดงเป็นส่วนใหญ่ คล้ายกับการทำหน้าเพจทั่วไป แล้วนำแต่ละส่วนมาแสดงรวมกันที่
ไฟล์หลัก อย่างไรก็ดี ยังมีส่วนอื่นๆ ที่เรายังไมได้เริ่มต้นศึกษา รอติดตามต่อในบทความต่อๆ ไป


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ



ทบทวนบทความที่แล้ว









เนื้อหาที่เกี่ยวข้อง



Tags:: vuejs







URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ