Formelsammlung

HTML

Elemente:

<!DOCTYPE html>

<table>
    <tr>
        <th>Yikes</th>
        <th>Yokes</th>
    </tr>
    <tr>
        <td>sol</td>
        <td>les</td>
    </tr>
</table>

CSS

Selektoren:

element: p {}
class: .name {}
id: #name {}
universal: *
child: >
- selektiert nur direkte kinder
sibling: ~
- Teilen die selben eltern
direct sibling: +
- Teilen die selben eltern und folgen direkt
pseudo-class: :
- sachen wie a:visited
pseudo-element: ::
- sachen wie p::first-line
$n$ th child: nth-child(x)
- wie: p:nth-child(2);
- oder: p:nth-child(An+B);
  - $A$ : Schrittweite
  - $B$ : Startwert

Box Model

Aller content steht in einer box
padding (Abstand von innen zum Rahmen)
border (Rahmendicke)
margin (Der abstand ausserhalb vom Rahmen)
das kann auch alles mit CSS angepasst werden

Specific

.applyMargin
- margin-top
- margin-bottom
- margin-right
- margin-left

Scale

height: 30px;
width: 40vh;
vh
vw
%
em (schriftgröße)

Flexbox

justify-content: abstand zwischen den Elementen, x-achse
align-items: abstand zwischen den Reihen, y-achse
flex-wrap: Ob das zeugs wrappen kann
align-items: Wie biel platz die Elemente nutzen (wie)
flex: Wie die Elemente sich bei änderung verhalten

Grid

kann flexibel und absolut bemmessen werden
px, em für absolut
% und fr (free range) für Flexibel
- fr ist oft in kombination mit padding und margin einfacher zu nutzen

Layout

grid-template-columns: Teilt den verfügbaren platz ein
gap, column-gap, row-gap: Definiert abstände
grid-auto-rows: minmax(px, auto): Definieren "ränder"
justify-content, align-items: genau wie vorher
grid-column: x: definiert spalte
grid-row: x/y: definiert (mehrere) reihen

Event Handling

Naja, events halt, die müssen gehandled werden
Die kann man mit element.AddEventListener('event', function() {}, false);ein Event registrieren
So können Events auch mit event.stopPropagation angehalten werden (also die werden dann nicht weiter verteilt)

Javascwipt UwU

Function

function lustigeFunktion() {
    for(let i = 0; i < 5, i++) {

    }
}

Objektos

var y,i;
var person = {
    name: "Bre", 
    lastName: "Brup", 
    alter: 97
}

Scam (auch bekannt als Funktionen in Variablen)

var ops = [addition, substraktion]; // Das sind Funktionen
for (var i = 0; i < ops.length; i++) {
    console.log(operationen[i](2, 2));
}

Typescwipt OwO

Überprüft Types und macht dinge mit denen (krass)

var lol: string

interface Car {
    name: string; 
    year?: number;
    lol: int;
}

function sell(obj: Car) {
    ...
}

sel({name: name: "BEHEMWEH", lol: 23});

enum Direction {
    Up, 
    Down, 
    Left, 
    Right
}

enum Direction2 {
    Up = 1; 
    Down = 2;
    Left = 3; 
    Right = 4;
} // hier kann man am ende alles einfügen

Vue

Templates

Daten speichern wir in der Vue-VM
hier können wir sachen in variablen speichern und später mit {{ variable }} wieder aufrufen
VueDirectives können das dann weiter raussortieren
- v-html
- v-bind:src
- v-on:click
- v-for
Innerhalb der "moustache" schreibweise (das mit den klammern) können wir JS ausführen
Wir können aber auch schon funktionen auf keywords mappen
- Das machen wir in der "computed" sektion der VueVM, damit der code ordentlicher bleibt
- computed: { keyword: function() { ... } }
Wir können aber auch "tolle" sachen modellieren, wie dynamische klassenzuweiseung
- <div v-bind:class="positive: isPositiv, negativ: isNegativ"></div>
  - positiv und negativ sind abhängig von den Wahrheitswerten in den Vars
  - Je nachdem, wird die klasse dann konstruhiert als positiv, positiv negativ o.ä.
Klassen können wir aber auch schon im JS teil definieren
Dann können wir das mit v-bind:class="name" wie gehabt verbinden
Wir können daten auch conditional Rendern, mit den v-if v-else und v-else-if
for-Loops: v-for="item in list" dann einfach weiter mit normalen JS in mustache
Events: v-on:Event="action in JS"
Wir können auch auf methoden verweisen, wenn welche im "methods" teil definiert sind
- methodName: function() {}

Warum n Vue

Kann besser updaten
Realtime & reactive ohne dauernd neuzuladen

Components

Mit denen kann man teile von vue immer wieder neu verwenden
Sprich basically "kleinere" versionen von Vue-VMs
Global efinieren können wir die mit Vue.component("component-name", { data: function() { ... }})
wenn wir das so machen, können wir das ding dann wie ein HTML element nutzen
Lokal, machen wir das, wenn wir die einfach in einer Vue Instanz in der components sektion hinterlegen

Props

Bei einer Statischen website:
Vue.component("component-a", { props: ["name"], template: "<h1>{{name}}</h1>"});
<component-a name="Meme"></component-a>
Props können nur ein Element gleichzeitig beherbergen! bei mehreren, muss ein div eingefügt werden

Dynamische Props

Beispiel

Vue.component("component-a", {
    props:["prop-data"],
    template: '<div class="component-a">
        <h1>{{propData.title}}</h1>
        <p>{{propData.date}}</p>
        <p>{{propData.content}}</p>
    </div>'
});

var vm = new Vue({
    el:"#app",
    data:{
        propData:{
            title: "Hello World",
            date: "06.07.2020",
            content: "Lorem Ipsum"}
}});

<div id="app">
    <component-a
    v-bind:prop-data="propData">
    </component-a>
    <component-a
    v-bind:prop-data="propData">
    </component-a>
</div>

Die dinger haben einen sog. one-way-data flow
Kinder elemente werdne nur von ihreen eltern "mit" geändert
Andersrum gibt es fehler

Emit

Wir können mit $emit (custom-) Events auslösen
Mit denen können wir so auch mit elternelementen kommunizieren
Vue-component('custom-elem', { emits: ['myEvent']})

Dynamische Komponeneten

Ähnlich wie bei conditionals kann man einen componeneten an etwas anderes aufhängen
mit v-bind:is="componente" kann man das machen
mit jeder aktualisierung wird der gesamte Komponent gewechselt

[ Angewandte Informatik ]