Vue

Vue.js kann einfach in den bestehenden Workflow integriert werden.

Vue Router und Vuex

Lorem ipsum dolor sit amet, Vue Router consectetur adipisicing elit. Ad adipisci animi at cupiditate dicta eaque enim incidunt ipsa libero minima numquam, praesentium. Inventore nemo Vuex numquam officia possimus quos ratione repellat.

Single File Components

Eine Vue-Datei besteht aus drei Komponenten.

1. Vue-Template
2. JavaScript
3. Stylesheet

<template>
    <div class="mod-sample-vue">
        {{ text }}
    </div>
</template>

<script>
    new Vue({
        data: {
            text: 'Lorem ipsum dolor sit amet.',
        },
    });
</script>

<style type="scss">
    .mod-sample-vue {
        @include font(text);
    }
</style>

Einbindung

Die Einbindung erfolgt über den Vue-Helper data-js-vue und das data-app Attribut.

<div class="mod-sample-vue"
    data-app="AppSample"
    data-js-vue="text: Hier kann man Daten überschreiben">

    <!--
        Das steht hier nur, solange die App geladen wird!

        Das komplette DIV wird ersetzt!
    -->

    <div class="mod-loader"></div>

    <noscript>
        Vue ist ganz traurig ohne JavaScript 😭
    </noscript>
</div>

In diesem Beispiel wird die AppSample.vue Datei geladen, definiert durch das data-app="AppSample" Attribut.

Über das data-js-vue="…" Attribut können wie gewohnt eine oder mehrere Variablen an die jeweilige Vue Instanz übergeben werden.

Gulp

Die Vue-Dateien müssen in der Gulp-Konfiguration sowohl im JavaScript- als auch im SASS-Abschnitt eingebunden werden.

Das Vue-Template wird in diesem Prozess vorkompiliert.

• Benötigt nur die Runtime (vue.runtime.min.js, ca. 23 KB)
• Schneller, da Templates bereits von Gulp vorkompiliert werden

Inline-Template

Vue kann auch als Inline-Template eingebunden werden, allerdings mit einigen Nachteilen.

• Inhalt kann leicht über CMS gesteuert werden
• Aufflackern des Vue Templates (vor allem bei deaktiviertem JavaScript)
• Benötigt sowohl die Runtime als auch den Kompilierer (vue.min.js, ca. 34 KB)

Dazu lässt man das data-app Attribut weg und schreibt das Vue-Template direkt in den HTML-Code.

<div class="mod-dummy-vue"
    data-js-vue="text: Das ist ein Inline-Beispiel!, count: 10">

    <noscript>
        Vue ist ganz traurig ohne JavaScript 😭
    </noscript>

    <p>
        {{ text }}
    </p>

    <p>
        <button class="warning lg" @click="count++">
            <?= EwSVG::get('icon-person', [], [
                'color' => 'currentColor',
            ]) ?>
            You clicked me {{ count }}
            {{ count === 1 ? 'time' : 'times' }}
        </button>
    </p>

    <p class="m-buttons">
        <template v-for="i in 7">
            <button-counter/>
        </template>
    </p>
</div>

JSX

Statt des Vue-Templates kann auch JSX verwendet werden.

Man lässt hierfür den <template>…</template> Block weg und benutzt JSX in der render() Methode.

new Vue({
    data:
    {
        count: 10,
        text: 'Lorem ipsum dolor sit amet.',
    },
    // JSX-Version des obigen Templates
    render()
    {
        return <div class="mod-dummy-vue">
            <p>
                {this.text}
            </p>

            <p>
                <button class="primary md" v-on:click={() => { this.count++; }}>
                    <embed file="/assets/svg/icon-person.svg" variables="{color: 'currentColor'}"/>
                    {/* JSX entfernt die meisten Leerzeichen */}
                    {' '}
                    You clicked me {this.count} {this.count === 1 ? 'time' : 'times'}
                </button>
            </p>

            <p class="m-buttons">
                {[...Array(6).keys()].map(() =>
                {
                    return <button-counter/>;
                })}
            </p>
        </div>;
    },
});

<div class="mod-dummy-vue">
    <p>
        {{ text }}
    </p>

    <p>
        <button class="primary md" @click="count++">
            <embed file="/assets/svg/icon-person.svg" variables="{color: 'currentColor'}"/>
            You clicked me {{ count }} {{ count === 1 ? 'time' : 'times' }}
        </button>
    </p>

    <p class="m-buttons">
        <template v-for="i in 6">
            <button-counter/>
        </template>
    </p>
</div>