Vue.js Roadmap

Components and lifecycle hooks

1. Components Basics

2. Communication between components with Props and Emit

Vue.js creates a contract when communicating with parent/child components.

Pass data down to a child component

Props are used to pass data down to child components.

Pass data up to a parent component

Now, when you want to communicate with a parent component, from the child, you can use the emit() event.

3. Lifecycle hooks

@todo content

What are some real use-cases scenarios?

It's common to see the created hook used to go and grab external data (from APIs, for example).

created () {
    // fetch the data when the view is created 
  watch: {
    // call again the method if the route changes
    '$route': 'fetchData'

4. Single File Components

When creating a project using vue-cli , SFCs will be ready to be used as we've seen here @todo[link to 1st concept]. No additional configurations are required.

What people are saying:

Sarah lists some great benefits of using SFC over separated html/css/js files:


What does a SFC look like?

The basic structure of a single-file component is:

  • <template> section
  • <script> section
  • <style> section
        <!-- the root element doesn't necessarily need to be a div -->

    export default {}


For example:

// TodoList.vue

        <li v-for="todo in todoList" :key="">{{ }}</li>

    export default {
        data() {
            return {
                todoList: [
                    // an array of todo's should go here...

<style scoped>
    li {
        color: green;