Learn about passing data to components with props.
- [Narrator] In this video, we'll find out…how to make components more powerful…by allowing the parent view instance…to provide initial properties, or props,…to each component instance.…This time we're going to start in products.html…on line 114, this is part of our H+ Sports site…and this file is in the exercise files…in the Chapter 3, Video 2 start folder.…I'm going to create a new custom component…to display the products that we fetched from the API.…Or custom tag name will be product-list…and remember in the template we need…a single root element, we'll make it a div…and we'll also give it a class…of the same name as the component…so that this CSS that I've added down here…will be applied and that's just to help…with positioning mostly.…
Remember a backslash at the end of each line…if you want to split the template up into multiple lines.…Then we'll add a dynamic title…and you'll find out where this comes from in just a moment.…Let's close the root dive now and see…if we can get at least this much working…and figure out where title is going to come from.…
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