Vue JS 2.0 - Mastering Web Apps

Create your first Vue app by wiring an index.html with a script tag loading Vue, a div #app, and a new Vue instance binding data to display hello world.

Demonstrate how directives add reactivity in Vue.js 2.0 apps by binding attributes with v-bind and using v-if for conditional rendering. Apply these patterns through practical examples.

Learn to render dynamic lists using Vue's v-for, creating a colors array and iterating to generate list items, then apply conditional rendering with v-if for primary colors.

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.

Explore v-model data binding and computed properties to update state from user input and derive a lowercase version of text in a Vue 2 app.

Dive into Vue.js lifecycle hooks, including created, mounted, and updated, to run code during creation, DOM mounting, and data changes, using alerts and a counter as examples.

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.

Set up Notemaster by organizing the view directory into essentials and applications, creating an index.html, loading Vue and Bootstrap, and initializing a Vue instance to interpolate the title.

Master building a note form in Vue.js 2.0 using v-model bindings for title and text, creating a note object with empty fields, and adding the note to a growing list.

Extend Vue data with a notes array and preload a note with title, text, and date from new Date().toLocaleString. Add notes with a button using v-on and render with v-for.

learn to render a dynamic notes list in a vue js 2.0 app with v-for, show notes in a card (title, date, text), and remove notes using index and splice.

Launch a starbase app to generate a squad of Star Wars characters, swap cards for favorites, and learn to fetch dynamic data from an API with the Vue Vuclip tool.

Install the Vuclip CLI with npm, initialize a Vue project from the web simple template, then run npm install and npm run dev to launch Starbase.

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.

Explore how to fetch data from the Star Wars API using the fetch function, handle promises with then, and parse JSON to display character details in the starbase application.

Create a reusable character component in Vue.js to fetch and display multiple characters efficiently. Use data, methods, created lifecycle, and component registration to render characters in your app.

finalize character behavior by using props for dynamic IDs, render multiple characters with a v-for loop and keys, and enable random character switching for a starbase app.

Structure the character component in a Vue.js 2.0 app by building a character card with height, hair color, and eye color, using Bouchareb stylings and a green clickable border.

Enhance the starbase app with Vue Router to fetch characters and planets from the API through routes, exploring multiple pages within a single-page app.

Initialize the starbase router project from a webpack-based template, run npm install, install vue-router, and then npm run dev to launch the app and work from a new source folder.

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.

Explore how Vue Router maps paths to components, supports dynamic queries, and renders via router-view. Build a data component that reads route parameters and displays type values.

Set up Vue router links to data/people and data/exoplanets with a header pipe and titles like meet the characters and explore the planets, then watch route changes to update content.

Create a Vue data component that fetches items from API, initializes items as empty array, and uses a created hook to run fetch items for IDs 13 and 14.

Create a reusable item component in Vue.js 2.0 to render items from an array, using props and v-for, then display item details in a card by iterating object keys.

Add the switch item method, reusing fetch items logic with a type prop to pull data from the API, and rename the prop to passed item with a click handler.

Explore building a jokester app with Vuex state management, fetching jokes from an API, rendering single or multiple jokes, filtering them, and understanding how Vuex coordinates state across components.

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.

Master how Vuex enables centralized state management in Vue.js apps by using a global store. Learn how mutations and actions control state changes and integrate the library into your project.

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.

Mutating the store demonstrates updating state through named mutation types defined in a mutation-types file, exporting a mutations object, and using a payload to spread jokes into state.jokes.

Master the Vuex store by creating an action to fetch ten random jokes from a joke API, commit the jokes mutation with the payload, and map actions to a component.

Create a reusable joke component in Vue that accepts joke data via props, renders each joke as a Bootstrap-styled card using a v-for loop over the store's jokes.

Enhance a joke app by adding a random joke fetch via a new mutation and action in the Vuex store, expanding from ten jokes to one at a time.

Add a remove joke mutation and action to the store, pass the joke index from components, and implement an X button to delete jokes from the list.

Implement checkbox-based filtering of joke types (general, knock-knock, programming) in a Vue.js 2.0 app, using a types array and a check types model to display selected jokes.

Build a real-time turnout social app with user authentication, event posting, and a multi-page dashboard, using Vuex for state management and Firebase for authentication and real-time data.

Set up a Vue 2.0 web app from scratch by initializing a turnout project, installing Vue Router, Vuex, and Firebase, and launching the dev server to render a simple app.

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.

Enable email/password authentication with Firebase, initialize the Firebase app using a config, and use the on-auth-state-changed listener to route users between sign-in and dashboard.

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.

Implement signing out and signing up in a Vue.js 2 app using Vuex mutations and actions, wired to Firebase, with a dashboard button to dispatch sign up and reset user.

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.

Explores building a real-time events feed with Firebase in a Vue app. Builds an add event form, pushes events to the database, and updates the dashboard in real time.

Add a real-time listener on the events ref to populate a local events array from Firebase snapshots, then wire updates to the store via a mutation action.

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.

Create the event item component in Vue JS 2.0 to render event cards via props and a template, and use v-for to display date, location, and host.

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.

