initial commit

notes.md

@@ -0,0 +1,82 @@
+setting a router param
+
+{
+  path: '/event/:id',
+  name: 'eventSingle',
+  component: () => import ('../views/EventSingle.vue')
+}
+
+reading a router param
+
+created() {
+  const ID = Number(this.$route.params.id);
+  const event = this.events.find(event => event.id === ID);
+  this.event = event;
+}
+
+create something from this router param (Using it)
+
+see above
+
+find in a dict and the syntax of => === 
+
+Use find as a method on an array.
+
+find(something => something.id === ID)
+
+use arrow notation here in order to use the param you define to be used.
+the bit before the arrow notation is a param you want to find (name is arbitrary it will resolve to an object)
+the bit after the arrow allows you to use the name you want to be iterated/used. this must resolve to a boolean (i.e === as a coniditional)
+think of the arrow notation as a "where" clause (find something where something===True/False)
+
+setting a param based off this
+
+in a hook you can set the value of your find and bind it to something
+this.event = event;
+
+make sure to create it in data too
+
+
+
+using class bindings (setting a class of an element dynamically)
+link to https://vuejs.org/v2/guide/class-and-style.html
+
+
+v-binds (v-bind: and just :)
+
+using v-for, what it does (renders the thing being v-for'd for each thing in it)
+how to set an html attribute from this (using v-bind:attribute e.g v-bind:src)
+
+<div class="event-images columns is-multiline has-text-centered">
+  <div v-for="image in event.images" :key="image.id" class="column is-one-third">
+    <img :src="image" :alt="event.name">
+  </div>
+</div>
+
+
+Vue lifecycle (useful for seeing all hooks available)
+https://cdn.auth0.com/blog/vue-meetup/vue-lifecycle.png
+
+
+doing something on a click
+
+in a `<a>` you can use `@click="login"` to do a method
+You should define this method in the script directive
+
+
+Conditional (ternary) operator
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
+
+The "?" and ":" syntax is often used as a shortcut to a if block
+When using this you should specify 3 arguments:
+- the condition to check
+- what should happen if it's true (?)
+- what should happen if it's false (:)
+
+onRedirectCallback: appState => {
+  router.push(
+    appState && appState.targetUrl
+      ? appState.targetUrl
+      : window.location.pathname
+  );
+}