Vue.js 2: Building an Interface
1h 47mIntermediate2019-08-15
Authors
Ray Villalobos
Senior Staff Instructor at LinkedIn Learning
Course details
The perfect way to learn Vue.js is to use Vue.js. Once you build an app interface and see its strengths and flexibility in action, you can decide how much of Vue.js you want to use in your own projects. This hands-on course teaches you how to build a simple component-based app: an appointment booking and management system with features for searching and sorting. Along the way, Ray Villalobos shows how to use Vue.js components and subcomponents; build forms; create, update, and delete data; and manage events. By the end of the course, you'll have a functional app prototype and more skills with this flexible framework. Take the related courses in Angular, React, and jQuery to see how to build the same project in multiple frameworks and choose the one that’s right for you.
Learning objectives
Why use Vue.js
Installing custom modules
Loading modules
Importing and looping through data
Using props, methods, and events
Indexing, editing, adding, and deleting records
Searching and filtering
Learning objectives
Why use Vue.js
Installing custom modules
Loading modules
Importing and looping through data
Using props, methods, and events
Indexing, editing, adding, and deleting records
Searching and filtering
Skills covered
Vue.jsInteraction DesignJavaScript FrameworksUser ExperienceWeb DevelopmentOpen SourceDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - How Vue.js is different
- 02 - Using the exercises for this course
1. Getting Started
- 03 - Installing projects using the Vue CLI
- 04 - Understanding Vue CLI installations
- 05 - Installing custom modules
2. Working with Modules and Data
- 06 - Cleaning up and loading a module
- 07 - Importing Font Awesome icons
- 08 - Looping through data with directives
- 09 - Using Axios to import data
3. Props, Methods, and Events
- 10 - Using props in subcomponents
- 11 - Adding a Bootstrap template
- 12 - Using Moment.js for dates
- 13 - Deleting records
4. Indexing, Editing, and Adding Records
- 14 - Creating an index
- 15 - Editing records
- 16 - Adding records templates
- 17 - Managing form data with V-model
- 18 - Adding records to your data
5. Searching and Filtering
- 19 - Creating a search component template
- 20 - Building search methods
- 21 - Filtering lists
- 22 - Updating your drop-down template
- 23 - Finishing your application
Conclusion
- 24 - Next steps