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'
    }
})

<!-- 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/