Learn about tying together the complete app with single-file components.
- Now we'll finish up our single file component app…and get our product list page running again…but with an enhanced workflow and development environment.…Continuing from where we left off in the last video,…let's grab the product list component from the old page…and we'll create a new file called product list dot view…in the source folder here.…Again we'll create a template element…and a script element…where I'll just temporarily paste this,…and then I'll cut out the string template…and paste it up here,…and also remove those unnecessary backslashes.…
So in script, we want to export a component object.…That can be used to register…this component in any other script.…So we'll give it the name property…and we'll take props and methods from the old version,…and if I want, again, I can convert this…to an ES6 method definition, like so.…Let's remove this old code so we don't get any errors,…and now product list also has to import and register…product list item so that it can use it.…
So first we'll import this from this path,…
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