From the course: Vue.js 2 for Web Designers
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Shorthand notation for faster writing - Vue.js Tutorial
From the course: Vue.js 2 for Web Designers
Shorthand notation for faster writing
- [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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Installing Vue on an existing site2m 33s
-
Creating an instance from the mock-up3m 30s
-
Identifying components and data2m 54s
-
Adding data to our component3m 52s
-
Using a model to begin interactivity3m 24s
-
Using v-bind to update classes3m 34s
-
Simple templates with computed properties2m 51s
-
Listen for an event with v-on4m 3s
-
Shorthand notation for faster writing1m 44s
-
Challenge: Activate the color selector1m 9s
-
Solution: Activate the color selector2m 4s
-
-
-
-