Learn Vue JS, and become a VueJS professional. Build complex SPAs with Vue.js, a simple and popular JavaScript framework
What you’ll learn
- How to build advanced Vue.js applications
-
How to build single page applications (SPA)
-
Understand the theory and how Vue works under the hood
- How to manage state in large applications with Vuex
- Communicating with servers with HTTP
- Use modern tools for developing and building applications (e.g. webpack)
Course Curriculum
Getting Started | |||
Hello World | 00:00:00 | ||
Introduction to Vue.js | 00:00:00 | ||
Setting up a local development environment (the easy way) | 00:00:00 | ||
Course structure | 00:00:00 | ||
Fundamentals of Vue.js | |||
Introduction to this section | 00:00:00 | ||
Working with templates | 00:00:00 | ||
Methods | 00:00:00 | ||
A word about ES6 arrow functions | 00:00:00 | ||
Introduction to directives | 00:00:00 | ||
Exercises: String interpolation, methods and directives | 00:00:00 | ||
Using expressions with directives | 00:00:00 | ||
Introduction to events | 00:00:00 | ||
Passing arguments to event listeners | 00:00:00 | ||
Directive & event modifiers | 00:00:00 | ||
Key modifiers | 00:00:00 | ||
Modifier keys | 00:00:00 | ||
Exercises: Events & modifiers | 00:00:00 | ||
Two-way data binding | 00:00:00 | ||
Security: Outputting and escaping HTML | 00:00:00 | ||
Rendering elements only once | 00:00:00 | ||
Conditionally rendering elements | 00:00:00 | ||
Showing and hiding elements | 00:00:00 | ||
Hiding elements until the Vue instance is ready | 00:00:00 | ||
Looping through arrays | 00:00:00 | ||
Accessing the loop index | 00:00:00 | ||
Looping through object properties | 00:00:00 | ||
Looping through number ranges | 00:00:00 | ||
Understanding the v-for update strategy | 00:00:00 | ||
Array change detection | 00:00:00 | ||
Exercises: Two-way data binding, conditionals, and loops | 00:00:00 | ||
Optimizing performance with computed properties | 00:00:00 | ||
Adding getters & setters to computed properties | 00:00:00 | ||
Watchers | 00:00:00 | ||
Exercises: Computed properties & watchers | 00:00:00 | ||
Filters | 00:00:00 | ||
Exercises: Filters | 00:00:00 | ||
Styling with inline CSS styles | 00:00:00 | ||
Styling with CSS classes | 00:00:00 | ||
Exercises: Styling with inline styles and classes | 00:00:00 | ||
Shorthands for events and bindings | 00:00:00 | ||
Example application #1: E-commerce | |||
Introduction to the application | 00:00:00 | ||
Full source code available within GitHub repository | 00:00:00 | ||
Displaying products | 00:00:00 | ||
Adding products to the cart | 00:00:00 | ||
Displaying the cart info in the menu | 00:00:00 | ||
Switching between views | 00:00:00 | ||
Displaying the cart | 00:00:00 | ||
Handling adding products already in cart | 00:00:00 | ||
Increasing and decreasing product quantities | 00:00:00 | ||
Checking out | 00:00:00 | ||
Wrap up | 00:00:00 | ||
Deep dive: The Vue Instance | |||
Introduction to this section | 00:00:00 | ||
Accessing a Vue instance outside of its declaration | 00:00:00 | ||
Using multiple Vue instances on the same page | 00:00:00 | ||
Proxying | 00:00:00 | ||
Understanding reactivity | 00:00:00 | ||
Asynchronous update queue | 00:00:00 | ||
Understanding the Virtual DOM | 00:00:00 | ||
Adding watchers dynamically | 00:00:00 | ||
Accessing the DOM with $refs | 00:00:00 | ||
Mounting templates dynamically | 00:00:00 | ||
Using inline templates | 00:00:00 | ||
Destroying a Vue instance | 00:00:00 | ||
Vue instance lifecycle & hooks | 00:00:00 | ||
Using lifecycle hooks | 00:00:00 | ||
Setting up a Development Environment with Webpack & Vue CLI | |||
Introduction to this section | 00:00:00 | ||
Installing Chrome developer tools extension | 00:00:00 | ||
Introduction to Vue CLI | 00:00:00 | ||
Creating a project with Vue CLI | 00:00:00 | ||
Understanding the project structure | 00:00:00 | ||
Single file components | 00:00:00 | ||
Building for production | 00:00:00 | ||
Components | |||
Introduction to components | 00:00:00 | ||
Why the data property must be a function | 00:00:00 | ||
Global & Local Components | 00:00:00 | ||
Component naming conventions | 00:00:00 | ||
Creating a component in the project | 00:00:00 | ||
Exercises: Global, local and child components | 00:00:00 | ||
Organizing components | 00:00:00 | ||
Global & scoped styles | 00:00:00 | ||
Passing data to components | 00:00:00 | ||
Validating passed data | 00:00:00 | ||
Working with events | 00:00:00 | ||
Communicating through an event bus | 00:00:00 | ||
Exercises: Passing data & events | 00:00:00 | ||
Slots | 00:00:00 | ||
Named slots | 00:00:00 | ||
Dynamic components | 00:00:00 | ||
Keeping dynamic components alive | 00:00:00 | ||
Dynamic components lifecycle hooks | 00:00:00 | ||
Vue developer tool in action | 00:00:00 | ||
Example application #2: Mail application | |||
Introduction to the application | 00:00:00 | ||
Full source code available within GitHub repository | 00:00:00 | ||
Creating components for the views | 00:00:00 | ||
Adding the sidebar markup | 00:00:00 | ||
Switching between views | 00:00:00 | ||
Loading messages from file | 00:00:00 | ||
Adding numbers to navigation menu | 00:00:00 | ||
Displaying the inbox | 00:00:00 | ||
Marking messages as important | 00:00:00 | ||
Displaying sent, important and trashed messages | 00:00:00 | ||
Displaying a message | 00:00:00 | ||
Automatically marking messages as read | 00:00:00 | ||
Navigating back to previous views | 00:00:00 | ||
Deleting messages | 00:00:00 | ||
Marking messages as read or unread | 00:00:00 | ||
Refreshing the inbox | 00:00:00 | ||
Sending messages | 00:00:00 | ||
Wrap up | 00:00:00 | ||
Mixins & Filters | |||
Introduction to mixins | 00:00:00 | ||
Using mixins | 00:00:00 | ||
How mixins are merged in | 00:00:00 | ||
Global mixins | 00:00:00 | ||
Global filters | 00:00:00 | ||
Forms | |||
Full source code available within GitHub repository | 00:00:00 | ||
Text inputs & textareas | 00:00:00 | ||
Checkboxes | 00:00:00 | ||
Radio buttons | 00:00:00 | ||
Selects (dropdowns) | 00:00:00 | ||
Modifiers | 00:00:00 | ||
How the v-model directive works | 00:00:00 | ||
Adding default values | 00:00:00 | ||
Submitting forms | 00:00:00 | ||
Animations & Transitions | |||
Introduction to transitions and animations | 00:00:00 | ||
Understanding single element transitions | 00:00:00 | ||
Transitioning with CSS classes | 00:00:00 | ||
Implementing our first transition | 00:00:00 | ||
Specifying transition names | 00:00:00 | ||
Specifying custom transition classes | 00:00:00 | ||
Implementing a custom CSS animation | 00:00:00 | ||
Mixing transitions and animations | 00:00:00 | ||
Transitioning between elements | 00:00:00 | ||
Transition modes | 00:00:00 | ||
Transitioning elements initially (on page load) | 00:00:00 | ||
Transitioning with JavaScript hooks | 00:00:00 | ||
Ignoring CSS classes | 00:00:00 | ||
Transitioning dynamic components | 00:00:00 | ||
Transitioning multiple elements | 00:00:00 | ||
Transitioning moving elements | 00:00:00 | ||
Routing (SPA) | |||
Full source code available within GitHub repository | 00:00:00 | ||
Introduction to Single Page Applications (SPA) | 00:00:00 | ||
Installing vue-router | 00:00:00 | ||
Enabling the router | 00:00:00 | ||
Registering routes | 00:00:00 | ||
Rendering routed components | 00:00:00 | ||
Changing the router mode | 00:00:00 | ||
Catch-all route | 00:00:00 | ||
Moving routes to file | 00:00:00 | ||
Adding navigation links | 00:00:00 | ||
Styling the active link | 00:00:00 | ||
Dynamic route matching | 00:00:00 | ||
Linking to dynamic routes | 00:00:00 | ||
Named routes | 00:00:00 | ||
Retrieving route parameters | 00:00:00 | ||
Using route props | 00:00:00 | ||
Reacting to parameter changes | 00:00:00 | ||
Navigating programmatically | 00:00:00 | ||
Navigating in the browser’s history stack | 00:00:00 | ||
Redirecting | 00:00:00 | ||
Aliases | 00:00:00 | ||
Nested routes | 00:00:00 | ||
Query parameters | 00:00:00 | ||
Hash fragment | 00:00:00 | ||
Controlling the scroll behavior | 00:00:00 | ||
Named views | 00:00:00 | ||
Route transitions | 00:00:00 | ||
Route guards | 00:00:00 | ||
Component guards | 00:00:00 | ||
Global guards & meta fields | 00:00:00 | ||
Reacting to navigations | 00:00:00 | ||
Connecting to Servers through HTTP | |||
Full source code available within GitHub repository | 00:00:00 | ||
Introduction to using HTTP in Vue | 00:00:00 | ||
Setting up vue-resource | 00:00:00 | ||
Fetching data with GET requests | 00:00:00 | ||
URI templates | 00:00:00 | ||
POST requests | 00:00:00 | ||
Using resources | 00:00:00 | ||
Custom resource actions | 00:00:00 | ||
Global configuration | 00:00:00 | ||
Configuration within components | 00:00:00 | ||
Interceptors | 00:00:00 | ||
Wrap up | 00:00:00 | ||
Vuex | |||
Introduction to Vuex | 00:00:00 | ||
Why Vuex is needed | 00:00:00 | ||
Installing Vuex | 00:00:00 | ||
Setting up a simple store | 00:00:00 | ||
Accessing a store’s state | 00:00:00 | ||
Changing state | 00:00:00 | ||
Introduction to getters | 00:00:00 | ||
Implementing a getter | 00:00:00 | ||
Accessing other getters | 00:00:00 | ||
Passing arguments to getters | 00:00:00 | ||
Mapping getters to computed properties | 00:00:00 | ||
Introduction to mutations | 00:00:00 | ||
Implementing a mutation | 00:00:00 | ||
Committing mutations with payloads | 00:00:00 | ||
Mapping mutations to methods | 00:00:00 | ||
Using constants for mutation types | 00:00:00 | ||
Mutations must be synchronous | 00:00:00 | ||
Introduction to actions | 00:00:00 | ||
Implementing an action | 00:00:00 | ||
Destructuring the context argument | 00:00:00 | ||
Accessing getters within actions | 00:00:00 | ||
Using promises with actions | 00:00:00 | ||
Mapping actions to methods | 00:00:00 | ||
Two-way data binding | 00:00:00 | ||
Introduction to modules | 00:00:00 | ||
Implementing modules | 00:00:00 | ||
Accessing root state from getters | 00:00:00 | ||
Accessing root state from actions | 00:00:00 | ||
Adding mutations to modules | 00:00:00 | ||
Introduction to namespaces | 00:00:00 | ||
Adding namespaces | 00:00:00 | ||
Accessing namespaced types with helpers | 00:00:00 | ||
Accessing root getters from namespaced modules | 00:00:00 | ||
Dispatching root actions and committing root mutations | 00:00:00 | ||
Integration with developer tools | 00:00:00 | ||
Should you use Vuex? | 00:00:00 | ||
Conclusion | |||
Wrap up | 00:00:00 | ||
Bonus Lecture: Discounts to my other courses | 00:00:00 |
Course Reviews
No Reviews found for this course.
7 STUDENTS ENROLLED