Introduction to directives | Coding Explained

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Vue.js: From Beginner to Professional

Getting Started

Hello World (Vue instance & string interpolation) (6:41)
Introduction to Vue.js (2:27)
Setting up a local development environment (the easy way) (3:12)
Course structure (1:13)

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

Introduction to this section (0:59)
Installing Chrome developer tools extension (1:30)
Introduction to Vue CLI (2:26)
Creating a project with Vue CLI (4:43)
Understanding the project structure (8:14)
Single file components (1:43)
Building for production (1:19)

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

Introduction to mixins (2:17)
Using mixins (2:51)
How mixins are merged in (7:07)
Global mixins (2:43)
Global filters (2:34)

Forms

Text inputs & textareas (4:58)
Checkboxes (6:23)
Radio buttons (2:01)
Selects (dropdowns) (2:05)
Modifiers (2:59)
How the v-model directive works (1:47)
Adding default values (4:04)
Submitting forms (2:48)

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

Wrap up (1:14)

Teach online with

Introduction to directives

Link to the JSFiddle

Complete and Continue

Discussion

0 comments