View source for Vue Introduction

=Intro=
==Hello John (No world)==
Resource for the tutorial was https://github.com/johnpapa/vue-getting-started
<br>
The vue js lives at https://cdn.jsdelivr.net/npm/vue. Below is a simple example just showing two way binding
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="name">
        <p>Hello {{name}}</p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    name: "John"
                }
            }
        })
    </script>
</body>
</html>
</syntaxhighlight>
==Sections==
Vue files are comprised of three sections. No prizes for what each bit does
<syntaxhighlight lang="vue">
<template>
<a v-bind:href="github" target="_blank">
</a>
<template/>

<script>
</script>

<style>
</style>
</syntaxhighlight>

=Displaying Data and Events=
==Data Model==
We can define a data model and use it with standard double curly braces.
<syntaxhighlight lang="vue">
</template>
...
<div>{{hero.id}}</div>
...
</template>

<script>
export default {
  name: 'Heroes',
  data() {
    return {
      id: 20,
      firstName: 'Fred',
      lastName: 'Bloggs'
      message: ''
    }
  },
};
</script>

</syntaxhighlight>


==Data Binding==
Binding we can use v-bind or the short cut : (full colon). So in the template put the colon and define a data component below
<syntaxhighlight lang="vue">
<template>
...
          <a
            v-bind:="github"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i class="fab fa-github fa-2x" aria-hidden="true"></i>
          </a>

          <a
            :href="twitter"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i class="fab fa-twitter fa-2x" aria-hidden="true"></i>
          </a>
...
</template>

<script>
export default {
  name: 'headerLinks',
  data() {
    return {
      github: 'https://github.com/johnpapa/vue-getting-started',
      twitter:'https://twitter.com/john_papa',
    }
  },
}
</script>
</syntaxhighlight>

==Two Way Binding==
To bind two-way with v-model with the model and property.
<syntaxhighlight lang="vue">
</template>
   <input class="input" id="firstName" v-model="hero.firstName"/>
</template>
</syntaxhighlight>

==Event Binding==
===Example===
To bind events we use v-on: or @ to bind our methods to an event.
<syntaxhighlight lang="vue">
</template>
<button @click="cancelHero">Cancel</button>
<button v-on:click="cancelHero">Cancel 2</button>
</template>
<script>
export default {
  name: 'Heroes',
  data() {
...
  },
  methods: {
    cancelHero() {
       this.message = ''
    },
  }
};
</script>
</syntaxhighlight>
===Keyup===
Below is an example of binding to the keyup event. The .esc denotes the escape key.
</template>
<script>

                <select
                  id="power"
                  v-model="hero.power"
                  :class="{ invalid: !hero.power }"
                   @keyup.esc="clearPower"
                >
</script>
</syntaxhighlight>

===Checkbox, Radio===
No surprises here
<syntaxhighlight lang="vue">
<template>
                  <input
                    type="radio"
                    id="color-red"
                    value="red"
                    v-model="hero.capeColor"
                  />

                  <input
                    type="checkbox"
                    class="is-primary"
                    id="active"
                    v-model="hero.active"
                  />
</template>
</syntaxhighlight>

===Styles and Classes===
Styles and Classes are trickier because of the object approach of the data
<syntaxhighlight lang="vue">
<template>
                <select
                  id="power"
                  v-model="hero.power"
                   @keyup.esc="clearPower"
                >

                <div
                  class="color-line"
                  :style="{ 'background-color': hero.capeColor }"
                ></div>
</template>
</syntaxhighlight>
=Displaying List and Conditional Content=
==Iterating v-for==
So just create a key and use the right syntax and the defined model
<syntaxhighlight lang="vue">
<template>
        <ul class="list is-hoverable">
          <li v-for="hero in heroes" :key="hero.id">
            <a class="list-item"><span>{{ hero.firstName }}</span></a>
          </li>
        </ul>
</template>
</syntaxhighlight>
==Binding to selection==
We can do this by binding to the model on click. Note the conditional class based on if the current hero === selected hero.
<syntaxhighlight lang="vue">
<template>
          <li v-for="hero in heroes" :key="hero.id">
            <a
              class="list-item"
              @click="selectedHero = hero"
              :class="{ 'is-active': selectedHero === hero }"
              ><span>{{ hero.firstName }}</span></a
            >
          </li>

</template>
</syntaxhighlight>
==Conditional Displaying v-if and v-show==
===v-if===
Same as *ngIf. So if no selection on the list
<syntaxhighlight lang="vue">
<template>
    <div class="columns" v-if="selectedHero">
      <div class="column is-3">
        <header class="card-header">
          <p class="card-header-title">{{ selectedHero.firstName }}</p>
        </header>
        <div class="card-content">
          <div class="content">
