Learn about nesting components and passing messages to parents with events.
- [Instructor] In this video, we'll start to see…some of the real power of components,…which comes from composability,…or the way in which we can include a component…in the template of another component.…We'll also take a look at a technique…for swapping a component with another…similar component at run time.…Continuing from the previous example,…we might decide for example,…to refactor this template,…and create a new child component out of everything…inside the list item element here.…To do that, we could copy this and use it…to create a new component called 'product-list-item'.…
It's template can be more or less the same…as what we just copied,…except we don't need the v-for anymore,…since an instance of this component…represents a single item, and not the whole list.…This component also needs to be supplied…with ['product'] singular as a prop.…And it looks like I just have an extra set…of curly braces there.…Now, in place of the markup we just moved…to the new component,…we simply insert product-list-item,…which we can use with the v-for directive,…
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