Introduction to Vue.js

Introduction to Vue.js Challenge 3: Refactoring into a Component

Topics:

This course has been updated! We now recommend you take the Introduction to Vue 3 course.

Check out a free preview of the full Introduction to Vue.js course:
The "Challenge 3: Refactoring into a Component" Lesson is part of the full, Introduction to Vue.js course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students convert pre-existing code into a component.

Get Unlimited Access Now

Transcript from the "Challenge 3: Refactoring into a Component" Lesson

[00:00:00]
>> Sarah Drasner: Okay, so exercise time. You are going to take this pen, here, and this pen is hard-coded. It has your upcoming destinations. It has a little SVG here. It has this h2, and it has some text. And it's all just hard-coded here. But in your view instance, you have all of these locations in an array, Paris, and an image, and a description.

[00:00:26] And what I want you to do is actually turn this into a component using what's in the instance. So rather than writing it out and hard-coding it, we're gonna make it so that we can replace that data, and we can use whatever data is in our instance here.

[00:00:45] So it's very similar to the shop demo we saw earlier, going from this, to this.