Notes from Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) Udemy Link

Data Binding

Double Curly Brackets ( {{ foo }} )

We render data using the double curly bracket:

<h1></h1>

v-bind:

The double curly bracket won’t work on HTML elements, so we need to bind data using v-bind.

v-bind works by taking an arguement after the colin and a value after that:

<a v-bind:href="link">My Link</a>

v-once

If we don’t want a value to be updated after its initial render, we can attach v-once flag to it.

<h1 v-once></h1>

v-html

We can render HMTL from a data property using v-html:

<p v-html="formattedLink"></p>

Events

v-on

We can listen for events using the v-on directive:

<button v-on:click="increase">Click Me!</button>

This will automatically pass the event to the increase method in vue, so we can do something like:

increase: function(event) {
  this.foo = event.detail
}

We can also pass arguements to the method:

<button v-on:click="increase(2)">Click Me!</button>

increase: function(step) {
  this.count += step;
}

and we can pass arguements and the event itself using $event which is a property generated by Vue.

<button v-on:click="increase(2, $event)">Click Me!</button>

increase: function(step, event) {
  this.count += step;
  this.foo = event.detail;
}

Event Modifiers

There are built in event modifiers in Vue:

.stop - stopPropogation .prevent - preventDefault

We can use them like:

<span v-on.mousemove.stop="">Dead Spot</span>

Key Modifiers

There are also built in key modifiers in Vue:

These can be chained.

enter - only call function when “Enter” is pushed

<input type="text" v-on:keyup.enter.space="alertMe" />

Two Way Data Binding

Vue does two-way data binding by utilizing the v-model property on elements.

<input type="text" v-model="name">

Computed

computed: {
  output: function() {
    return this.counter > 5 ? 'Greater 5' : 'Less 5'
  }
}

Doesn’t get called as a function. Everything in computed can be used just like properties in the data object. Always runs syncronously.

Watch

Used for async properties;

watch: {
  counter: function(value) {
    var vm = this;
    setTimeout(function() {
        vm.counter = 0
    }), 200;
  }
}

Shortcuts

We can use @click as a replacement for v-on: or :href

<button v-on:click="someFunction">Click Me</button>
<a v-bind:href="link">My Link</a>

is the same as

<button @click="someFunction">Click Me</button>
<a :href="link">My Link</a>

Handling User Input with Forms

Two way data binding is still managed by using v-model on form components.

<input type="text" v-model="email" />
<input type="password" v-model="password" />


<script>
  export default {
    data() {
      return {
        email: 'kaybesee@gmail.com', // this sets an initial value
        password: ''
      }
    }
  }
</script>

Modifiers

.lazy - only update state when switching to another input, not on every keystroke .trim - trim extra whitespace from front and back of input .number - input converted to a number right away (instead of string)

Textarea

Textarea functions like a regular input. Only “gotcha” is that you cannot supply initial values between the <textarea> and </textarea> tags and that to display the correct formatting, you must add style="white-space: pre" to the container element. VueJS maintains styling, this is just required to display it in the browser and is not a VueJS feature but just regular browser behavior.

Checkboxes

You can set checkboxes as arrays using v-model. VueJS will take care of maintaining the array.

<input type="checkbox" v-model="selectedItems" value="item1"> Item 1
<input type="checkbox" v-model="selectedItems" value="item2"> Item 2

<script>
  export default {
    data() {
      return {
        selectedItems: []
      }
    }
  }
</script>

Radio Buttons

Radio buttons are similar to checkboxes, just use the same v-model property.

<input type="radio" v-model="selectedItems" value="item1"> Item 1
<input type="radio" v-model="selectedItems" value="item2"> Item 2

<script>
  export default {
    data() {
      return {
        selectedItems: "
      }
    }
  }
</script>

Select and Options Inputs

Radio buttons are similar to checkboxes, just use the same v-model property.

<select v-model="selected-priority">
  <option 
    v-for="priority in priorities" 
    // :selected="priority === 'Medium'" // this is another way to set default, but the value in data() ultimately decides what is the default.
    ></option>
</select>


<script>
  export default {
    data() {
      return {
        priorities: ['High', 'Medium', 'Low']
        selected-priority: 'High'
      }
    }
  }
</script>

Custom Controls

All controls need to replicate v-model which takes a value and an input event (or it can be click, etc).

My form:

<app-switch v-model="dataSwitch"></app-switch>

<script>
  import { Switch } from './Switch.vue';

  export default {
    data() {
      return {
        dataSwitch: true
      }
    },
    components: {
      appSwitch: Switch
    }
  }
</script>

My Custom Component (Switch):

<div
  id="on"
  @click="switched(true)"
  :class="{ active: value }">On</div>

<div
  id="off"
  @click="switched(false)"
  :class="{ active: !value }">Off</div>

<script>
  export default {
    props: ['value'],
    methods: {
      switched(isOn) {
        this.$emit('input', isOn);
    }
  }
</script>

<style scoped>
  #on, #off {
    width: 40px;
    height: 20px;
    background-color: lightgray;
    padding: 2px;
    display: inline-block;
    margin: 10px -2px;
    box-sizing: content-box;
    cursor: pointer;
    text-align: center;
  }

  #on:hover, #on.active {
    background-color: green;
  }

  #off:hover, #off.active {
    background-color: red;
  }

</style>

Submitting a Form

We use .prevent to prevent our form from submitting to the server since we are handling the submission using VueJS.

<button @click.prevent="submitted">Submit!</button>

<script>
  import Switch from './Switch.vue';

  export default {
    data() {
      isSubmitted: false
    },
    methods: {
      submitted() {
        isSubmitted = true;
      }
    },
    components: {
      appSwitch: Switch
    }
  }
</script>

Vuex

import Vue from 'vue';
import Vuex from 'vuex;

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    counter: 
  }
})
import Vue from 'vue';
import App from './App.vue';

import { store } from './store/store';
new Vue({
  el: '#app',
  store: store,
  render: h=> h(App)
})