Learn about converting a globally registered component into a single-file component.
- [Instructor] In this video, we'll start converting…our H+ Sport product page into one that contains…a Vue app with single file components.…Before we get started copying the code over…and setting up the component files,…let me just show you one example of how all of this setup,…which might seem overly complicated at times, can actually…speed up your development workflow tremendously.…If we open up the developer tools,…you can see a message in the console indicating…that Hot Module Replacement is enabled.…
In our App.vue file, in the source folder, we have a message…in data that you can see rendered on the page.…With these windows side by side, if I just add some…exclamation points to the end of this message,…watch what happens on the page and in the console…without me having to do anything…except type those characters.…Of course, this is also thanks to…auto save being turned on in Cloud9.…This is a really powerful feature that's going to keep things…flowing really smoothly as it doesn't even have to reload…
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