%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

% Backticks
\usepackage{upquote}




%Kopfzeile
\ihead{Webentwicklung}
\chead{}
\ohead{http://kohnlehome.de/html/vue-grundlagen.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
Vue-Grundlagen
\end{center}


Quelle: \href{https://vuejs.org/guide/introduction.html}{vuejs.org/guide}

\section*{HTML}
\subsection*{Bibliothek von CDN einbinden}
\begin{verbatim}
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
\end{verbatim}

\subsection*{Grundgerüst}
\begin{verbatim}
<div id="app"> ... </div>
\end{verbatim}

\subsection*{Text}
\begin{verbatim}
{{ textVariable }}
\end{verbatim}

\subsection*{Attribut}
\begin{verbatim}
<span v-bind:title="titleVariable"> ... </span>
<span       :title="titleVariable"> ... </span>
\end{verbatim}

\subsection*{Textfeld}
\begin{verbatim}
<input v-model="inputVariable">
\end{verbatim}

\subsection*{Checkbox}
\begin{verbatim}
<input type="checkbox" v-model="checkedVariable">
\end{verbatim}

\subsection*{Radiobutton}
\begin{verbatim}
<input type="radio" value="option1" v-model="radioVariable" name="gruppe">
<input type="radio" value="option2" v-model="radioVariable" name="gruppe">
\end{verbatim}

\subsection*{Select}
\begin{verbatim}
<select v-model="selectVariable">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
\end{verbatim}

\subsection*{Schleife}
\begin{verbatim}
<ul>
  <li v-for="person in personen"> {{ person.vorname }} </li>
</ul>
\end{verbatim}

\subsection*{Verzweigung}
\begin{verbatim}
<p v-if="ifVariable">Ja</p>
<p v-else>Nein</p>
\end{verbatim}

\subsection*{Event}
\begin{verbatim}
<button v-on:click="clickMethode"> ... </button>
<button     @click="clickMethode"> ... </button>
\end{verbatim}

\newpage

\section*{JavaScript}
\begin{verbatim}
const { createApp } = Vue;
createApp({  
    data() {
        return {
            textVariable: 'Ich bin ein Text.',
            titleVariable: 'Das ist der Titel',
            inputVariable: 'Das steht im Eingabefeld',
            checkedVariable: true,
            radioVariable: 'option1',
            selectVariable: 'A',
            ifVariable: true,
            personen: [
                { vorname: 'Anna' },
                { vorname: 'Berta' },
                { vorname: 'Carla' }
            ],
            zahl: 3
        }
    },

    methods: {
        clickMethode() {
            this.textVariable = this.inputVariable;
        }
    },

    computed: {
        quadrat() {
            // Das Ergebnis wird zwischengespeichert, bis der Wert von 'zahl' sich ändert.
            return this.zahl * this.zahl;
        }
    },

    watch: {
        zahl(newValue, oldValue) {
            // Quellcode wird bei Änderung des Datenfeldes 'zahl' ausgeführt
            console.log(`${oldValue} -> ${newValue}`);
        }
    },

    mounted() {
        console.log('Los gehts!');
    }
}).mount('#app');
\end{verbatim}








\end{document}
