Directives ใน Vue.js อนุญาตให้คุณใช้พฤติกรรมพิเศษกับองค์ประกอบใน DOM คำนำหน้าด้วย v- ไวยากรณ์และใช้เพื่อจัดการ DOM จัดการเหตุการณ์ แสดงองค์ประกอบตามเงื่อนไข และอื่นๆ Vue.js มีบิวด์อินหลายตัว directives เช่น,, , และ ซึ่งครอบคลุมกรณีการใช้งานทั่วไปที่หลากหลาย v-if v-for v-bind v-on
นี่คือบางส่วนทั่วไป directives ใน Vue.js:
1. คำสั่ง: คำสั่งนี้ใช้เพื่อแสดงองค์ประกอบตามเงื่อนไขตามเงื่อนไข v-if
ตัวอย่าง:
<div v-if="isShow">This element is only displayed if isShow is true.</div>
2. คำสั่ง: คำสั่งนี้ใช้เพื่อวนซ้ำอาร์เรย์หรือวัตถุและสร้างองค์ประกอบที่เกี่ยวข้อง v-for
ตัวอย่าง:
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
3. คำสั่ง: คำสั่งนี้ใช้เพื่อผูกค่าของนิพจน์กับแอตทริบิวต์หรือคุณสมบัติขององค์ประกอบ v-bind
ตัวอย่าง:
<img v-bind:src="imageUrl">
4. คำสั่ง: คำสั่งนี้ใช้เพื่อรับฟังและจัดการกับเหตุการณ์ในองค์ประกอบ v-on
ตัวอย่าง:
<button v-on:click="handleClick">Click me!</button>
5. คำสั่ง: คำสั่งนี้สร้างการเชื่อมโยงสองทางระหว่างองค์ประกอบอินพุตและคุณสมบัติของข้อมูล v-model
ตัวอย่าง:
<input v-model="message">
นี่เป็นเพียงพื้นฐานบางส่วน directives ใน Vue.js คุณยังสามารถสร้างแบบกำหนดเอง directives เพื่อดำเนินการพฤติกรรมเฉพาะในแอปพลิเคชัน Vue.js ของคุณ