- [Instructor] At this point, our little Customizer
has a nicely interactive size selector.
It updates data, uses it to make
some visual and data updates.
Generally we're looking pretty good.
So lets pause and clean up our templates
just a little bit more using shorthand notation
for some of Vue's built-in directives.
With a highly interactive web app,
and I'm not saying that we're there with this one yet,
but with a highly interactive web app,
you're invariably going to be writing event listeners
all over the place and updating attributes,
classes, styles quite often.
Vue has a little bit of shorthand to help you with this.
Back over here in my editor.
I use v-bind to update my classes here,
and of course I can use that on any attributes I like.
And then my event listeners all take the form
of v-on, colon, and so forth.
To make these easier to write, Vue lets you take off
the v-bind from any of these,
and you can just write colon class,
or colon source, or alt, whatever it is.
If you don't include anything but a colon,
Vue knows that it's going to be a bind.
And for event listeners, you can take off all this stuff
and use an at sign instead.
So this will work for any event, blur,
focus, you know, all that sort of thing.
So here, I'm just changing to a colon for my bind,
an at sign for my event listener,
save, and let's try it out.
Refresh.
Let's make sure this still works.
Great, class is obviously still updating,
my events are still firing, and that's really it.
This will save you a little bit of effort,
so when you're writing binds you can leave off v-bind
and just use a colon, and when you're adding
event listeners you can just use an at sign.