Vue.js 2 for absolute beginners

Learn how to create and reuse global components in Vue.js 2, using the static component method, templates, and kebab- or Pascal-case naming to build modular, reusable views.

Define a local Vue.js 2 component with a template and script, register it via the components property, and render multiple instances in the view to display three local high components.

Bind a message prop from the app's model to a child component in Vue.js via an attribute, then retrieve it with props and render it with interpolation.

Learn how to use custom events in Vue.js 2 by emitting events from a child and listening in the parent with v-on to update the parent total from three counters.

Discover Vue.js lifecycle hooks, including the created hook, to fetch three random users with axios from the random user API and bind the data to the view.

Transform local Vue components into global components through a guided exercise, naming one and all, and verify the same results in the browser.

Explore computed properties in Vue.js 2, keeping logic out of templates. Implement a reverse text computed property and a computed property that joins first and last names.

Explore how Vue.js 2 watchers detect changes to model property. See counter that increments and resets at ten, and a text watcher that shows a message when 'here' is detected.

Learn how to implement per-route navigation guards in Vue.js 2 by defining beforeEnter in the route or using beforeRouteEnter, beforeRouteUpdate, and beforeRouteLeave in components to control page transitions.

Set up your first vue.js project with the vue-cli, create a component-based app, install dependencies, choose runtime plus compiler, and run npm run dev to view at localhost:880.

Explore the architecture of a Vue.js 2 app, from index.html and main.js to reusable single-file components with template, script, and style, including the Halo world component and logo.

Learn to create and edit a Vue CLI app by scaffolding a project, defining an app component, and rendering a registered component that displays a table of people.

Create a new Vue app using Vue CLI, add a users component, fetch users from JSONPlaceholder with axios in the created hook, and render them in a Bootstrap table.

Define render functions in Vue.js 2 by converting templates into a render function that uses createElement and slots, including named title and bottom slots and the default slot.

Learn how to escalate a button click from a functional component to its parent by passing a click listener in render, enabling the parent to handle the event.

Learn two techniques to access store state from Vue.js 2 components: log store.state values directly from methods, and inject the store into all components via the Vue instance.

Explore the Vuex plugins section, using a store plugin to subscribe to mutations and state changes, triggering console logs on initialization and after each mutation.

Define a local halo mixin with a created hook that logs 'local mixin says hello'. Create a component that uses this mixin to display the text in the browser.

Transform a local mixin into a global mixin in Vue.js 2 using a static view mixin and created hook to log hello via halo, noting global scope caveats.

Create a next-gen project with npm, run the server at localhost:3000, then build three linked pages in the pages folder using the next link component and lorem ipsum content.