Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
An introduction to the challenge.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up