Learn how to define components for code reuse and include them in templates.
- [Instructor] In this video, we'll discuss components,…one of the most powerful features of Vue,…which provide a simple way…to encapsulate data and behavior,…making them easily reusable.…Let's look at Components.html,…which you can find in the exercise files…in the Chapter 3, Video One Start folder.…Here we see an almost completely bare…Vue-enabled skeleton of a page,…and a little bit of CSS…just to make out components easier to see.…Now the way we add a custom component to a page…is by adding an element to our template…with a custom tag name that we register and define.…
A component can be global,…available for any Vue instance you might have on this page,…or local, so first we'll look at an example…of a global component.…And you'll see this convention…of lowercase names with hyphens a lot,…because that's actually part of the W3 spec,…which does mention having at least one hyphen.…Vue doesn't require that,…but it's a good practice to follow.…Now we still haven't told…what we want Vue to do with this yet.…We can have it replace this tag at runtime…
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