Το Riot.js είναι μια ελαφριά και κομψή βιβλιοθήκη διεπαφής χρήστη βασισμένη σε στοιχεία με virtual DOM.
Ορισμός Στοιχείου (my-component.riot)
<user-card>
<div class="card">
<h3>{ state.name }</h3>
<p>Role: { props.role }</p>
<button onclick="{ handleIncrement }">Likes: { state.likes }</button>
</div>
<script>
export default {
onBeforeMount(props, state) {
this.state = {
name: props.initialName || 'Anonymous',
likes: 0
};
},
handleIncrement() {
this.update({
likes: this.state.likes + 1
});
}
}
</script>
</user-card>
Συμβάντα Κύκλου Ζωής
| Μέθοδος | Στάδιο Ενεργοποίησης |
|---|---|
onBeforeMount(props, state) |
Πριν προσαρτηθεί το στοιχείο στο DOM |
onMounted(props, state) |
Αφού το στοιχείο προσαρτηθεί στο DOM |
onBeforeUpdate(props, state) |
Πριν από την ενημέρωση και επανασχεδίαση της κατάστασης |
onUpdated(props, state) |
Μετά την ενημέρωση του DOM του στοιχείου |
onBeforeUnmount(props, state) |
Ακριβώς πριν την καταστροφή του στοιχείου |
onUnmounted(props, state) |
Αφού το στοιχείο αφαιρεθεί από το DOM |
Βρόχοι & Συνθήκες
<!-- Συνθήκες -->
<p if="{ state.isLoggedIn }">Καλώς ήρθατε πίσω!</p>
<button if="{ !state.isLoggedIn }">Σύνδεση</button>
<!-- Βρόχοι -->
<ul>
<li each="{ item in state.items }">
{ item.title }
</li>
</ul>