>> Hi, everyone. My name is Chris Noring,
I work at Microsoft.
In this video about Vue,
we'll talk about input.
Now, input is one of
those really crucial things when it
comes to web applications in general.
We need a way for the user to input
data so that we can store that data somewhere.
Looking here at mark-up,
initially we see that we are using an input tag.
We are used to
inputting text or whatever else we want in this tag.
To help us, we have a directive.
Now, this directive is called v-model,
and you will see that all directives in view is using
a syntax called v dash something,
so in this case it's v-model.
Now, the v-model, for short,
is pointing to a piece of data called person.name,
and we also have a place holder to make it
easier for the user to understand what they should input.
We also output the contents so we can see this content
changing because when we use v-model,
we actually get a two-way binding.
Now, a two-way binding means that if we do a change in the Vue,
it will be reflected in JavaScript code.
If we do a change in JavaScript code,
we will see that change happening in the Vue as well,
and that's what we mean by the whole double binding.
It happens in both directions.
To understand more about what this person name is,
let's have a go to index.js,
and in index.js, we bootstrap our application and as part of that,
we have this data property.
This data property returns an object,
and as part of this object,
we have person which points to an object,
and the object itself has a name property,
which means that when we show this in our Vue application,
it will resolve to Chris.
I'm Chris, by the way. Without further ado,
let's have a look at the web browser for
this and see how our Vue application is running.
We see here in our Vue application that we have our input field.
We can select this and we can
see that this corresponds to the mark-up that we have.
We also see that the value has resolved to Chris
because it's looking at person name which had a value Chris,
and now we're going to try out this
v-model directive and see what actually goes on.
Remember, I said this is a two-way binding.
So if I were to actually add value here,
you can see that the value is instantly
being reflected and this is because of the v-model.
Now it has gone back to the JavaScript part of
the application and changed this value for us.
That's how the v-model works,
this is how input works.
Let's have a look at another example of v-model.
You can see that this is
a very reoccurring theme in Vue applications.
So far we've seen how we can use
the V-model directive to handle inputs for input elements.
We can also be using v-model in other places.
For example, we could use it with lists.
Here we have a list that we have already encoded in mark-up,
let's try to uncomment this so we see what's going on.
There we go. Now, a list in HTML consists of the select element,
but it also consists of
one or many auction elements as trial elements.
One of the first thing we're going to do is to
create a list of options.
For that, we use the v-for.
Now, v-for points to something called the shippingTypes.
We will look at that one in a sec.
But essentially shipping types is a list,
and for each item in the list,
we ensure that we create one new option.
To keep track of selection in this list,
we add v-model as a directive and we point to selected types.
Selected type will contain the selected value.
That's essentially how we could be using this and to
keep track of this selections as we are doing them,
let's ensure that we show selected type value at all points.
So as soon as we do selection,
this value will be changed.
V-model and v-for.
There's also things such as where we bind
the value element to type name,
and this is just us going
through each item in the list and saying,
this is the value, this is the title,
the thing that chose if you hover over the element,
and a key here.
When it comes to keys,
this is about making it easy for Vue and tell Vue how to optimize.
We don't need to really care.
The only thing is that we
need to point out something that's unique.
For us, uniqueness spells the type name.
But let's have a look at the shipping types.
If we look at our data model,
we see that shipping types is a list and
it contains a list of objects.
Each object consists of a name property,
a ufo, and spaceship,
and we also have this selectedType
where our selection will end up,
and this is the one we point out in v-model.
Let's have a look in the end browser, how this works.
Now that we've saved it, ensure it's saved there,
and now, let's go to the browser.
In our browser, we now see that we have
this new element here, this select list.
Quick, hover over this,
we see that it's a select list,
and we see that shipping types have created
one option for each element.
Ufo has its own options,
spaceship has its own option,
but there's also the default one that we created.
This is really good to have as a feedback to the user to say,
''Hey, you need to do something.''
At this point, let's change the shipping type.
We change it to ufo and we see that the value changes to ufo.
This is all about the v-model binding and
us binding to this selected value.
Now, we change to spaceship and we
can see again that the value is changing.
The whole crew or the whole core of
this lesson in using v-model is that we can use v-model,
but we can also use it for various types of input elements.
Not just input, but also select.
I didn't show you radio button and checklists and so on,
but definitely v-model can be used throughout.
[MUSIC]