- [Instructor] Next I want to take a quick look
at how to bind data properties, to an elements attributes.
Let's say that we wanted
to add a link for more information down here.
The link text will be read more and,
it will point to the Vue guide.
But if we want to our app to be a generic solution
for any kind of flashcard deck,
we would probably have our URL as part of the data,
and we can just call it readMoreUrl and initialize
it to that same value.
All we have to do now, to use our data property in place
of this hard-coded href value,
is replace it with readMoreUrl,
and change href to v-bind:href.
So now if I refresh, I have a link down here,
with a dynamic href value.
One way to simplify your template or your markup,
is just to remove the v-bind part, leaving only :href,
this is just a shorthand version of the v-bind syntax,
and it's usage is very common.
In fact for the rest
of the course we'll be using the shorthand syntax,
instead of the v-bind syntax.
Next, I'm going to add a text field up here just
to experiment a little with.
(keyboard crunching)
And if I wanted to pre-populate this with an initial value,
I could do the same thing with v-bind value
or just :value.
Let's create a new data property called user input,
and down in our data object we'll give it a default value.
(keyboard crunching)
And we'll just say default for now.
So going back up here again I'm just applying this markup
and CSS to make it all a little bit easier to see.
And we'll invite the user to type something.
So now when I refresh, I see the default value there,
and if I go to the console, and do app.userInput
to access our data property,
I see that it has the value default,
and, I can also reassign it to some other value,
and once I hit enter, I see that reflected
on the page immediately.
But one limitation with this is
that the data is only flowing in one direction,
from Vue to the DOM.
So if I go up here and I type, something else,
it's not going to be reflected,
when I evaluate app.userInput again
it still says some other value.
And I'm certainly going to want my app to have access
to that updated value.
To solve this problem,
we can just use instead of :value, the v-model directive
to set up that two way binding.
So now when the user edits this field,
it will automatically update our user input data property.
So let's test this by checking for the word flip,
and using user input, as a mechanism for flipping the card.
So instead of flipped here,
I'm going to ask if user input is equal to flip,
and we'll do the same thing right below,
instead of, flipped we have that conditional expression.
So now when I refresh, and type the word flip,
notice I don't even have to submit the form,
I don't even have a form actually,
and in fact, this field isn't even named,
but as soon as I type the P, we got the card to flip,
and then if I change it or just hit backspace,
it unflips it,
that's because the reactivity mechanism is based
on the native input event
that's being raised every time I type a character.
So here we have a very declarative very reactive setup
to handle this user input,
but of course a simple click
to flip the card would be better
so we'll look at that next.