Template ใน vue.js

VueJS

Created At : 2023-09-03 15:36

Views 👀 :

Template ใน Vue.js ใช้สำหรับสร้างและกำหนดโครงสร้างของหน้าเว็บแอปพลิเคชัน Vue.js และแสดงข้อมูลหรือข้อมูลที่ถูกจัดการในโครงสร้างนี้ โดยใช้คำสั่ง HTML-like (หรือ HTML template syntax) ที่เรียกว่า “Directive” ในการกำหนดพฤติกรรมและข้อมูลที่แสดงบนหน้าเว็บ. นี่คือตัวอย่างของ template ใน Vue.js:

<template>
  <div>
    <h1>{{ message }}</h1>
    <p>This is a Vue.js template example.</p>
  </div>
</template>

ในตัวอย่างนี้:

<template> คือแท็กที่ใช้ในการกำหนด template ใน Vue.js.
{{ message }} คือการแสดงข้อมูลบนหน้าเว็บ ในที่นี้ message คือตัวแปรที่ถูกกำหนดในส่วน data ของ Vue.js และข้อมูลนี้จะถูกแสดงในที่กำหนดที่หัวข้อ <h1> ใน template.

นอกจากนี้ยังมี Directives อื่นๆ ที่คุณสามารถใช้ใน template ได้ เช่น:

v-bind: ใช้ในการกำหนด attribute ของ element โดยใช้ข้อมูลจาก Vue instance.
v-for: ใช้ในการวนลูปแสดงข้อมูล.
v-if, v-else, v-else-if: ใช้ในการควบคุมการแสดงแบบเงื่อนไข.
v-on: ใช้ในการเชื่อมต่อกับ event และเรียกฟังก์ชัน.

ตัวอย่าง template ด้านล่างนี้แสดงการใช้งาน v-bind และ v-for:

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

ใน template นี้:

{{ title }} จะแสดงข้อมูลจาก title ที่ถูกกำหนดใน Vue instance.
v-for จะวนลูปข้อมูลใน items และแสดงชื่อของแต่ละรายการในรายการอันดับ <ul>.

Template เป็นส่วนสำคัญในการพัฒนา Vue.js และมีความสามารถที่หลากหลายในการสร้าง UI และกำหนดพฤติกรรมในแอปพลิเคชันของคุณ.