tiktok นับยอดวิวยังไง

“Directives” ใน Vue.js เป็นคำสั่งหรือตัวชี้ (คำสั่งพิเศษ) ที่ถูกใช้ใน HTML templates เพื่อให้ Vue.js ทำงานและปรับเปลี่ยนส่วนต่าง ๆ ของ DOM อย่างตรงไปตรงมา นี่คือตัวอย่างของ Directives ใน Vue.js:

1. v-bind: ใช้เพื่อ Binding (เชื่อมโยง) ค่า attribute ของ HTML element กับข้อมูลใน Vue instance. ตัวอย่างการใช้งาน:

<template>
  <div>
    <a v-bind:href="url">Visit our website</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "https://www.example.com",
    };
  },
};
</script>

2. v-model: ใช้สำหรับ Binding ค่า input, textarea, หรือ select element กับข้อมูลใน Vue instance ในโหมด two-way binding. ตัวอย่างการใช้งาน:

<template>
  <div>
    <input v-model="message" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue.js",
    };
  },
};
</script>

3. v-for: ใช้สำหรับการทำ loop และสร้างหลาย element จากข้อมูลใน Vue instance หรือ array. ตัวอย่างการใช้งาน:

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" },
      ],
    };
  },
};
</script>

4. v-if และ v-else: ใช้สำหรับการแสดงหรือซ่อน element ขึ้นอยู่กับเงื่อนไขที่กำหนด. ตัวอย่างการใช้งาน:

<template>
  <div>
    <p v-if="showMessage">This message is visible</p>
    <p v-else>This message is hidden</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true,
    };
  },
};
</script>

5. v-on: ใช้สำหรับเชื่อมโยง Event Handler กับ HTML element เพื่อจัดการกับ Events ต่าง ๆ เมื่อเกิดขึ้น. ตัวอย่างการใช้งาน:

<template>
  <div>
    <button v-on:click="sayHello">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    sayHello() {
      alert("Hello, Vue.js!");
    },
  },
};
</script>

นี่เป็นเพียงตัวอย่างของ Directives ใน Vue.js ยังมี Directives อื่น ๆ อีกหลายตัวที่ใช้สำหรับการควบคุมและแสดงผลใน HTML templates และช่วยให้คุณสามารถจัดการและควบคุม DOM ได้อย่างมีประสิทธิภาพในแอปพลิเคชัน Vue.js ของคุณ.