La Vue en Rose
The Progressive JavaScript Framework
Ökosystem & Werkzeuge
- vue-cli – einfaches & Plugin-basiertes Bootstrapping
- vue DevTools – Browser-Extension/App für Debugging
- vue-router – In-App Routing für SPA/PWA
- vuex – erweitertes State-Management
- vue-ssr – Server-Side-Rendering mit Node
Grundkonzepte
- Daten bestimmen Ausgabe (Reactive)
- Attribut-basierte Template Syntax (v-for, v-if, ...)
- data-binding (v-bind bzw :$attr Syntax, v-model)
- Events verändern Zustand (v-on bzw @$event Syntax, v-model)
for (token in ['foo', 'bar', 'baz']) { console.log(token) }['foo', 'bar', 'baz'].forEach(token => { console.log(token) })Mehr Syntax
- Arrays iterieren: v-for
- Dinge verstecken: v-if, v-else-if, v-else, v-show, v-hide
- Attribute setzen: v-bind:$attr, :$attr
- Text ausgeben: {{ var }}
- HTML ausgeben: v-html
- Events verarbeiten: v-on:$event, @$event
- Events verändern Zustand (v-on bzw @$event Syntax, v-model)
Komponenten
// foo.js
new Vue({
el: '#foo',
data: {
foo: 'bar'
}
})vs
<!-- Component.vue -->
<template>
<div>{{ foo }}</div>
</template>
<script>
export default {
data () {
return {
foo: 'bar'
}
}
}
</script>Slots
manchmal möchten wir Komponenten
in Komponenten stecken
// bernd.vue
<template>
<div>
<h1>{{ title }}</title>
<slot/>
<footer class="footer">
<slot name="footer"/>
</footer>
</div>
</template>// herbert.vue
<template>
<bernd>
Ich bin im Default-Slot
<p v-slot:footer>Ich bin im Footer</p>
</bernd>
</template>http://172.16.10.93:1234/
La Vue en Rose
By Konrad