...
</template>
</syntaxhighlight>
===v-show===
This will put the data in dom.
<syntaxhighlight lang="vue">
<template>
            <div class="field" v-show="showMore">
              <label class="label" for="lastName">last name</label>
              <input
                class="input"
                id="lastName"
                v-model="selectedHero.lastName"
              />
            </div>
</template>
</syntaxhighlight>
=Interacting within a Component=
==Computed==
This is a section in the scripts section which allow you to define function to compute value maybe from existing model data
<syntaxhighlight lang="vue">
<script>
  computed: {
    fullName() {
      return `${this.selectedHero.firstName} ${this.selectedHero.lastName}`;
    },
  },

</script>
</syntaxhighlight>
==Component Lifecycle Hooks==
Here are the component lifecycle hooks for Vue.
[[File:Component lifecyle vue.png| 700px]]
So here is an example of the created below. Note the lifecycle hooks do not go in the methods section but are at the same level as methods: and computed:
<syntaxhighlight lang="vue">
<script>
...
  created() {
    this.loadHeroes();
  },
  methods: {
    async getHeroes() {
      return new Promise(resolve => {
        setTimeout(() => resolve(ourHeroes), 1500);
      });
    },
    async loadHeroes() {
      this.heroes = [];
      this.message = 'getting the heroes, please be patient';
      this.heroes = await this.getHeroes();
      this.message = '';
    },
...
</script>
</syntaxhighlight>
==Watchers==
These are function which watch properties. When a properties changes you can perform some code. The immediate means it will run on startup up. 
<syntaxhighlight lang="vue">
<script>
  watch: {
    'selectedHero.capeCounter': {
      immediate: true,
      handler(newValue, oldValue) {
        console.log(`Watcher evalauted. old=${oldValue}, new=${newValue}`);
        this.handleTheCapes(newValue);
      },
    },
  },
</script>
</syntaxhighlight>
==Filters (Example of date-fns too)==
Filters are pipes you can use in Vue. Below is a recap of the structure along with the example of a filter (pipe). Note you can define custom pipes.
<syntaxhighlight lang="vue">
<template>
...
                <p class="comment">
                  My origin story began on
                  {{ selectedHero.originDate | shortDate }}
                </p>
...
</template>
<script>
import { format } from 'date-fns';
const inputDateFormat = 'YYYY-MM-DD';
const displayDateFormat = 'MMM DD, YYYY';
const ourHeros = [
... // Pseudo Data
]
export default {
   name: 'Heros',
   data() {
   ... // View Data Model
   }
   computed() {
   ... // Computed values
   }
   created() {
   ... // Life Cycle Hook
   }
   methods() {
   ... // Methods
   }
   watch() {
   ... // Watchers
   }
   filters() {
      shortDate: function(value) {
         return format(value, displayDateFormat);
      },   
   }
}
<script>
</syntaxhighlight>
=Component Communication=
==Using sub components==
To do this you simple need to import the code, state it as a component in the parent and reference the name
<syntaxhighlight lang="vue">
<template>
...
<HeroDetail />
...
</template>

<script>
...
import HeroDetail from '@/components/hero-detail';
...
  components: {
    HeroDetail,
  },
...
</script>
</syntaxhighlight>
==Passing Props==
===Naming===
This is horrible. For passing parameters you must use kebab-case and not camelCase. Argghhhhhhhhhhhhhhhh
<syntaxhighlight lang="vue">
</syntaxhighlight>
<child-component :authorized-user="AuthorizedUser"></child-component>
===Types===
String, Number, Boolean, Array, Object, Function, Promise
===Dynamic and Static===
<syntaxhighlight lang="vue">
// Dynamic
:title="hero.name"

// Static
title="Mrs Jones"
</syntaxhighlight>

===Defining Child Component Props===
In the child component we can define out @Input properties. We can also define defaults and validation on these properties too.
<syntaxhighlight lang="vue">
<script>
  props: {
    hero: {
      type: Object,
      default: () => {},
      validator: function (value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      },
    },
  },
</script>
</syntaxhighlight>
===Child Component Updates===
This is much the same as Angular where we emit the changes and pass the new value to the parent. YOU DO NOT MUTATE IN THE CHILD.
[[File:Vue_emit.png|800px]]
The odd thing is you do not list the parameters on the parent in the template but you do in the method.
==Mixins==

<syntaxhighlight lang="vue">
<template>
</template>
<script>
</script>
</syntaxhighlight>