Learn about syntax for binding to the class attribute to add class names dynamically.
- [Instructor] In this video, we'll look at several…different ways that you can bind to the class attribute.…So let's take a look at class.html…in the Chapter 1, video 8 exercise files start folder.…As you can see, I haven't done anything in here…aside from setting up a view-enabled shell…and a few basic CSS classes.…When binding to the class attribute,…we can use vbind class, or the shortcut :class,…and give it an object containing class names as keys…with boolean values indicating whether or not…we wish to apply that class.…
So I'll use the square class,…but generally we won't use just true or false,…but something that might change.…For example, in data if we had a cold property,…and a hot property, with those values,…we could say that we only want to apply the blue class…if cold is true,…and we only want to apply the red class if hot is true.…So now we see a blue square.…
By the way, there's no reason that you can't include…a static class attribute, as well as a bound class attribute…so it's perfectly fine to just move square…
In this course, Michael Sullivan introduces the Vue framework, explains which problems it aims to solve, and shows how to add Vue to a new or existing webpage. Michael examines a Vue instance and its lifecycle, and shows simple and advanced data binding techniques along with how to manage CSS related attributes dynamically and handle user input and events. After he covers the key concepts and basic conventions of Vue, Michael dives into its component system, which can help you create modular, reusable code, and shows how to use the vue-router plugin to set up a single-page application with client-side routing.
- Creating a Vue app
- Applying control logic
- Binding to the style attribute and class attribute
- Reviewing the features of a Vue instance
- Registering and using Vue components
- Installing vue-cli and webpack
- Understanding the Vue app skeleton