Part 1: Your First Vue.js App

For the first section of training, we'll build a simple to-do application using commonly used Vue.js features. We'll switch between lectured instruction and hands-on coding to implement the functionality. This will give you practice adding common functionality and give you confidence in exploring further topics.

1. Start with the basics
   • Why Vue.js?
     • What are the benefits?
     • A comparison to other JS frameworks
     • Meet the community
   • A review of the different ways a Vue app can be started
     • Adding Vue.js library
     • Using a build tool
   • Learn about the development vs. production version
   • Create an instance of Vue

Exercise: Set up a basic Vue web app

2. Add data to your to-do application
   • Learn about the data object
   • Mustache syntax: use this simple syntax to display data
   • One-way vs. two-way binding
   • Directives: step up your game with these v-attributes
     • Built-in
     • Custom
     • Arguments
     • Modifiers
   • Forms and user input
     • Model directive: use this directive to create two-way data bindings
     • Add validation

Exercise: Create an outline of your to-do app and add an input field.

3. Add functionality with methods
   • Create and call methods and functions
   • Provide arguments
   • Apply filters

Exercise: Display your input as text

4. Handle user events
   • Types of events
   • Event modifiers
   • Key modifiers

Exercise: Use one-click events to check off items on the to-do list

5. Combine data and functions
   • Use templates to separate concerns
   • Create loops
   • Render lists
   • Display using conditionals
   • Inject content using slots

Exercise: Enhance your to-do list with loops and conditionals

6. Modularize your code with components
   • Find out what components can do for you
   • Learn about component scope
   • Use properties to share data between components

Exercise: Refactor your app to create components

7. Style your application
   • Class bindings
   • Style bindings
   • Conditional style

Exercise: Add conditional style to your list based on events

8. Unit test your Vue.js application
   • Make your code testable
   • Review tools like Karma and Mocha

Exercise: Write basic tests that confirm functionality 

Part 2: Real-World Applications

For the second part of training, we'll identify what large-scale applications do to get the most out of Vue.js. We'll be looking at an application that has some of these features already. Then we'll add new features injected at the right time using the Vue.js Lifecycle. And we'll investigate uses for Vuex and Vue Router. We'll also discuss best practices that companies use to make sure their application is maintainable and has proper test coverage. To top it off, we'll learn how to debug our applications using Vue Dev Tools.

1. Leverage Node.js, NPM, and Webpack
   • Learn the benefits of these tools

Exercise: Install and run the sample application

2. Use the Vue.js Lifecycle
   • Review lifecycle terms like “mounted” and “updated”

Exercise: Invoke functionality at the right time

3. Communicate between components by emitting events

Exercise: Change data communication from property-based to event-based

4. Manage environment properties
5. Route your customers with Vue Router
6. Maintain state with Vuex

Exercise: Change data communication between components from property-based to state-based

7. Debugging with Vue Dev Tools
   • Debugging your sample application
   • Use Vue Dev Tools to learn how others have put together their applications
8. Learn Vue.js Best Practices
   • Structure your Vue app like the pros
   • Keep code modular
   • Separate display and business logic
   • Get ready to deploy to production
9. Run apps using Vue CLI
   • Get an application up and running quickly
   • Use plugins for adding features