%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}




%Kopfzeile
\ihead{Webentwicklung}
\chead{}
\ohead{http://kohnlehome.de/html/vue-uebersicht.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.js-Übersicht
\end{center}


\section{HTML}
\begin{itemize}
    \item Text: \texttt{\{\{ variable \}\}}
    \item Attribut: \texttt{<span :title='variable'> ... </span>}
    \item 2-way-binding: \texttt{<input v-model='variable'>}
    \item Schleife: \texttt{<li v-for='person in personen'>...}
    \item Verzweigung: \texttt{<p v-if='variable'>...}
    \item Event: \texttt{<button @click='clickMethode'> ...}
\end{itemize}


\section{Local Data}
\begin{itemize}
    \item data: lokale Variablen
    \item computed: berechnete Werte (werden zwischengespeichert)
    \item methods: Methoden (z.B. Eventhandler)
    \item watch: Methoden, die bei Änderung des Wertes einer data-Varaible ausgeführt werden
    \item mounted: Quellcode, der beim Start ausgeführt wird
\end{itemize}

\newpage

\section{Single File Components (Datei.vue)}
Für die Verwendung von Single File Components müssen die VUE-Dateien übersetzt werden.
\begin{itemize}
    \item template: HTML
    \item script: Local Data
    \item style: CSS    
\end{itemize}

\section{vue-router}
Navigation zwischen Seiten einer Single-page Application.
\subsection*{src/router/index.js}
\begin{verbatim}
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    }, ...    
\end{verbatim}

\subsection*{src/views/}
\begin{itemize}
    \item Home.vue
\end{itemize}

\subsection*{src/App.vue}
\begin{itemize}
    \item Link zu Seite: \texttt{<router-link to='/'>Home</router-link>}
    \item Platzhalter für aktuell geroutete Seite: \texttt{<router-view/>}
    \item Seite vom Quellcode aufrufen: \texttt{this.\$router.push('/');}
\end{itemize}

\section{Vuex}
Zentrale Datenverwaltung für den Austausch von Daten zwischen Komponenten.
\subsection*{src/store/index.js}
\begin{itemize}
    \item state: zentrale Variablen
    \item getters: Lesezugriff auf state-Variablen
    \item mutations: Schreibzugriff auf state-Variablen, Aufruf mit commit('methode', argument); 
    \item actions: Methoden (können mutations aufrufen), Aufruf mit dispatch('methode', argument);
\end{itemize}

\end{document}
