Jinsi ya Kutumia Vue Reactive Data na Methods

Jifunze jinsi ya kutumia reactive data na methods katika Vue.js ili kutengeneza interactive na dynamic UI. Reactive data hubadilika moja kwa moja kwenye DOM wakati state ya component inabadilika, huku methods zikishughulikia actions za user.

Mfano wa Code:

<!-- src/components/Counter.vue -->
<template>
<div>
<h2>Counter: {{ count }}</h2>
<button @click="increment">Increase</button>
<button @click="decrement">Decrease</button>
</div>
</template>

<script>
export default {
name: 'Counter',
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
};
</script>

<style scoped>
button {
margin: 5px;
padding: 5px 10px;
background-color: #42b983;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #369870;
}
</style>

Use Component in App.vue

<template>
<div id="app">
<Counter />
</div>
</template>

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

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

Maelezo ya Code:

data(): Inareturn reactive object (count) ambayo inashughulikia state ya component.

methods: Functions (increment na decrement) zinashughulikia actions za user.

@click ni shorthand ya v-on:click kwa event binding.

Kila click hubadilisha reactive data na DOM inarender automatically.

Tips:

Tumia reactive data kwa state ya component.

Methods zinapaswa kushughulikia actions, siyo data storage.

Combine reactive data na computed properties kwa calculations automatic.

🔗 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