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 
    this.fetchData()
  },
  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:

TL; DR

What does a SFC look like?

The basic structure of a single-file component is:

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

<script>
    export default {}
</script>

<style></style>

For example:

// TodoList.vue

<template>
    <ul>
        <li v-for="todo in todoList" :key="todo.id">{{ todo.name }}</li>
    </ul>
</template>

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

<style scoped>
    li {
        color: green;
    }
</style>