Getting Started
Fundamentals of Vue.js
-
Introduction to this section (0:50)
-
Working with templates (4:19)
-
Methods (7:03)
-
A word about ES6 arrow functions (2:18)
-
Introduction to directives (4:38)
-
Exercises: String interpolation, methods and directives (7:05)
-
Using expressions with directives (1:54)
-
Introduction to events (2:09)
-
Passing arguments to event listeners (4:02)
-
Directive & event modifiers (5:15)
-
Key modifiers (3:57)
-
Modifier keys (4:17)
-
Exercises: Events & modifiers (8:39)
-
Two-way data binding (7:32)
-
Security: Outputting and escaping HTML (3:42)
-
Rendering elements only once (1:31)
-
Conditionally rendering elements (6:56)
-
Showing and hiding elements (2:09)
-
Hiding elements until the Vue instance is ready (4:23)
-
Looping through arrays (6:31)
-
Accessing the loop index (1:33)
-
Looping through object properties (3:17)
-
Looping through number ranges (2:01)
-
Understanding the v-for update strategy (6:16)
-
Array change detection (4:33)
-
Exercises: Two-way data binding, conditionals, and loops (4:21)
-
Optimizing performance with computed properties (6:54)
-
Adding getters & setters to computed properties (4:58)
-
Watchers (9:14)
-
Exercises: Computed properties & watchers (6:39)
-
Filters (6:39)
-
Exercises: Filters (5:44)
-
Styling with inline CSS styles (10:11)
-
Styling with CSS classes (10:20)
-
Exercises: Styling with inline styles and classes (6:38)
-
Shorthands for events and bindings (3:19)
Example application #1: E-commerce
-
Introduction to the application (3:19)
-
Displaying products (6:09)
-
Adding products to the cart (2:48)
-
Displaying cart info in the menu (4:43)
-
Switching between views (4:26)
-
Displaying the cart (5:29)
-
Handling adding products already in cart (4:35)
-
Increasing and decreasing product quantities (6:48)
-
Checking out (3:07)
-
Wrap up (2:41)
Deep dive: The Vue Instance
-
Introduction to this section (0:55)
-
Accessing a Vue instance outside of its declaration (2:26)
-
Using multiple Vue instances on the same page (2:58)
-
Proxying (6:56)
-
Understanding reactivity (6:40)
-
Asynchronous update queue (5:22)
-
Understanding the Virtual DOM (4:28)
-
Adding watchers dynamically (8:28)
-
Accessing the DOM with $refs (7:49)
-
Mounting templates dynamically (3:14)
-
Using inline templates (5:41)
-
Destroying a Vue instance (1:40)
-
Vue instance lifecycle & hooks (4:13)
-
Using lifecycle hooks (11:34)
Setting up a Development Environment with Webpack & Vue CLI
Components
-
Introduction to components (6:16)
-
Why the data property must be a function (3:39)
-
Global & Local Components (3:44)
-
Component naming conventions (2:07)
-
Creating a component in the project (4:21)
-
Exercises: Global, local and child components (8:54)
-
Organizing components (2:04)
-
Global & scoped styles (4:41)
-
Passing data to components (4:46)
-
Validating passed data (3:13)
-
Working with events (7:08)
-
Communicating through an event bus (4:43)
-
Exercises: Passing data & events (9:05)
-
Slots (3:44)
-
Named slots (3:16)
-
Dynamic components (4:49)
-
Keeping dynamic components alive (1:41)
-
Dynamic components lifecycle hooks (2:19)
-
Vue developer tool in action (2:04)
Example application #2: Mail application
-
Introduction to the application (3:30)
-
Creating components for the views (3:21)
-
Adding the sidebar markup (2:26)
-
Switching between views (13:50)
-
Loading messages from file (1:50)
-
Adding numbers to navigation menu (5:41)
-
Displaying the inbox (11:32)
-
Marking messages as important (3:02)
-
Displaying sent, important and trashed messages (3:09)
-
Displaying a message (6:40)
-
Automatically marking messages as read (1:39)
-
Navigating back to previous view (5:21)
-
Deleting messages (2:37)
-
Marking messages as read or unread (3:54)
-
Refreshing the inbox (4:49)
-
Sending messages (6:53)
-
Wrap up (1:01)
Mixins & Filters
Forms
Animations & Transitions
-
Introduction to transitions and animations (3:29)
-
Understanding single element transitions (1:52)
-
Transitioning with CSS classes (4:20)
-
Implementing our first transition (7:58)
-
Specifying transition names (2:37)
-
Specifying custom transition classes (5:48)
-
Implementing a custom CSS animation (4:27)
-
Mixing transitions and animations (4:05)
-
Transitioning between elements (3:01)
-
Transition modes (2:08)
-
Transitioning elements initially (on page load) (1:51)
-
Transitioning with JavaScript hooks (6:12)
-
Ignoring CSS classes (2:38)
-
Transitioning dynamic components (2:58)
-
Transitioning multiple elements (5:21)
-
Transitioning moving elements (5:36)
Routing (SPA)
-
Introduction to Single Page Applications (SPA) (3:31)
-
Installing vue-router (1:00)
-
Enabling the router (1:13)
-
Registering routes (3:44)
-
Rendering routed components (2:04)
-
Changing the router mode (4:53)
-
Catch-all route (2:06)
-
Moving routes to file (2:17)
-
Adding navigation links (3:52)
-
Styling the active link (6:23)
-
Dynamic route matching (3:52)
-
Linking to dynamic routes (3:16)
-
Named routes (3:03)
-
Retrieving route parameters (2:44)
-
Using route props (3:07)
-
Reacting to parameter changes (3:51)
-
Navigating programmatically (5:32)
-
Navigating in the browser’s history stack (3:14)
-
Redirecting (3:59)
-
Aliases (2:10)
-
Nested routes (13:09)
-
Query parameters (8:22)
-
Hash fragment (3:06)
-
Controlling the scroll behavior (6:05)
-
Named views (6:41)
-
Route transitions (3:39)
-
Route guards (7:43)
-
Component guards (8:49)
-
Global guards & meta fields (6:27)
-
Reacting to navigations (1:50)
Connecting to Servers through HTTP
-
Introduction to using HTTP in Vue (1:55)
-
Setting up vue-resource (3:10)
-
Fetching data with GET requests (7:03)
-
URI templates (6:23)
-
POST requests (2:46)
-
Using resources (6:29)
-
Custom resource actions (4:15)
-
Global configuration (5:53)
-
Configuration within components (1:59)
-
Interceptors (5:02)
-
Wrap up (0:51)
Vuex
-
Introduction to Vuex (1:56)
-
Why Vuex is needed (4:22)
-
Installing Vuex (1:43)
-
Setting up a simple store (1:59)
-
Accessing a store’s state (2:23)
-
Changing state (9:04)
-
Introduction to getters (2:26)
-
Implementing a getter (4:08)
-
Accessing other getters (2:42)
-
Passing arguments to getters (3:03)
-
Mapping getters to computed properties (5:48)
-
Introduction to mutations (2:16)
-
Implementing a mutation (3:32)
-
Committing mutations with payloads (8:04)
-
Mapping mutations to methods (2:20)
-
Using constants for mutation types (5:47)
-
Mutations must be synchronous (2:16)
-
Introduction to actions (2:17)
-
Implementing an action (5:12)
-
Destructuring the context argument (1:28)
-
Accessing getters within actions (9:55)
-
Using promises with actions (3:37)
-
Mapping actions to methods (4:10)
-
Two-way data binding (4:38)
-
Introduction to modules (3:15)
-
Implementing modules (5:52)
-
Accessing root state from getters (3:19)
-
Accessing root state from actions (2:43)
-
Adding mutations to modules (3:12)
-
Introduction to namespaces (1:56)
-
Adding namespaces (1:08)
-
Accessing namespaced types with helpers (3:53)
-
Accessing root getters from namespaced modules (4:45)
-
Dispatching root actions and committing root mutations (3:24)
-
Integration with developer tools (3:26)
-
Should you use Vuex? (1:11)
Conclusion
