Jinsi ya Kutumia Vue Components na Directives

Jifunze jinsi ya kutumia Vue.js components na directives kutengeneza modular, reusable, na interactive UI elements. Components zinasaidia kupanga code vizuri, na directives zinakuwezesha ku-control behavior ya DOM kwa urahisi.

Mfano wa Code:

Create a Vue Component

<!-- src/components/Greeting.vue -->
<template>
<div>
<h2 v-if="name">Hello, {{ name }}!</h2>
<h2 v-else>Hello, Guest!</h2>
</div>
</template>

<script>
export default {
name: 'Greeting',
props: ['name']
};
</script>


Use Component in App.vue

<template>
<div id="app">
<Greeting name="Faustine" />
<Greeting name="Aisha" />
<Greeting />
</div>
</template>

<script>
import Greeting from './components/Greeting.vue';

export default {
name: 'App',
components: { Greeting }
};
</script>


Common Vue Directives:

v-if / v-else: Conditional rendering

v-for: Loop through arrays/objects

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


v-bind: Bind attributes dynamically

<img v-bind:src="imageUrl" alt="Dynamic Image">


v-on: Event handling

<button v-on:click="handleClick">Click Me</button>


Maelezo ya Code:

Components ni reusable pieces of UI, zinazopokea props.

Directives zinadhibiti DOM behavior dynamically.

v-if na v-for zinafanya rendering conditional na iteration effortless.

v-bind na v-on zinatumika ku-bind data na events kwa components.

Tips:

Components ziwe small and focused kwa task moja.

Directives hufanya code kuwa concise na readable.

Combine multiple directives (v-if, v-for) kwa dynamic rendering.

🔗 Links Za Kujifunza Zaidi:
🌐 Faulink Official Website:
https://www.faulink.com/

📘 Jifunze Web Design & Programming (Tutorials / Mifumo):
https://www.faulink.com/excel_mifumo.php

📲 Piga / WhatsApp kwa msaada wa haraka:
https://wa.me/255693118509