Vue JS 2.0 - Mastering Web Apps

Learn to add interactivity to Vue.js 2.0 view instances by binding click events with v-on and the shorthand @click, revealing a secret number via an alert.

Learn to create reusable Vue components that encapsulate HTML, add custom behavior, and include a counter with local state, data as a function, props, and a template.

Create simple notes with a title and text, submitting them to capture the date and time. See how Vue powers a single-page app that displays each new note.

Explore the structure of Vue files—template, script, and style—by building a component, rendering it into the #app element, and wiring data for display.

Integrate the Bootstrap css library to quickly improve visuals, then build a custom stylesheet that sets a dark body background, a font stack, font smoothing, centered content, and white text.

Add bootstrap and a local stylesheet, import the minified dist, and reuse Starbase styling and router index, while removing the character card and introducing the new view router package.

Initialize a jokester project with the Eucla tool, run npm install to add node modules, then build and render the Vue app with components and bootstrap styling.

Create and wire a new store alongside your components to hold the app's state, starting with a jokes array initialized as empty and exporting a default store instance.

Learn to set up Vue Router in a Vue.js 2.0 app, create dashboard and sign-in views, configure history mode, and enable programmatic navigation with router-view.

Create a Vue.js sign-in form with email and password fields bound by v-model, styled with Bootstrap, and wired to Firebase authentication with sign-in using email and password, plus error handling.

Learn to create a Vuex store, define a user state, and implement mutations and actions to sign in, dispatch updates from a Firebase listener, and manage sign-up and sign-out flows.

Develop sign up component for a vue.js 2.0 app by adapting the sign in template. Connect firebase authentication with email and password and link sign in and sign up routes.

Define and initialize the events in the Vuex store by adding an empty events array, creating a set events mutation, and an action to dispatch this mutation for real-time updates.

Master the browser console for JavaScript, the read-eval-print loop, operators, and variables with var declaration and reassignment, plus numbers, strings, and booleans.

Explore booleans and conditional logic in JavaScript, using if, else if, and switch statements with the equality operator, and output results in the console.

Explore the undefined value when variables are declared but unassigned and when functions return nothing; understand that undefined is a primitive and that primitives are immutable.

Discover that in JavaScript almost everything is an object, including arrays and functions, while primitive values stay immutable. Apply a simple property test to confirm objects and explore prototypes.

Compare let, const, and var to reveal redeclaration rules, block scope, and var hoisting; illustrate scope with blocks and switch statements.

Explore var hoisting and the let-var differences, including how declarations hoist, how assignments affect logs, and why reference errors occur. Learn how function declarations hoist and why expressions do not.

Explore JavaScript scope and hoisting through an interview-style example, showing how let and var affect values across blocks, functions, and console logs.

Master properties shorthand and destructuring assignment to write concise JavaScript for objects and arrays. Explore defaults, skipping indexes, and nested patterns for robust variable extraction.

Explore function factories by returning inner closures from an outer function, creating reusable add-suffix functions. Learn how closures capture environment and why functions are first-class citizens and higher-order functions.

Explore closures, higher-order functions, and callbacks through a JavaScript interview-style problem, building nested functions that yield a total of 15, with practical insights.

Explore the fundamentals of object oriented programming, including object templates (classes), attributes, methods, and inheritance, and see how instances shape JavaScript code, preparing for constructor functions.

Explore constructor functions in JavaScript to build reusable object templates, create instances with new, and use this to define properties and methods like an info method.

Learn how JavaScript classes replace constructor functions by using a class with a constructor, methods, getters, and setters, and explore inheritance via extends, including Salesforce Tower guests.

Understand how prototypes enable prototype-based inheritance in JavaScript by using constructor functions and the prototype property to share methods across object instances, including primitives behaving as objects.