#6 Learning the Vue basics 2

The Vue learning journey continues

This is a continuation of a previous article.

Two way binding with v-model

You can two-way bind easily with v-model

Methods vs computed vs watch

For performance reasons, it's better to use computed properties than methods for outputting values in most cases.

Computed values are like methods, but Vue will be aware of their dependencies and only re-execute them if one of the dependencies changed.

Only use methods if you know that you want to recalculate a value whenever anything on the page changed.

Methods are usually used for events.

Use computed values like a data property (not like a method, even though technically it's a method) we are not going to call it, therefore you should name your computed properties just like your data properties.

Watch In a watcher: you don't need to refer to this.name, a watcher function automatically gets the last value of the watch property as an argument.

you could also accept a second argument (the previous value)

Watch is a function where you can tell Vue to execute it when one of its dependencies changed. Sounds like computed properties?

Yes, you can also kinda use them like computed properties, although they will require more unnecessary code.

You should use watchers to "watch" for something that doesn't always occur (like after a counter hits 50, you reset it with your watcher code) If you want to run logic that maybe also updates a data property, but not every time.

Vue shorthands

v-on: => @

v-on:click => @click

v-bind: => :

v-bind:value => :value

Vue styling

:class

:style

Conditional Rendering

Conditional rendering with v-if & v-else & v-else-if (doesn't just "show/hides" items visibility, it creates/removes them)

The element with v-else must come directly after a v-if element.

v-if really removes/adds elements. v-show will hide items with display: none (with CSS)

You can use v-show if you have an item that changes visibility a lot.

Loops

v-for

a for-in loop. (For-of is also available), but you should use for in.

V-for get index

You can also loop over numbers v-for="num in 10"

Vue behind the scenes

:key

Add :key with unique identification data when using v-for

Ref

Refs get value from DOM elements when you need them instead of all the time (smaller, more performant version of @input or v-model ) which would update the value of an input element with every keystroke for example.

Ref It's kinda like querySelector.

• Usage in HTML = <tag ref="refName">

• Usage in js: $refs.refName

Now it simply points at the DOM Object for that HTML element. So you get the vanilla js object back with all its properties and use and work with it like in vanilla JS.

Stop propagation

@click.stop (stop event propagation)

Template

template option. next to data, methods, watch... there is a template configuration object: where you can pass HTML in a string as a template.

Lifecycle

CREATION:

beforeCreate()

• Called before the app in created

created()

• Called after app is created

Compile the template

(dynamic placeholders, all interpolations... are removed and replaced with concrete values)

beforeMount()

• Called right before Vue is going to render (before you see something on the screen)

mounted()

• Now, the content is rendered (you see stuff on the screen)

---

UPDATES (Data changed):

beforeUpdate()

• Called before the update has been fully processed by Vue

updated()

• Called once update has been processed

• Is already visible on the screen (so we don't reach mounted() again because the template was never unmounted because it always was visible)

---

UNMOUNT instance (all contents are removed from the screen)

beforeUnmount()

• Called right before it's about to be removed

unmounted()

• Called after it has been removed

You can use these unmount hooks to execute any cleanup code you want to do

Happy learning!