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