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
La Vue en Rose
By Konrad
La Vue en Rose
- 539