Oreilly - The Ultimate Vue JS 2 Developers Course

Oreilly - The Ultimate Vue JS 2 Developers Course

by Anthony Gore | Publisher: Packt Publishing | Release Date: July 2017 | ISBN: 9781788394086

https://www.oreilly.com/library/view/the-ultimate-vue/9781788394086/

Learn to code Vue JS 2 by building three professional applicationAbout This VideoSetup VueJS environment with development tools including Webpack.Create a universal application with server-side rendering.Use popular plugins from the Vue ecosystem like vue-router and vue-resource.In DetailThis 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.

Chapter 1 : Introduction
- Course introduction 00:20:51
Chapter 2 : Project 1 - Overview and setup
- Demo of the finished product 00:07:12
- Register for the Imgur API 00:03:02
- Reviewing the Vue.js Poster Store Github repo 00:01:03
- Clone repo, install dependencies and setup environment file 00:01:48
- Running server and viewing project 00:02:34
- Tour of the project file 00:05:48
Chapter 3 : Project 1 - Up and running with Vue
- Include Vue in project 00:05:48
- Creat an instance of Vue 00:03:08
- Adding a data property 00:02:40
- Vue essentials: Directives 00:03:32
- Adding a method 00:02:58
- Rendering a list of items 00:05:14
- Add classes to item 00:03:42
Chapter 4 : Project 1 - Adding product search
- First, a request! 00:01:50
- Creating the cart 00:01:27
- Vue essentials: Reactivity 00:03:57
- Iterate cart items in template 00:01:52
- Enhancing cart in the template 00:04:37
- Hide cart if empty 00:01:05
- Adding quantity to cart items 00:04:13
- Cart items quantity logic 00:05:13
- Adding price to cart items 00:05:39
- Vue essentials: Filters 00:02:59
- Formatting price 00:02:31
- Adding quantity buttons to template 00:04:44
- Quantity buttons logic 00:03:48
- Adding classes and breaking loop in add Items 00:04:54
Chapter 5 : Project 1 - Adding product search
- Search button 00:02:07
- Search input 00:06:09
- Overview of vue-resource 00:02:50
- Overview of API 00:03:11
- Adding vue-resource to project 00:03:37
- AJAX call for products 00:02:22
Chapter 6 : Project 1 - Building the product list
- Replacing dummy items with the real thing 00:04:54
- Product image 00:03:35
- Adding search result count to product list 00:06:11
- Loading message 00:06:19
- Vue essentials: Lifecycle hooks 00:05:57
- Default search on page load 00:02:42
- Adding price to products 00:03:50
Chapter 7 : Project 1 - Enhancing the shopping cart
- Vue essentials: Transitions 00:02:19
- Fading in cart total 00:04:20
- Vue essentials: Key 00:06:41
- Vue essentials: List transitions 00:04:06
- Fade in cart items 00:03:30
Chapter 8 : Project 1 - Scroll loading products
- How scroll load works 00:04:02
- Creating the results array 00:06:33
- Including scroll monitor in the project 00:03:23
- Scroll monitor basic setup 00:04:42
- Implementing scroll load (part 1) 00:03:39
- Implementing scroll load (part 2) 00:04:36
- Fixing search results 00:06:22
- Adding a "no more items" message 00:01:39
- Vue essentials: Computed properties 00:02:59
- Enhancing "no more items" logic 00:02:24
Chapter 9 : Project 1 - Finishing touches
- Hiding elements before Vue compiles them 00:02:19
- Requiring a search string 00:03:21
Chapter 10 : Project 2 - Overview and setup
- Demo of the finished product 00:01:50
- Getting data from the OMDB API 00:03:45
- Clone repo, NPM install, setup environment 00:01:27
- Running local server 00:05:04
- Tour of the project files 00:02:07
- Webpack configuration 00:06:19
- Hello World 00:11:00
Chapter 11 : Project 2 - Setting up components
- Vue essentials: Components 00:03:29
- Configuring components 00:03:04
- Setup the movie-list component 00:05:28
- Setup the check-filter component 00:06:18
Chapter 12 : Project 2 - Filters
- Vue essentials: Props 00:05:37
- Add props to check-filter component 00:03:49
- Making check-filter toggleable 00:03:45
- Vue essentials: Custom events 00:03:17
- Emitting a custom event from check-filter 00:02:37
- Vue essentials: Vue.js devtools 00:04:37
- Adding a payload to check-filter event 00:02:01
- Processing check-filter event in root instance 00:05:37
- Add filter arrays to movie-list 00:03:41
- Creating logic for genre filter 00:03:10
Chapter 13 : Project 2 - Refactoring with single file components
- Vue essentials: Single file components 00:05:39
- Refactor project to use single file components 00:03:52
Chapter 14 : Project 2 - Getting data from API
- Understanding the API 00:09:23
- Getting data from the API 00:04:38
- Replace dummy data with API data 00:03:53
- Creating movie-item component 00:02:21
- Fleshing out movie-item template 00:03:29
- Enhance genre filter for multi-genre movies 00:03:15
- Adding no results and loading messages 00:05:21
Chapter 15 : Project 2 - Displaying session times
- Adding moment library to project 00:05:03
- Displaying session times 00:07:36
- Filtering session times 00:05:39
- Adding time filters 00:06:44
- Filter movies based on time filter 00:05:01
- Filter sessions based on time filter 00:09:45
- Enhance the no results message with filters 00:04:40
Chapter 16 : Project 2 - Component communication with an event bus
- Vue essentials: Event bus 00:04:09
- Using a global event bus in the project 00:03:02
Chapter 17 : Project 2 - Creating the Detail page
- Vue essentials: Vue router 00:08:52
- Abstract main page into overview component 00:04:15
- Setting up Vue router 00:04:40
- Adding router-view to main template 00:04:12
- Creating detail page 00:03:29
- Passing movie ID to detail page 00:04:59
- Displaying movie-item in detail page 00:04:04
- Vue essentials: Slots 00:06:35
- Incorporating slots in movie-item 00:02:21
- Fleshing out detail page 00:04:40
Chapter 18 : Project 2 - Adding the day selector
- Creating day-select component 00:04:42
- Addings days to day-select 00:02:29
- Day selection logic 00:06:09
- Application-level day property 00:02:50
- Mobile day selector 00:04:59
Chapter 19 : Project 2 - Adding tooltips
- Vue essentials: Custom directives 00:06:24
- Adding tooltip custom directive 00:03:13
- Creating tooltip in DOM 00:03:44
- Adding classes and event listeners to tooltip 00:02:55
- Vue essentials: Plugins 00:12:31
- Making tooltip a custom plugin 00:01:25
Chapter 20 : Project 2 - Finishing touches
- Adding keep-alive to router to maintain filter state 00:05:39
- How v-cloak works alongside Webpack 00:02:26
- Building for production 00:02:49
Chapter 21 : Project 3 - Overview and setup
- Demo of the finished product 00:01:58
- Clone repo, NPM install, setup environment 00:04:08
- Tour of the files 00:02:49
- Webpack configuration and extract text demo 00:04:42
Chapter 22 : Project 3 - Setting up the calendar
- Setup the app component 00:10:37
- Add moment to root, set timezone 00:02:58
- Generate list of days in current month 00:04:16
- Padding days to start/end of month for complete weeks 00:08:12
- Grouping days into blocks of weeks 00:10:46
Chapter 23 : Project 3 - Calendar day functionality
- Vue essentials: Shorthands 00:04:39
- Adding calendar-day component 00:04:46
- Adding days of week above calendar grid 00:01:32
- Highlighting current day on calendar 00:02:58
- UI effects for past and days outside of month 00:03:08
- Vue essentials: Vuex 00:04:39
- Add Vuex store to project and create basic state properties 00:01:16
Chapter 24 : Project 3 - Adding the month selector
- Adding header and creating current-month component 00:04:38
- Displaying date in current-month component 00:02:37
- Adding buttons to current-month component 00:01:41
- Moving Vuex into own file 00:02:34
- Changing month and year with Vuex mutation 00:03:18
- Enhancing current-month logic 00:03:32
- Vue.js Dev Tools: Vuex 00:02:20
Chapter 25 : Project 3 - Creating the event form
- Creating event-form component 00:01:49
- Capture click in calendar-day 00:04:51
- Positioning Event Form 00:04:36
- Opening and closing Event Form 00:02:36
- Displaying events in calendar-day 00:06:03
- Creating events state in store 00:06:00
- Adding input to event-form 00:01:55
- Submit new event to store 00:02:00
- Get event date in store 00:04:05
- Improving form 00:03:51
- Focus directive, Enter keyup is create 00:03:08
- Displaying date on Event Form 00:04:22
- Highlight Event Form active day 00:04:16
Chapter 26 : Project 3 - Loading stored events
- Setup for sending events to server 00:03:41
- Receiving event on server 00:05:22
- Vue essentials: Vuex actions 00:02:58
- Creating addEvent action in store 00:04:03
- Returning a promise from addEvent action 00:05:57
Chapter 27 : Project 3 - Writing events to template
- Replace Vuex state in main file 00:07:00
- Move mock data to HTML template 00:05:08
- Splicing mock data into HTML file 00:05:20
Chapter 28 : Project 3 - Server-side rendering
- Vue essentials: Render functions 00:08:08
- Creating root instance template with a render function 00:04:20
- Introduction to server-side rendering 00:06:37
- Server-side rendering webpack flow 00:09:49
- Creating common entry file 00:05:44
- Creating server entry file 00:06:59
- Setting up bundle renderer 00:06:47
- Splicing rendered bundle into HTML template 00:06:10
- Vuex state hydration 00:04:43
Chapter 29 : Project 3 - Finishing touches
- Adding image to header and reloading page on initial render 00:06:41
- Building for production 00:05:47
Chapter 30 : Wrap up
- Wrap up 00:03:57