Registering and using components

- [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…

Resume Transcript Auto-Scroll

Author

Released

3/22/2017

Have you found a primary JavaScript framework or library that suits your needs? If not, you might want to explore Vue.js, which offers a progressive approach to solving front-end problems. Vue is a sensible alternative to some of the more complex JavaScript frameworks, because it allows developers to add simple data binding to their views, but also incrementally progress to a full-blown single-page application if needed.

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.

Skills covered in this course

Course Retiring Soon

Learning Vue.js (2017) will be retired from the lynda.com library on January 18th, 2019. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion. For updated training, check out Learning Vue.js in the lynda.com Online Training Library.

Continue Assessment

You started this assessment previously and didn't complete it. You can pick up where you left off, or start over.

Start My Free Month

Start your free month on LinkedIn Learning, which now features 100% of Lynda.com courses. Develop in-demand skills with access to thousands of expert-led courses on business, tech and creative topics.