Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Vue.js Templating!
You have completed Practice Vue.js Templating!
Preview
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