VueJS Fundamentals

Vue Overview

has the virtual-DOM of React

Vue components update automatically when model-changes

Reactivity SIMPLE for number and strings ... mutable: arrays, objects (so Reactivity is tougher)

Vue works w/out a Build-step ...BUT better w/ it.

directives of Angular

v-for
v-if
v-bind

Vue can't be read by browsers... so need BUILD step

template script (what's found inside script tags exported and turned into Vue component) script template

Vue:

doesn't create a server for you (can use Vue CLI but that's whole new stack-of dependencies)
doesn't check for errors
no routing (unless use Vue-Router)
uses ES6 Modules

Vue EcoSystem

Vue itself is small core library

Complemental Libraries

nuxt (Universal rendering) ... having server render some stuff (loads faster on phone)
vuex (state management) ... similar to flux and Redux. (Don't use for simple state management with array of #s or something)
vuetify (component framework) ... Basket of components ... Material Design and lots of standard lists, buttons, etc...

Vue core

Computed Properties: only evaluates when any of its reactive dependencies have changed

Component Lifecycle Hooks:

created = used to fetch data for your component

templates and virtual DOM are not yet mounted or rendered

Whatchers:

React to data changes

Named as reactive value

Accepts New and Old values

good for async operators!

Filters

| = signals a filter is coming ... capitalize = name of filter

Global Filters

import Vue from 'vue';

Vue.filter(' ', function(value) {

(must come before the Vue instance)

Vue Data-Binding

a v-bind:href="github"

(Binding to variable gitHub (holds the URL))

:href="github" (is the shorthand)

Event Bindings

v-on:event = "methodName"

@(same thing).

@click="methodName(canPassParameters)"

2-Way Binding

v-model="hero.firstName"

Basic Vue Syntax

{{ variable }} getting variables to display in HTML (interopalation)

Conditionals: div v-if

Lists and Conditionals

v-for="item in item-list" :key

v-if="variable" (Add or Remove from DOM) (Master/Details)

v-show="expression" (showing and hiding) (conditionally show/hide)

data function

vue instance adds all properties in data to Vue's reactivity system

best practice is to return a function

data () { return { props; props; props; } }

Component Communication

create small components
communicate down w/ props
communicate up w/ events

export default { name: 'App'; components: { HeaderBar, Heroes } }

components: (how to declare child components)

Passing Objects

we-want data to flow from parent (Top) through children

go from child-to-parent

methods: { cancelHero() { this.$event('save' this.closedHero); }} (let's Parent component "hear" from child)

Mix ins (distribute reusable functionality across components)

precendance given to the component's method and data

watch and hook ... Both run ... w/ mixins running before component0

Document Object Model

'this' inside a function() points to the Global object (the DOM usually)

EVENT Bubbling: Events bubble up inside the DOM-tree

Event Delegation

Attach it to the parent element and wait for it (catch it)

Use cases:

...Have an element w/ lots of child elements we're interested in

...When we want an Event handler attached to an element that is not yet in the DOM when our page is loaded

document methods:

document.querySelector('id').textContent = variable
document.querySelector('.id').style.display = "none" (set the image or text to blank)
document.querySelector('.className').value (grab user input)

Hoisting and Scoping

In a nutshell, scoping and hoisting effect how the code we write will deal with our declarations (such as var, let, const and function).

Global Scope is created internally by JavaScript as var window = Window() (rough equivalent) behind the veil.

Global Scope acts as the first automatically created Execution Context roughly at the time when the browser opens a URL

Variables defined with var, let, or const are created within Variable Environment. This is why they are not automatically tied to the window object nor bound to this object

var

When using var to declare your variables, the parent function where you declare your vars inside is your only de facto scope delimiter. This way, the parent function creates and holds the scope for all the local variables declared within itself. This is Local Scope...
...As opposed to Global Scope, when the variables are declared outside your function. They are accessible by everyone and everywhere. They are omnipresent like the air we breathe, or like the window object in the browser.
Hence, other code blocks as conditionals and loops (such as if, for, while, switch and try) do not delimit scope, unlike most other languages. Then, any var inside these blocks will be scoped within their parent function which contains that block...
...Not only that, but during runtime, every var declaration that is found inside such code blocks gets moved to the beginning of its parent function (its scope). This is the definition of Hoisting.

let and const

ES2015 introduced let and const which are variables that do respect the block scope. This means they are safe to be declared within a block and won’t leak outside, as the following example:

Keep in mind that we have created one pair of i and parameter variables for each iteration of the for loop. Compare this to before when we just had one single i and parameter being rewritten each time. This matters a little bit for memory consumption.

Finally, since we also created the setTimeout callback function within the same scope, they will co-live with the protected values of i and parameter. Block scope will remain preserved even after stepSum finished executing

functions

declaring a function is different than declaring a var and assigning a function to it...
function name() will get hoisted to top of scope
IF use var nameFunction = function() and call it before you declared...will get an error
The difference here is that when a function is hoisted, its body is also hoisted. Compared to when a var is hoisted, only its declaration gets hoisted but not its assignment.

Inside the forEach block, the function total is hoisted, so when the `total += parameter;` line runs, it uses the function total, not the total variable defined outside of the forEach block. This means the let total varaible is unaffected by the forach block, so when the total is returned, it’s value is still 0, the same as it was at creation.

Functions

Functions are objects, can be assigned to variables, stored in objects or arrays, passed as an argument to other functions, and returned from functions.

A JS function is an object becaues its prototype is an object, and so it inherits methods from the protype

main JS runtime is single-threaded....so two functions can't run at same time.

Functions (except for arrow functions) have two pseudo-parameters: this and arguments

3 ways to define a function:

1) Function Declaration (aka Function Statement)
2) Function Expression (aka Function Literal)
3) Arrow Function

Functions can be used before declaration since function declarations are moved, or "hoisted", to the top of their scope. (variables set to undefined in creation phase)

Closures are not formed with anonymous functions

Function A() declares variable X and returns Function B()....Function B() CAN access variable X because of closures

in module pattern, public methods can access private functions and variables because a CLOSURE was created.

WHEN program calls a function...

JS creates a new execution context (local)
That local context will have its own set of variables
New Execution Context thrown onto the execution-stack

WHEN function ends...

Local execution context pops off the stack
Return value sent back to the calling context. Global or if no return statement..."undefined" returned
Local context destroyed

Callback Functions

function to be executed AFTER another has finished

Why need CallBack Functions?...

...JS is Event - Driven language (will keep executing while listening for other events)...

...Callbacks are a way to make certain code doesn't execute until other code has already finished execution.

Can use callBack functions() to defer activities into future to make our CODE NonBlocking.

Pass a reference to a function as an argument... you do this the function you’re passing as an argument is called a callback function and the function you’re passing the callback function to is called a higher order function.

first Class Functions = passing functions as parameters to other functions

'this' inside a function() points to the Global object (the DOM usually)

Methods are functions that are stored in objects. Functions are independent. In order for a function to know on which object to work on this is used. this represents the function's context

The value of this depends on how the function was invoked, not where the function was defined.

There is no point to use this when a function is invoked with the function form: doSomething(). In this case this is undefined or is the window object, depending if the strict mode of JS is enabled or not.

When a function is invoked with the method form: theObject.doSomething(), this represents the object.

When a function is used as a constructor: new Constructor(), this represents the newly created object.

When a function sits in the global scope, then the value of ‘this’ is the Window object. Think of it as the test function being a method on the context in which it sits (the window object).

However, if a function is executed in strict mode, ‘this’ will return undefined because strict mode does not allow default binding.

The value of this can be set with apply() or call(): doSomething.apply(theObject). In this case this is the object sent as the first parameter to the method.

Arrow Function

sugar syntax for creating an anonymous function expression.

let doSomething = () => {};

Arrow Functions don't have their own this and arguments

Share the surrounding this keyword...

An arrow function expression has a shorter syntax than a function expression and does not have its own this, arguments, super, or new.target. These function expressions are best suited for non-method functions, and they cannot be used as constructors

...lexical this variable (use arrow functions to preserve value of this)

Every async function() always returns a Promise

Destructuring = returning multiple values from a function()

Immediately Invoked Function Expression is only called ONCE (IIFE)

Private Functions