%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{Vue.js}
\chead{}
\ohead{http://kohnlehome.de/html/vue-composition-setup.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 Composition API mit $<$script setup$>$
\end{center}


\section*{$<$script setup$>$ (JavaScript)}
\subsection*{import}
\begin{verbatim} 
import { ref, reactive, computed, onMounted } from 'vue';
import MyComponent from './components/MyComponent.vue'
\end{verbatim}

\subsection*{Props (Attribute von Hostkomponente)}
\begin{verbatim} 
const props = defineProps({
  zahl:Number,
  text:String
});
\end{verbatim}

\subsection*{Nichtreaktive Variablen}
\begin{verbatim} 
const x = 3;
\end{verbatim}

\subsection*{Reaktive Variablen}
\subsubsection*{a) primitive Variablen (string, number, boolean, ...), Zugriff mit .value}
\begin{verbatim} 
const zahl = ref(0);
\end{verbatim}

\subsubsection*{b) Objekte, Arrays, ...}
\begin{verbatim} 
const liste = reactive(['Anna', 'Berta', 'Carla']);
\end{verbatim}

\subsection*{Berechnete Werte}
\begin{verbatim} 
const quadrat = computed(() => { zahl.value * zahl.value });
\end{verbatim}

\subsection*{Methoden}
\begin{verbatim} 
function hochzaehlen(){
    zahl.value++;
}
\end{verbatim}

\subsection*{Ereignisse für Hostkomponente}
\subsubsection*{1. Ereignisse definieren}
\begin{verbatim} 
const emit = defineEmits(['inFocus', 'submit']);
\end{verbatim}
\subsubsection*{2. Ereignis auslösen}
\begin{verbatim}
emit('submit');
\end{verbatim}

\subsection*{Child-Komponente einbinden}
\begin{verbatim} 
<MyComponent attribut1="Servus" @ereignis1="methode1" />
\end{verbatim}


\subsection*{Start}
\begin{verbatim} 
onMounted(() => { hochzaehlen(); });  
\end{verbatim}

\newpage


\section*{$<$template$>$ (HTML)}
\subsection*{Text Interpolation}
\begin{verbatim} 
{{ variable }}  
\end{verbatim}

\subsection*{Attribut Binding}
\begin{verbatim} 
<div :title="text"> ... </div> 
\end{verbatim}

\subsection*{Events}
\begin{verbatim} 
<button @click="methode"> ... </button> 
\end{verbatim}

\subsection*{Conditional Rendering}
\begin{verbatim} 
<div v-if="isVisisble"> ... </div> 
\end{verbatim}

\subsection*{Schleife}
\begin{verbatim} 
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
\end{verbatim}

\subsection*{Form Input Bindings}
\begin{verbatim} 
<input v-model="variable" />
<select v-model="variable" />
\end{verbatim}

\section*{$<$style scoped$>$ (CSS)}

\end{document}
