Getting Started
- Hello World
- Introduction to Vue.js
- Setting up a local development environment (the easy way)
- Course structure
- Guidelines for the course Q&A
Fundamentals of Vue.js
- Introduction to this section
- Working with templates
- Methods
- A word about ES6 arrow functions
- Introduction to directives
- Exercises: String interpolation, methods and directives
- Using expressions with directives
- Introduction to events
- Passing arguments to event listeners
- Directive & event modifiers
- Key modifiers
- Modifier keys
- Exercises: Events & modifiers
- Two-way data binding
- Security: Outputting and escaping HTML
- Rendering elements only once
- Conditionally rendering elements
- Showing and hiding elements
- Hiding elements until the Vue instance is ready
- Looping through arrays
- Accessing the loop index
- Looping through object properties
- Looping through number ranges
- Understanding the v-for update strategy
- Array change detection
- Exercises: Two-way data binding, conditionals, and loops
- Optimizing performance with computed properties
- Adding getters & setters to computed properties
- Watchers
- Exercises: Computed properties & watchers
- Filters
- Exercises: Filters
- Styling with inline CSS styles
- Styling with CSS classes
- Exercises: Styling with inline styles and classes
- Shorthands for events and bindings
Example application #1: E-commerce
- Introduction to the application
- Full source code available within GitHub repository
- Displaying products
- Adding products to the cart
- Displaying the cart info in the menu
- Switching between views
- Displaying the cart
- Handling adding products already in cart
- Increasing and decreasing product quantities
- Checking out
- Wrap up
Deep dive: The Vue Instance
- Introduction to this section
- Accessing a Vue instance outside of its declaration
- Using multiple Vue instances on the same page
- Proxying
- Understanding reactivity
- Asynchronous update queue
- Understanding the Virtual DOM
- Adding watchers dynamically
- Accessing the DOM with $refs
- Mounting templates dynamically
- Using inline templates
- Destroying a Vue instance
- Vue instance lifecycle & hooks
- Using lifecycle hooks
Setting up a Development Environment with Webpack & Vue CLI
- Introduction to this section
- Installing Chrome developer tools extension
- Introduction to Vue CLI
- Creating a project with Vue CLI
- Understanding the project structure
- Single file components
- Building for production
Components
- Introduction to components
- Why the data property must be a function
- Global & Local Components
- Component naming conventions
- Creating a component in the project
- Exercises: Global, local and child components
- Organizing components
- Global & scoped styles
- Passing data to components
- Validating passed data
- Working with events
- Communicating through an event bus
- Exercises: Passing data & events
- Slots
- Named slots
- Dynamic components
- Keeping dynamic components alive
- Dynamic components lifecycle hooks
- Vue developer tool in action
Example application #2: Mail application
- Introduction to the application
