Vue.js Roadmap

Main concepts

Concepts

  1. Overview
  2. Installation and vue-cli
  3. Vue instance and data properties
  4. Methods
  5. Computed properties and Watchers
  6. Rendering, Directives, and Events
  7. Class and Style Bindings

1. Overview

Before jumping into the details, why not try to take a bird's eye view on how all the pieces and tools interact with each other?

In this video: Overview, anatomy of a component, installation, data properties, loops, child components, class biding, event handling and more.

VueJS Crash Course
https://www.youtube.com/watch?v=Wy9q22isx3U

2. Installation and vue-cli

Use npm or yarn to install vue-cli :

npm install -g @vue/cli
# OR
yarn global add @vue/cli

Then, to create a new project run:

vue create my-project

# OR, using the graphical interface:
vue ui
Creating a Project | Vue CLI
https://cli.vuejs.org/guide/creating-a-project.html

Creating a project without vue-cli

If you want to create a project from scratch, without using vue-cli , here's some of the things that you will have to configure:

  • Webpack
  • Install all the dependencies
  • Create all the initial files

According to the author: "Understanding the build process behind the frameworks you use will help you to better understand the framework itself."

How to create a Vue.js app without the CLI
https://www.freecodecamp.org/news/how-to-create-a-vue-js-app-using-single-file-components-without-the-cli-7e73e5b8244f/

3. Vue instance and data properties

Learn two of the very basics and fundamental concepts of Vue: the Vue instance and data properties.

@todo (video starts from 19:27)

Vue JS Crash Course
https://youtu.be/Wy9q22isx3U?t=1167

In this video: Vue instance and data property.

Vue JS 2 Tutorial #2 - The Vue Instance
https://www.youtube.com/watch?v=3ROjxrSa5pk

5. Computed properties and Watchers

The documentation is a great starting point to understand Computed properties:

It also addresses a common question: should I use computed properties or methods?

Computed Properties and Watchers
https://vuejs.org/v2/guide/computed.html
Intro to Vue.js: Computed Properties
https://www.youtube.com/watch?v=NK-Cy4IHwI4

In this article, by Sarah Drasner: computed properties, watchers and methods.

Methods, Computed, and Watchers in Vue.js
https://css-tricks.com/methods-computed-and-watchers-in-vue-js/

From StackOverflow, this answer contains great examples and explains the differences between methods vs computed properties

Method vs Computed in Vue
https://stackoverflow.com/questions/44350862/method-vs-computed-in-vue/44350932#44350932

6. Rendering, Directives, and Events

Learn about essential Vue.js concepts: v-if , v-for , v-model , v-on .

From Sarah Drasner, member of the Vue core team:

Intro to Vue.js: Rendering, Directives, and Events
https://css-tricks.com/intro-to-vue-1-rendering-directives-events/
Vue.js Directives
https://flaviocopes.com/vue-directives/