Το Vue είναι ένα προοδευτικό JavaScript framework για τη δημιουργία διεπαφών χρήστη. Σε αντίθεση με άλλα μονολιθικά frameworks, το Vue έχει σχεδιαστεί από την αρχή για να είναι σταδιακά υιοθετήσιμο. Η βασική βιβλιοθήκη εστιάζει μόνο στο επίπεδο της προβολής και είναι εύκολο να εφαρμοστεί και να ενσωματωθεί με άλλες βιβλιοθήκες ή υπάρχοντα έργα.
Λίστες
<li v-for="todo in todos">
{{ todo.text }}
{{ $index }}
</li>
Συμβάντα (Events)
<button v-on:click='submit'>Μετάβαση</button>
Στοιχεία (Components)
new Vue({
components: { app: App }
})
Διεπαφή API
Vue.extend({ ... }) // δημιουργία στοιχείων
Vue.nextTick(() => {...})
Vue.set(object, key, val) // αντιδραστικότητα
Vue.delete(object, key)
Vue.directive('my-dir', { bind, update, unbind })
// <div v-my-dir='...'></div>
Vue.elementDirective('my-dir', { bind, update, unbind })
// <my-dir>...</my-dir>
Vue.component('my-component', Vue.extend({ .. }))
Vue.partial('my-partial', '<div>γεια {{msg}}</div>')
// <partial name='my-partial'></partial>
new Vue({
data: { ... }
props: ['size'],
props: { size: Number },
computed: { fullname() { return this.name + ' ' + this.lastName } },
methods: { go() { ... } },
watch: { a (val, oldVal) { ... } },
el: '#foo',
template: '...',
replace: true, // αντικατάσταση στοιχείου (προεπιλογή true)
// κύκλος ζωής
created () {},
beforeCompile () {},
compiled () {},
ready () {}, // το $el εισάγεται για πρώτη φορά
attached () {},
detached () {},
beforeDestroy () {},
destroyed () {},
// επιλογές
directives: {},
elementDirectives: {},
filters: {},
components: {},
transitions: {},
partials: {}
})
Πρότυπο Vue
Ανατρέξτε στο vueify
// app.vue
<template>
<h1 class="red">{{msg}}</h1>
</template>
<script>
module.exports = {
data () {
return {
msg: 'Γεια χαρά!'
}
}
}
</script>
και
<template lang='jade'>
h1(class='red') {{msg}}
</template>