Learn when to use semicolons in JavaScript statements, covering declarations, control flow, and loops, with the guideline to end each statement. Explore single-line and multi-line comments and the undefined value.

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.

Explore how JavaScript arrays are mutable lists that can hold mixed data types and have dynamic length. Master key operations including push, zero-based indexing, and splice for insertion or removal.

Explore the basics of JavaScript objects as mutable data structures with named properties. Use dot and bracket notation to access properties, including when names are not known ahead of time.

Master loops and iteration in JavaScript by using for, while, and do while loops, with increment patterns like i++, i += 1, and practical examples.

Explore JavaScript functions from scratch, comparing function declarations, function expressions, and an arrow function, with tips on parameters, return values, side effects, and camel casing.

Explore arrow functions as a concise alternative to function expressions, learning their syntax, anonymous nature, parameter handling, optional parentheses, and implicit return.

Learn how object methods access their own properties with this, compare function expressions and arrow functions, and log profile information using this.username, this.years, this.languages, and nested company fields.

Explore how arrow functions as methods don't create a this object, causing undefined usernames and years; switch to a function expression to restore this and fix join of undefined.

Explore how the this keyword binds inside JavaScript object methods and nested functions, including why arrow functions lose the owner binding and how outputs vary.

Explore how callbacks in JavaScript pass functions as arguments, trigger them inside another function, and use array methods like forEach and custom implementations with arrows.

Explore a JavaScript callback interview question by building log message and greet functions, returning hi via a callback and logging it with console.log.

Examine dynamic JavaScript types, from primitives (numbers, strings, booleans, undefined) to objects and functions, and learn that arrays are objects with indexed properties and array methods.

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.

Explore how JavaScript handles equality and type coercion, comparing double equals and triple equals, and uncover how strings, numbers, and booleans convert in operations and truthy or falsy values.

Explore truthy and falsy values in JavaScript with practical examples, showing how strings, numbers, empty arrays, and empty objects act in boolean contexts, and guard code with if checks.

Explore null versus undefined in JavaScript, demonstrating null as the absence of an object, their differing types, and how strict and loose equality and explicit type conversion behave.

Explore explicit type conversion in JavaScript by using number, boolean, and string wrappers, compare with implicit conversion, and leverage date, array wrappers, and typeof for robust timestamps.

Explore JavaScript types in a dynamic, weakly typed language, covering the type of values, string concatenation, implicit coercion, and the relationship between arrays, objects, and prototypes.

Master let and const for variable declaration and mutability in JavaScript, distinguish primitives from objects, and understand assignment, mutation, and why constants can still contain mutable objects.

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 template literals and ternary operators to simplify string concatenation, interpolation, and multi-line strings, and learn to combine them for concise, expressive code.

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 object methods in JavaScript, including Object.keys, Object.values, and Object.entries, then clone and merge objects with Object.assign, and understand property overwriting rules.

Explore the spread syntax and its three dots for cloning and merging objects, combining arrays, and calling functions; note it’s an alias for Object.assign with the same caveats.

Explore how Object.is compares values, why Object.assign and the spread syntax create shallow clones, and how object references affect nested data, with practical examples and pitfalls.

Explore how JSON.parse and JSON.stringify enable deep cloning by stringifying and parsing objects, contrasting with shallow clones from Object.assign and spread. Note JSON's data types and its limits, no functions.

Explore true deep cloning in JavaScript by comparing Object.assign, spread, and JSON.parse/stringify, implement a custom deep clone, and use lodash's cloneDeep for robust cloning of nested objects.

Explore how object clones differ: object.assign and spread produce shallow copies, JSON.stringify/parse yields deep clone with caveats, and lodash cloneDeep offers a true deep clone.

Master JavaScript closures by showing how inner functions access variables across scopes. Build private methods with closures and expose public methods like signup and signin with function factories.

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 higher order functions in JavaScript and functional programming, showing how callbacks and function factories work, with foreach illustrated through practical code.

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.

Explore the object prototype and the prototype chain in Vue JS 2.0 mastering web apps, using __proto__ to inspect inherited prototypes and see how all objects trace back to Object.

Explore how prototypes drive inheritance in JavaScript by using function constructors, the prototype property, and instance lookups, including how primitives relate to object prototypes.

Discover how asynchronous code in JavaScript uses setTimeout to run a callback after a delay, revealing non-blocking execution, timeout IDs, and queue processing, with fetch usage.

Learn how the fetch method makes API requests in JavaScript, handles promises with then, and extracts the JSON payload from the Official Joke API to process asynchronous data.

Create promises from scratch using the Promise constructor with resolve and reject, simulate a 50/50 outcome via Math.random, and handle results with then and catch in asynchronous code.

Explore how the JavaScript engine and runtime execute code, manage the stack, heap, and queue, and use the event loop to handle setTimeout and promises non-blockingly.

Explore how JavaScript's non-blocking engine becomes blocking with async and await to pause until a promise resolves. See a boomerang example with setTimeout, try/catch, and promise rejections.

Master asynchronous JavaScript concepts through a hands-on look at setTimeout and non-blocking code, revealing how the event loop and timers shape console log output.