TechMastery

1. Components Basics

With great visual examples, this video covers: Introduction to Components, Props, Props Type checking, (This video example doesn't use SFC).

PS: The following article also talks about Component Props, which we will cover in the next section

An Introduction to Vue Components

https://masteringjs.io/tutorials/vue/components

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.

Vue JS 2 Tutorial #22 - Props

https://www.youtube.com/watch?v=9qqFH60isFc

PS: This article also mentions Slots, which we will explore in more details later on.

Intro to Vue.js: Components, Props, and Slots | CSS-Tricks

https://css-tricks.com/intro-to-vue-2-components-props-slots/

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.

Vue JS 2 Tutorial #24 - Events (child to parent)

https://www.youtube.com/watch?v=5pvG6fzkdFM

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'
  },

Vue Lifecycle Events

https://scotch.io/courses/getting-started-with-vuejs/vue-lifecycle-events

This video explores the following hooks: created , mounted , updated , destroyed and their before* variations.

Easy Way to Understand the VueJS Component Lifecycle Hooks

https://www.youtube.com/watch?v=bWHJeIzVCqA

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.

In this video, notice that the author uses vue-cli to create the project.

Components and .vue files | Learning the Basics

https://www.youtube.com/watch?v=FWQSuskE5UA

The official documentation explains really well all the benefits of using SFC files. This is the recommended approach and also how most Vue.js projects out there are structured:

Single File Components - Vue.js

https://vuejs.org/v2/guide/single-file-components.html

What people are saying:

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

A friend recently asked me this question: “what' s the benefit of using .vue files for single file components, vs creating a component with separate html/css/js files?”

This is a really good question! I' ll answer with my own opinion publicly in case it' s helpful (thread)
— Sarah Drasner (@sarah_edo) February 27, 2018

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>

Components and lifecycle hooks

Concepts