Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 4: การใช้ Template ใน Vue.js

1. Template ใน Vue.js คืออะไร?

Template ใน Vue.js ใช้สำหรับกำหนดโครงสร้าง HTML ที่แสดงผลในหน้าจอ โดย Vue.js จะช่วยเชื่อมโยงระหว่างข้อมูล (Data) และการแสดงผล (View) อย่างมีประสิทธิภาพ

2. Syntax พื้นฐานใน Template

การแสดงค่าด้วย Interpolation

  • การใช้ {{ }} เพื่อแสดงค่าจาก Data:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

ผลลัพธ์:

1
Hello Vue!

การใช้ Directives

Directives เป็นคำสั่งพิเศษใน Vue.js ที่เริ่มต้นด้วย v- เช่น v-bind, v-if, และ v-for

ตัวอย่าง:

  1. v-bind: ใช้สำหรับผูกข้อมูลกับ Attribute ของ HTML เช่น class หรือ id
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div>
    <a :href="url">Click Here</a>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      url: 'https://vuejs.org'
    };
  }
};
</script>
  1. v-if และ v-else: ใช้สำหรับการแสดงผลแบบเงื่อนไข
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div>
    <p v-if="isLoggedIn">Welcome back!</p>
    <p v-else>Please log in.</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isLoggedIn: true
    };
  }
};
</script>
  1. v-for: ใช้สำหรับการวนลูปแสดงรายการ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>
 
<script>
export default {
  data() {
    return {
      items: ['Apple', 'Banana', 'Cherry']
    };
  }
};
</script>

ผลลัพธ์:

1
2
3
- Apple
- Banana
- Cherry

3. การ Binding Attribute ด้วย v-bind

v-bind ใช้สำหรับผูกค่าใน Data กับ Attribute ของ HTML เช่น class, id, href:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div :class="dynamicClass">This is a dynamic class example</div>
</template>
 
<script>
export default {
  data() {
    return {
      dynamicClass: 'highlight'
    };
  }
};
</script>
 
<style>
.highlight {
  color: red;
  font-weight: bold;
}
</style>

ผลลัพธ์:
ข้อความจะมีสีแดงและตัวหนา

4. การ Binding ข้อมูลแบบสองทางด้วย v-model

v-model ใช้สำหรับการเชื่อมโยงข้อมูลแบบสองทาง เช่น การป้อนข้อมูลในฟอร์ม:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div>
    <input v-model="name" placeholder="Enter your name" />
    <p>Hello, {{ name }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      name: ''
    };
  }
};
</script>

ผลลัพธ์:
เมื่อผู้ใช้กรอกชื่อในช่อง Input ข้อความจะแสดงผลตามข้อมูลที่ป้อน

5. ตัวอย่างการรวม Directives

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
  <div>
    <h1 :class="{ active: isActive }">Dynamic Class Example</h1>
    <p v-if="isActive">This text is visible when active.</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="toggleActive">Toggle Active</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isActive: true,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
};
</script>
 
<style>
.active {
  color: green;
}
</style>

ผลลัพธ์:

  • เมื่อ isActive เป็น true ข้อความจะมีสีเขียวและแสดงข้อความพิเศษ
  • คลิกปุ่มเพื่อสลับสถานะการแสดงผล

6. สรุป

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับ:

  • การใช้ Template ใน Vue.js
  • การแสดงผลด้วย Interpolation
  • การใช้ Directives เช่น v-bind, v-if, v-for, และ v-model
  • การผูกข้อมูลแบบสองทาง

ในบทถัดไป เราจะเจาะลึกเกี่ยวกับ Data และ Methods เพื่อเพิ่มความสามารถในการควบคุม Component ของคุณ!