%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-sfc.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 SFC (Single File Components)
\end{center}


Quelle: \href{https://vuejs.org/guide/scaling-up/sfc.html}{vuejs.org/guide/scaling-up/sfc.html}

\section*{Composition API}
\subsection*{Komponente verwenden: App.vue}
\begin{verbatim}
<script setup>
   import Zaehler from './components/Zaehler.vue'  
</script>

<template>
    ...
    <Zaehler ueberschrift="Zähler 1" :startwert="0" />    <!-- ":" bei Zahlen und    -->
    <Zaehler ueberschrift="Zähler 2" :startwert="7+3" />  <!-- JavaScript-Ausdrücken -->
    ...   
</template>

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

\subsection*{Komponente definieren: Zaehler.vue}
\begin{verbatim}
<script setup>          <!-- wichtig: setup !!!-->
  import { ref } from 'vue'

  // Attribute
  const props = defineProps({
     ueberschrift: String,
     startwert: Number
  })

  // lokale Zustandsvariablen
  const zahl = ref(props.startwert);

  // Methoden
  function hochzaehlen(){
     zahl.value++;                // mit value !!!
  }  
</script>

<template>    
  <h2>{{ ueberschrift }}</h2>
  <p>Zahl: {{ zahl }}</p>        // ohne value !!!
  <button @click="hochzaehlen">Hochzählen</button>
</template>  

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


\newpage


\section*{Options API}
\subsection*{App.vue}
\begin{verbatim}
<script>
import MyComponent from "./MyComponent.vue"

export default {
  components: {
    MyComponent
  },

  data() {
    return {
      ...
    }
  },

  methods: { 
    methode1(parameter) {
      // parameter enthält 'Servus!'
    }
  }
};
</script>

<template>
    <MyComponent :attribut1="Hallo" @ereignis1="methode1"/>    
</template>

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

\subsection*{MyComponent.vue}
\begin{verbatim}
<script>
export default {
  props: {
    attribut1: {
      required: true,
      type: String
    }
  }
};
</script>

<template>
  <span>{{ attribut1 }}</span>
  <button @click="$emit('ereignis1', 'Servus!')">Tuwas</button>    
</template>

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

\end{document}
