Vue.js

Links

Guter Einführungskurs in Vue.js 2
https://coursetro.com/posts/code/133/How-to-Install-Vue-2---Through-CDN,-NPM-and-the-Vue-CLI
https://www.youtube.com/watch?v=78tNYZUS-ps (das Video dazu)

Installation

Via CDN, NPM oder über das Vue CLI

Vue CLI

Vue Command Line Interface installieren

Falls nicht vorhanden zuerst das CLI installieren. Das kann man über npm holen. Global (-g) lädt die Dateien in

/usr/local/lib/node_modules

eventuell muss man hier sudo nehmen.

npm install -g @vue/cli

Projekt anlegen

Im Projektordner

vue create vue-proj

Vue fragt dann welches Preset man nehmen will. Hinweis babel ist ein JavaScript Compiler, eslint ist ein JavaScript Linter und hilft beim Debugging.

Nach dem Anlegen des Projekts kann man den yarn oder npm Server starten. Vue gibt einem direkt die Kommandos vor.

Todo: Checken wie sich das verhält wenn man Apache nimmt.

Vue Components

Sind die Basic Building Blocks in Vue Apps. Templating, Logic, Styling

Schaut man sich die Datei

src/App.vue an finden sich diese Bereiche in den Tags
<template>
</template>
<script>
</script>
<style>
</style>

wieder.

Components importieren

Wenn man sich das Default Projekt anschaut sieht man auch gleich wie weitere Components importiert und angezeigt werden können. Im Template Teil findet sich

<HelloWorld msg="Welcome to Your Vue.js App"/>

Hier wird eine Komponente "HelloWorld" geladen und eine Variable msg übergeben.

Im Script Teil wird sie importiert, damit sie überhaupt benutzt werden kann:

import HelloWorld from './components/HelloWorld.vue'

Zusätzlich wird sie noch im export -> components Teil der App referenziert (heißt das so ?)

 components: {
    HelloWorld
...

Auch in der Datei der Component (HelloWorld.vue) findet sich wieder die Template, Script, Style Aufteilung wieder.

Vue Templates

Interpolation and Directives

Die einfachste Form der Interpolation ist Text-Interpolation. Hier wird einfach ein String der in der Component Logic ist ausgegeben.

Beispiel: App.vue

<template>
  <div id="app">
    <Skills/>
  </div>
</template>

<script>
import Skills from './components/Skills.vue'

export default {
  name: 'app',
  components: {
    Skills
  }
}
</script>

<style>
</style>

Skills.vue

<template>
  <div>
    {{name}}
  </div>
</template>
<script>
export default {
  name: 'Skills',
  data(){
    return{
      name: 'Stephan'
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>