You have completed Practice Vue.js Templating!

Preview

Practice Vue.js Templating: Challenge

An introduction to the challenge.

Have questions about this video? Start a discussion with the community and Treehouse staff.

Have questions about this video? Start a discussion with the community and Treehouse staff.

[MUSIC] 0:00

Hey, Treasure here. 0:04

Welcome to practice sessions for Vue.js basics. 0:06

Practice sessions are an opportunity to solidify some of the concepts you 0:09

just learned with a bit of hands on practice. 0:13

In this video I'll give you list of challenges to complete with Vue.js, and 0:16

in the next video I'll show you a solution. 0:21

For these challenges, I assume that you've gone through at least the first two stages 0:23

of the Vue.js basics course or have equivalent knowledge. 0:28

You should be familiar with basic Vue.js templating, directives, and methods. 0:32

When you're finished with the challenge, you should have an application that 0:37

displays a news article with a vote counter that adds or 0:40

subtracts votes when the plus and minus symbols are clicked. 0:44

You'll get a chance to add additional functionality in an upcoming 0:48

practice session. 0:51

To get started on this challenge, download the included project files, and 0:52

in your preferred text editor, open up the files in the folder named start. 0:57

Open up app.js to read and complete the list of steps. 1:01

To complete the challenge, 1:06

you'll want to create a new view instance with the necessary options. 1:07

And attach the view instance to the provided template in index.html. 1:12

Then you'll create the data properties listed in the challenge instructions. 1:20

You'll need to make up your own data for each property. 1:27

But the votes count should be 0. 1:30

Then you'll use Vue to display the data in the provided index.html template. 1:33

Next, you'll create two methods, increment and decrement. 1:38

The increment method will add one vote to the Votes property of the post. 1:42

The decrement method will subtract one vote from the votes property. 1:46

You'll want to call these methods every time the plus or 1:51

minus symbols are clicked to add or subtract the vote count. 1:54

I encourage you to consult the previous course work, the Vue.js documentation, or 1:58

Google to solve the challenge. 2:03

Do your best to get through it, but if you don't, that's totally fine. 2:05

Watching the following solution video will help you solidify your knowledge for 2:08

the next challenge. 2:12

Good luck, and I'll see you in the solution video. 2:13

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace