Browse Library
Advanced Search
Browse Library
Advanced Search
Sign In
Start Free Trial
The Ultimate Vue JS 2 Developers Course [Video]
By :
Anthony Gore
Buy this Video
The Ultimate Vue JS 2 Developers Course [Video]
By:
Anthony Gore
Buy this Video
Overview of this book
This Course contains all Vue concepts from beginner to advanced, way to create a universal application with server-side rendering and uses popular plugins from the Vue ecosystem like vue-router and vue-resources.
Related Content you might be interested in
Current Title:
The Ultimate Vue JS 2 Developers Course [Video]
Anthony Gore
Jul, 2017
|
13 hours 1 minutes
No titles found
Table of Contents (
30
chapters)
Free Chapter
1
Introduction
Course introduction
2
Project 1 - Overview and setup
Demo of the finished product
Register for the Imgur API
Reviewing the Vue.js Poster Store Github repo
Clone repo, install dependencies and setup environment file
Running server and viewing project
Tour of the project file
3
Project 1 - Up and running with Vue
Include Vue in project
Creat an instance of Vue
Adding a data property
Vue essentials: Directives
Adding a method
Rendering a list of items
Add classes to item
4
Project 1 - Adding product search
First, a request!
Creating the cart
Vue essentials: Reactivity
Iterate cart items in template
Enhancing cart in the template
Hide cart if empty
Adding quantity to cart items
Cart items quantity logic
Adding price to cart items
Vue essentials: Filters
Formatting price
Adding quantity buttons to template
Quantity buttons logic
Adding classes and breaking loop in add Items
5
Project 1 - Adding product search
Search button
Search input
Overview of vue-resource
Overview of API
Adding vue-resource to project
AJAX call for products
6
Project 1 - Building the product list
Replacing dummy items with the real thing
Product image
Adding search result count to product list
Loading message
Vue essentials: Lifecycle hooks
Default search on page load
Adding price to products
7
Project 1 - Enhancing the shopping cart
Vue essentials: Transitions
Fading in cart total
Vue essentials: Key
Vue essentials: List transitions
Fade in cart items
8
Project 1 - Scroll loading products
How scroll load works
Creating the results array
Including scroll monitor in the project
Scroll monitor basic setup
Implementing scroll load (part 1)
Implementing scroll load (part 2)
Fixing search results
Adding a "no more items" message
Vue essentials: Computed properties
Enhancing "no more items" logic
9
Project 1 - Finishing touches
Hiding elements before Vue compiles them
Requiring a search string
10
Project 2 - Overview and setup
Demo of the finished product
Getting data from the OMDB API
Clone repo, NPM install, setup environment
Running local server
Tour of the project files
Webpack configuration
Hello World
11
Project 2 - Setting up components
Vue essentials: Components
Configuring components
Setup the movie-list component
Setup the check-filter component
12
Project 2 - Filters
Vue essentials: Props
Add props to check-filter component
Making check-filter toggleable
Vue essentials: Custom events
Emitting a custom event from check-filter
Vue essentials: Vue.js devtools
Adding a payload to check-filter event
Processing check-filter event in root instance
Add filter arrays to movie-list
Creating logic for genre filter
13
Project 2 - Refactoring with single file components
Vue essentials: Single file components
Refactor project to use single file components
14
Project 2 - Getting data from API
Understanding the API
Getting data from the API
Replace dummy data with API data
Creating movie-item component
Fleshing out movie-item template
Enhance genre filter for multi-genre movies
Adding no results and loading messages
15
Project 2 - Displaying session times
Adding moment library to project
Displaying session times
Filtering session times
Adding time filters
Filter movies based on time filter
Filter sessions based on time filter
Enhance the no results message with filters
16
Project 2 - Component communication with an event bus
Vue essentials: Event bus
Using a global event bus in the project
17
Project 2 - Creating the Detail page
Vue essentials: Vue router
Abstract main page into overview component
Setting up Vue router
Adding router-view to main template
Creating detail page
Passing movie ID to detail page
Displaying movie-item in detail page
Vue essentials: Slots
Incorporating slots in movie-item
Fleshing out detail page
18
Project 2 - Adding the day selector
Creating day-select component
Addings days to day-select
Day selection logic
Application-level day property
Mobile day selector
19
Project 2 - Adding tooltips
Vue essentials: Custom directives
Adding tooltip custom directive
Creating tooltip in DOM
Adding classes and event listeners to tooltip
Vue essentials: Plugins
Making tooltip a custom plugin
20
Project 2 - Finishing touches
Adding keep-alive to router to maintain filter state
How v-cloak works alongside Webpack
Building for production
21
Project 3 - Overview and setup
Demo of the finished product
Clone repo, NPM install, setup environment
Tour of the files
Webpack configuration and extract text demo
22
Project 3 - Setting up the calendar
Setup the app component
Add moment to root, set timezone
Generate list of days in current month
Padding days to start/end of month for complete weeks
Grouping days into blocks of weeks
23
Project 3 - Calendar day functionality
Vue essentials: Shorthands
Adding calendar-day component
Adding days of week above calendar grid
Highlighting current day on calendar
UI effects for past and days outside of month
Vue essentials: Vuex
Add Vuex store to project and create basic state properties
24
Project 3 - Adding the month selector
Adding header and creating current-month component
Displaying date in current-month component
Adding buttons to current-month component
Moving Vuex into own file
Changing month and year with Vuex mutation
Enhancing current-month logic
Vue.js Dev Tools: Vuex
25
Project 3 - Creating the event form
Creating event-form component
Capture click in calendar-day
Positioning Event Form
Opening and closing Event Form
Displaying events in calendar-day
Creating events state in store
Adding input to event-form
Submit new event to store
Get event date in store
Improving form
Focus directive, Enter keyup is create
Displaying date on Event Form
Highlight Event Form active day
26
Project 3 - Loading stored events
Setup for sending events to server
Receiving event on server
Vue essentials: Vuex actions
Creating addEvent action in store
Returning a promise from addEvent action
27
Project 3 - Writing events to template
Replace Vuex state in main file
Move mock data to HTML template
Splicing mock data into HTML file
28
Project 3 - Server-side rendering
Vue essentials: Render functions
Creating root instance template with a render function
Introduction to server-side rendering
Server-side rendering webpack flow
Creating common entry file
Creating server entry file
Setting up bundle renderer
Splicing rendered bundle into HTML template
Vuex state hydration
29
Project 3 - Finishing touches
Adding image to header and reloading page on initial render
Building for production
30
Wrap up
Wrap up
Customer Reviews
5 star
0
4 star
0
3 star
0
2 star
0
1 star
0
Chapter
8
Project 1 - Scroll loading products
Section
9
Vue essentials: Computed properties
Project 1 - Scroll loading products: Vue essentials: Computed properties
Previous Section
End of Section 9
Next
Section