Learning Vue JS: The Starter Guide

Explore mustache interpolation and JavaScript expressions for dynamic data and ternary operations in templates. Bind colors and classes using directive bindings based on data properties.

Learn how to use v-on and v-model to handle input events and achieve two-way data binding, explore methods, event modifiers, and directives.

Learn conditional rendering in Vue.js with v-if and v-else, and practice data and class binding. Build dynamic content with a flip method and v-bind usage.

Build a reactive Vue.js word game using conditional logic, user input, v-model, methods, computed properties, and watchers to progress through words and reveal a final screen.

Create and register a new component with a template, then wire an input and button to enable two-way binding that updates the name.

Navigate the Vue.js component lifecycles from before create to updated, including before mount, created, mounted, and before update, and see how data initialization and API calls occur before rendering.

Create and run a Vue app using the Vue CLI, build a single-file component to simplify structure, install syntax highlighting plugins, and preview the app in the browser.

Explore composing with components in Vue by embedding a tic tac toe module within a root component, promoting modularity, passing props, handling events, and weighing deep composition trade-offs.

Explore how composed components communicate using custom events and v-model, emitting data, performing validation, and implementing two-way binding with simple events, slots, and refs.

Explore what an API is, with a focus on REST APIs, the options API and the composition API in Vue, and trace the shift from monoliths to microservices.

Learn to work with mock APIs in a Vue project by setting up a products model, importing axios, and replacing fetch calls with axios to fetch products.

Learn how Vue router guards work at global, route, and component levels to intercept navigation, with component guards such as before route enter, before update, and before route leave.

Explore alias and redirect to map multiple paths to a single root, and understand meta data on routes. Implement programmatic navigation with the router using push and back.

Learn why testing matters, install Jest, and run unit tests for a Vue app, using a test suite to automatically verify components and prevent regressions.

Learn testing conventions for Vue apps, using arrange-act-assert, and practice trigger and set value methods to verify input effects, element text, and test attributes.

Expose your local dev server with a local tunnel, forward port 5000, and access it from the internet while noting bandwidth limits and upcoming cloud hosting.

Deploy your Vue.js starter site to the internet with Netlify, after syncing your local project to GitHub. Git enables pushing changes and auto rebuilds and publishes updates.

Deploy a Vue.js app to Heroku using GitHub integration and build packs, running a node server as a platform-as-a-service with automatic redeploys.

Deploy a website directly to the cloud from a shell by provisioning a DigitalOcean droplet and installing Node, npm, and Yarn. Learn to serve with a simple static file server and configure engine x as a reverse proxy, with CDN considerations for security.