Learn about displaying default content and interleaving child content in components.
- [Instructor] Next we'll talk about how to add…additional content to a component…in the form of child elements inserted…between the component's start and end tags.…I'm looking at products-slots.html…starting on line 114.…And this is in the chapter three video four…exercise files in the start folder.…We've seen these components before,…just the product list and its child component,…the product list item.…Up here, if I were to add some inner HTML to this component,…you might wonder if it would be rendered…or if it will just be ignored or removed.…
So if we open up the Vue Dev tools…and select the product list…and then over here, click Inspect DOM,…which of course you can do without this extension,…then you see that this product list,…it just has a level two header…and an unordered list.…So that content that we added here…as been hoisted out.…However, this could be a valid addition…to our template if we just tell this component…what to do with any child elements.…And the way to do that…is to add what we call a slot for it…
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