Table of Contents
Introduction to Vue.js
Introduction
00:00:00 - 00:07:32
Introduction
Sarah Drasner starts her Introduction to Vue.js course. Vue.js is an open-source progressive JavaScript framework for building user interfaces. Sarah reviews reasons to use the framework and how Vue.js compares to other frameworks. -
https://vuejs.org/
Course Agenda
00:07:33 - 00:14:57
Course Agenda
Reviewing the course agenda, Sarah covers what will and will not be taught in the course. To better experience and experiment with Vue.js examples shown in the course, Sarah reviews CodePen, which is where the code demos are located. - -
https://github.com/sdras/intro-to-vue -
https://codepen.io/collection/noYZxW/
Directives & Data Rendering
Vue Instance
00:14:58 - 00:18:54
Vue Instance
With a "Hello World!" example, Sarah demonstrates the basics of utilizing Vue.js framework.
Comparing Vanilla JavaScript
00:18:55 - 00:22:53
Comparing Vanilla JavaScript
Illustrating the benefits of the Vue.js framework, Sarah compares vanilla JavaScript against Vue for conditional rendering. -
http://slides.com/sdrasner/intro-to-vue-2?token=502n2b7V
Directives
00:22:54 - 00:47:16
Directives
Through some code demonstrations, Sarah reviews Vue.js directives. A directive is a special marker in markup attributes with the v- prefix that tells the framework to do something to a DOM element. Sarah takes questions from students.
Challenge 1: Calculator
00:47:17 - 00:49:02
Challenge 1: Calculator
In this challenge, students create a simple calculator that performs addition.
Challenge 1: Solution
00:49:03 - 00:50:51
Challenge 1: Solution
Sarah walks through the solution to Challenge 1.
Methods, Computed, & Watchers
Methods
00:50:52 - 00:55:28
Methods
Sarah reviews methods, which attach a function to an object. -
http://slides.com/sdrasner/intro-to-vue-2?token=502n2b7V
Working with Methods
00:55:29 - 01:04:03
Working with Methods
Using a series of form code demonstrations, Sarah shows how practical examples of using methods.
Computed Properties
01:04:04 - 01:10:13
Computed Properties
Sarah introduces computer properties, which are calculations that will be cached and will only update when needed, and compares them to methods. Sarah takes questions from students.
Challenge 2: Updating a Blog
01:10:14 - 01:11:57
Challenge 2: Updating a Blog
In this challenge, students create a new blog post with a label. Then add filtering functionality to sort blog posts by labels.
Challenge 2: Solution
01:11:58 - 01:14:26
Challenge 2: Solution
Sarah walks through the solution to Challenge 2.
Reactive Programming
01:14:27 - 01:18:50
Reactive Programming
To place watchers into context, Sarah first review reactive programming, which is programming with asynchronous data streams. A data stream is a sequence of ongoing events ordered in time that offer some hooks in which to observe it. When we use reactive premises for building applications, this it's straightforward to update state in reaction to events.
Watchers
01:18:51 - 01:30:37
Watchers
Sarah notes that each component has a watcher instance. The properties touched by the watcher during the render are registered as dependencies. When the setter is triggered, it lets the watcher know and causes the component to re-render. After describing how watchers work, Sarah shows examples of how watchers can be used.
Components
Templates
01:30:38 - 01:33:38
Templates
Vue.js uses HTML-based template syntax to bind the Vue instance to the DOM, very useful for components -
http://slides.com/sdrasner/intro-to-vue-3
Introducing Components
01:33:39 - 01:36:40
Introducing Components
Sarah reviews components, which is a collection of elements that are encapsulated into a group that can be accessed through one single element.
Props
01:36:41 - 01:45:01
Props
After describing props, which are one-way communication that passes data down from the parent to the child, Sarah reviews types and validation within props. Sarah takes questions from students.
Refactoring into a Component
01:45:02 - 01:53:14
Refactoring into a Component
Using a previous example, Sarah refactors the modularizes the code base by creating components. Sarah takes questions from students.
Communicating Events
01:53:15 - 02:03:21
Communicating Events
Demonstrating that if any changes occur on a prop, problems may occur as the parent would override that prop's value when it is re-rendered, Sarah introduces the $emit option as the way to make sure the child updates the parent regardings its updated value and makes components re-usable throughout an application.
Slots
02:03:22 - 02:08:37
Slots
Sarah reviews slot elements that can be used to customize further how content should be distributed. Using multiple slots with different names, each named slot will match any element with its designated slot attribute in the content fragment.
Keep-Alive
02:08:38 - 02:10:09
Keep-Alive
Sarah introduces the keep-alive element, which keeps switched-out components in memory to preserve their state or avoid re-rendering.
Challenge 3: Refactoring into a Component
02:10:10 - 02:11:50
Challenge 3: Refactoring into a Component
In this challenge, students convert pre-existing code into a component.
Challenge 3: Solution
02:11:51 - 02:13:28
Challenge 3: Solution
Sarah walks through the solution to Challenge 3.
Vue CLI & Nuxt.js
Introducing Vue CLI
02:13:29 - 02:20:38
Introducing Vue CLI
After introducing the benefits of using Vue CLI, walks through the installation process. -
http://slides.com/sdrasner/intro-to-vue-5?token=5zRhIuNg#/
Vue CLI Walkthrough
02:20:39 - 02:32:50
Vue CLI Walkthrough
Sarah converts Vue.js application hosted inside CodePen to illustrate the makeup of standalone single page application with Vue CLI. Sarah takes questions from students.
Vue Snippets
02:32:51 - 02:36:52
Vue Snippets
Sarah reviews Vue.js snippets that aid in coding productivity.
Lifecycle Hooks
02:36:53 - 02:44:21
Lifecycle Hooks
Sarah reviews lifecycle hooks, which provide a method to execute different pieces of logic at precise points throughout a component's lifecycle. Sarah takes questions from students.
Introducing Nuxt.js
02:44:22 - 02:47:05
Introducing Nuxt.js
Sarah introduces Nuxt.js, which is a framework for creating Universal Vue.js Applications.
Nuxt.js Application Walkthrough
02:47:06 - 02:55:56
Nuxt.js Application Walkthrough
Sarah demonstrates the makeup of a Nuxt.js application.
Challenge 4: Vue CLI
02:55:57 - 03:18:25
Challenge 4: Vue CLI
In this challenge, students transfer a component to a Vue-CLI build environment. Sarah takes questions from students. -
https://codepen.io/sdras/pen/owaWwd
Animations
Introducing Animations
03:18:26 - 03:30:01
Introducing Animations
After describing the difference between transitions and animations, Sarah introduces the Vue.js transition wrapper component through an example of a modal. -
http://slides.com/sdrasner/intro-to-vue-5?token=5zRhIuNg
CSS Animation
03:30:02 - 03:36:56
CSS Animation
Sarah reviews how to use the transition component for custom and more involved CSS animations.
Challenge 5: Adding Animation
03:36:57 - 03:37:57
Challenge 5: Adding Animation
In this challenge, students create a transition or animation for the entrance or exit of an element. -
https://codepen.io/sdras/pen/pweqaN
Challenge 5: Solution
03:37:58 - 03:38:42
Challenge 5: Solution
Sarah reviews the benefits of Vue.js animations.
Transition Modes
03:38:43 - 03:43:59
Transition Modes
Sarah introduces the Vue.js transition wrapper component, which allows add entering and leaving transitions for any element or component in multiple contexts.
JavaScript Hooks
03:44:00 - 03:51:18
JavaScript Hooks
Sarah reviews how to associate JavaScript powered animations to the transition wrapper component.
Connect to Interaction
03:51:19 - 03:55:17
Connect to Interaction
Using a coding example to make a robot illustration life-like, Sarah shows how to connect mouse events and animations through Vue.js.
Simple Transition
03:55:18 - 03:57:44
Simple Transition
Sarah demonstrates how Nuxt.js allows for quickly creating page transitions.
Page-Specific Transitions
03:57:45 - 04:01:42
Page-Specific Transitions
Sarah reviews how different transitions can be applied to within an application.
Planning & Fancy Demo
04:01:43 - 04:05:03
Planning & Fancy Demo
Sarah discusses how to plan out animations for inclusion into a Vue.js application and reviews a complex page transition demo.
Filters, Mixins, & Custom Directives
Filters
04:05:04 - 04:10:59
Filters
Sarah reviews filters in Vue.js. While filters do not transform the data, they change the output that the user sees. -
http://slides.com/sdrasner/intro-to-vue-6?token=fcL8qgTg#
Mixins
04:11:00 - 04:21:26
Mixins
Sarah introduces mixins, which are flexible ways to distribute reusable functionalities for Vue.js components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be "mixed" into the component’s options.
Custom Directives
04:21:27 - 04:29:22
Custom Directives
Sarah examines in more detail custom directives, which are useful in gaining access to some DOM on elements.
Challenge 6: Filter
04:29:23 - 04:30:04
Challenge 6: Filter
In this challenge, students use filters to manipulate the rendered data. -
https://codepen.io/sdras/pen/d7ff124563d8f6226eb6cf0b2bb3a7a6
Challenge 6: Solution
04:30:05 - 04:30:47
Challenge 6: Solution
Sarah walks through the solution to Challenge 6.
Vuex
Introducing Vuex
04:30:48 - 04:35:16
Introducing Vuex
Sarah introduces Vuex and its benefits. Vuex is a state management pattern and library for Vue.js applications. In a complex single page application, passing state between many components, and especially deeply nested or sibling components can get complicated quickly. Therefore for having one centralized place to access your data can help you stay organized. -
http://slides.com/sdrasner/intro-to-vue-7?token=u9qUgRsW#/
Examining a Vuex Setup
04:35:17 - 04:54:55
Examining a Vuex Setup
After reviewing the structure of a typical Vuex application, Sarah shows a simple Vuex demo. Sarah takes questions from students.
Vuex Example Walkthrough
04:54:56 - 04:59:07
Vuex Example Walkthrough
With a sample Vuex application, Sarah demonstrates how to coordinate state with Vuex.
Challenge 7: Vuex
04:59:08 - 05:00:56
Challenge 7: Vuex
In this challenge, students create a simple Vuex application.
Challenge 7: Solution
05:00:57 - 05:03:14
Challenge 7: Solution
Sarah walks through the solution to Challenge 7.
Wrapping Up Introduction to Vue.js
Wrapping Up
05:03:15 - 05:06:12
Wrapping Up
After reviewing some further resources, Sarah thanks the students and concludes Introduction to Vue.js course.
