%Teilweise Erzeugt mit dem LaTeX-Generator: http://latex.sehnot.de

%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-data-methods.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: data, methods, computed, watch
\end{center}


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

\section*{App.vue}
\begin{verbatim}
<template>
    ...
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      zahl: 0,
    };
  },

  methods: {
    hochzaehlen() {
      this.zahl++;
    }    
  },

  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);
    }
  }
};
</script>

<style>
  ...
</style>
\end{verbatim}


\end{document}
