It seems that every week there's a new JavaScript framework that someone has created. Some fall out of favor, while others build momentum and a loyal community. Undeniably, Vue.js has taken the latter path. Although there could be many reasons for this, one big factor is simplicity. You can get started and use as many or as few features as you need. It's also lightweight and doesn't need as much formality as other frameworks do. In fact, you can get started by adding one line of code to your HTML page.
In this Vue.js course, you’ll build a simple web application using many of the fundamental features of the framework. You'll also get to work with a more complex application to experience features beyond basic syntax. This app will show you how mature teams implement best practices so they can create scalable and robust web applications.
This course is for developers and teams who want an introduction to Vue.js that will leave them feeling capable in just a few days.
- Upcoming Dates and Locations
-
Guaranteed To Run
- Course Outline
-
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.
- 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
- Why Vue.js?
Exercise: Set up a basic Vue web app
- 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.
- Add functionality with methods
- Create and call methods and functions
- Provide arguments
- Apply filters
Exercise: Display your input as text
- Handle user events
- Types of events
- Event modifiers
- Key modifiers
Exercise: Use one-click events to check off items on the to-do list
- 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
- 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
- Style your application
- Class bindings
- Style bindings
- Conditional style
Exercise: Add conditional style to your list based on events
- 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.
- Leverage Node.js, NPM, and Webpack
- Learn the benefits of these tools
Exercise: Install and run the sample application
- Use the Vue.js Lifecycle
- Review lifecycle terms like “mounted” and “updated”
Exercise: Invoke functionality at the right time
- Communicate between components by emitting events
Exercise: Change data communication from property-based to event-based
- Manage environment properties
- Route your customers with Vue Router
- Maintain state with Vuex
Exercise: Change data communication between components from property-based to state-based
- Debugging with Vue Dev Tools
- Debugging your sample application
- Use Vue Dev Tools to learn how others have put together their applications
- 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
- Run apps using Vue CLI
- Get an application up and running quickly
- Use plugins for adding features
- Start with the basics
- Who should attend
-
This Vue.js course is perfect for anyone looking to access the full potential of the JavaScript framework by learning both the fundamental features and advanced applications. Some roles that would find this course beneficial include:
- JavaScript Developers
- Web Developers
- WordPress Developers
- Front-end Developers
- UI/UX Designers