Practice Vue.js Templating: One Solution3:30 with Treasure Porth
One solution to the challenge.
Welcome back, let's walk through one solution to the challenge. 0:00 And remember, if your solution is a bit different that's perfectly fine. 0:03 First let's create new Vue instance. 0:08 I'll pass the Vue instance object with three properties, el, data and methods. 0:16 I'll specify the div with the id of app as our template. 0:31 I'll add some data for post, creating properties for title, summary, votes, 0:37 and thumbnail. 0:42 I'll save, go to index.html and using moustache syntax, 0:49 I'll add variables to my templates to display the properties I've just created. 0:54 So here where it says votes, I will say votes. 0:59 I'll replace the post title with title, 1:05 and the summary with summary. 1:11 I'll use vbind to bind the thumbnail image URL to the image tag. 1:15 I'll save and open up index.html in the browser to make sure that all of my data 1:28 is displaying correctly. 1:33 Great, now create some methods to add functionality to this vote counter. 1:35 First, in the view template, 1:42 I'll add a v-on click directive to both spam elements. 1:44 When the plus sign is clicked, I want to call a method called increment. 2:01 When the minus sign is clicked, I want to call a method called decrement. 2:06 Now I'll go my view instance and create the increment and decrement methods. 2:12 Inside the increment method, I'll wanna get the value of votes. 2:33 Remember, I can access that value by saying this.votes. 2:39 To increment I'll add one vote to the votes property total. 2:45 And to decrement I'll do the same thing, 2:53 only I'll subtract one vote from the votes property. 2:55 Let's go to our preview and see if this works. 3:03 And it works, fantastic. 3:11 In an upcoming practice session, you'll get the chance to enhance this 3:14 project further by adding the ability to display multiple posts, add new posts and 3:17 order posts in descending order by vote count. 3:22 That's it for this practice session. 3:25 Keep pushing forward, and happy coding. 3:27
You need to sign up for Treehouse in order to download course files.Sign up