Practice Vue.js Templating: Challenge2:16 with Treasure Porth
An introduction to the challenge.
[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 up