AspNetCore & VueJS

Basic Vue Syntax

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

Conditionals: div v-if

Vue can be used in Razor Views

Custom Components

Each instance of a component has its own state
pass data via 'props'
communicate back to parent via 'events'
Accept same options as a Vue instance (except element)

component = part of a View

comments in Blog-Post

creats a partial-view containing vue-scripts Needed

can pass things from ViewModel directly into Vue Component '@Model.Id'

MVC w/ Vue S.P.A.

Start by Returning an empty view

public IActionResult Index(string path) => View();

[HttpGet("{*path}")]

then in your razor view...

@{ ViewBag.Title = "ADMIN" } div id="app" @section scripts { script src="/js/app.min.js" }

ViewApp (folder w/ Vue code)

similar to .NetCore SPA templates

contains a webpack.config.js

vueloader (compiles Vue into JS)

babel = for cross-Browser support

main.js file

new Vue({ router, store, render: h=> h(App), }).$mount('#app');

State Management

Vuex

SPAs stateless by default

Vuex is based on Flux (React)

use a "store pattern" for smaller apps

KendUI for Vue (via cdn) ... same as JQuery Widgets

Use Vue w/ DOTnetCore

Add to specific pages/views of existing app
ASP.Net Core App (MVC) + VueJS SPA
API = DOTnetCore FRONT-END = Vue CLI
JS Services deprecated?

Vue and npm, extensions, etc...

npm install -g @vue/cli

Extensions

Vetuer
vue snippets
Vue dev tools browser extension

CLI

vue create name -d (without -d it asks questions)

npm run serve

in vsCode... ctrl + shift + p (creates a new terminal in current active directory)

Vue Project Structure

Vue starting (app)

1) main.js - we don't serve from 'public' ... happens from 'dist'

style lang="scss" scoped.

scoped means style is scoped to only this component

without scoped... applies to entire application

put what you want site-wide in app.vue file

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