Getting User Input

We've tackled two items on our to do list. 0:00 We're displaying some fine looking cards that toggle back and 0:03 forth between some interesting information. 0:05 Next step, get the info for our new cards from the user. 0:09 So how do we get information from the user? 0:13 If you're used to using jQuery or JavaScript, 0:15 it might be tempting to select these input elements. 0:19 And save them to variables so we can start learning event listeners and 0:26 accessing their values and so on. 0:30 Instead, we're gonna learn about another vVue directive, Vue model. 0:32 Let's put Vue model on one of our inputs and discover how it works. 0:37 With v-model we can bind a form field to a property on our data object. 0:43 I'll show you what I mean. 0:48 In the quotes, 0:50 I'll tell v-model which property I wanna buy into, let's name it test for now. 0:50 Now I'll create a property called test on my data object. 0:57 Remember, any property on the data object must start with some initial value, 1:06 so I'll set it to an empty string. 1:11 Here's where the magic happens. 1:13 Let's save and open up Vue dev tools. 1:15 Watch what happens when I type into the input field where I've placed the v-model 1:24 directive. 1:28 Anything I type into the input field 1:30 becomes the value of the property I've bound it to. 1:32 So I'm saying, hey Vue, whatever is inputted into this field, 1:37 bind that info to a property called test. 1:42 Kind of like saving the value of the input to a variable. 1:45 Pretty awesome, right? 1:48 I'm now free to use this property in my template. 1:50 And Vue will make sure that the value stays updated in real time. 1:52 Using mustache syntax, add the test property to the template. 1:59 We'll add it here between the heading one tag. 2:04 Now, as I type, the text appears immediately on the page. 2:14 Note that this also goes two ways. 2:21 In other words I can type a message directly into the test property. 2:23 The info populates in the form field which then prints to the H1 element. 2:34 I'll go ahead and undo this now that we've tested it out. 2:39 How can we use v-model to collect what the user has typed? 2:46 To think through this, 2:49 let's break down the first step in our plan into even smaller steps. 2:50 So we need to get info for new cards from the user. 2:56 To do that first we need to create data properties for the front and 3:00 back of the card. 3:04 Then we need to bind those properties to the form using v-model. 3:09 So in my Vue instance I'll create two new properties called newFront and newBack. 3:17 And I'll set them to empty strings for now. 3:29 I'll add two v-model directives to my two input fields, 3:32 binding them to those properties. 3:36 Let's save this, refresh, and look at Vue dev tools again. 3:50 Try typing something into one of the fields. 3:56 I am now successfully collecting the information I need to create a card. 4:10 Now, how do we capture this information and make a new card with it? 4:15 Let's figure that out in the next video. 4:19