This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Table of Contents
Introduction to Vue.js
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.
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.
Directives & Data Rendering
Vue Instance
With a "Hello World!" example, Sarah demonstrates the basics of utilizing Vue.js framework.
Comparing Vanilla JavaScript
Illustrating the benefits of the Vue.js framework, Sarah compares vanilla JavaScript against Vue for conditional rendering.
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
In this challenge, students create a simple calculator that performs addition.
Challenge 1: Solution
Sarah walks through the solution to Challenge 1.
Methods, Computed, & Watchers
Methods
Sarah reviews methods, which attach a function to an object.
Working with Methods
Using a series of form code demonstrations, Sarah shows how practical examples of using methods.
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
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
Sarah walks through the solution to Challenge 2.
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
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
Vue.js uses HTML-based template syntax to bind the Vue instance to the DOM, very useful for components
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
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
Using a previous example, Sarah refactors the modularizes the code base by creating components. Sarah takes questions from students.
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
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
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
In this challenge, students convert pre-existing code into a component.
Challenge 3: Solution
Sarah walks through the solution to Challenge 3.
Vue CLI & Nuxt.js
Introducing Vue CLI
After introducing the benefits of using Vue CLI, walks through the installation process.
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
Sarah reviews Vue.js snippets that aid in coding productivity.
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
Sarah introduces Nuxt.js, which is a framework for creating Universal Vue.js Applications.
Nuxt.js Application Walkthrough
Sarah demonstrates the makeup of a Nuxt.js application.
Challenge 4: Vue CLI
In this challenge, students transfer a component to a Vue-CLI build environment. Sarah takes questions from students.
Animations
Introducing Animations
After describing the difference between transitions and animations, Sarah introduces the Vue.js transition wrapper component through an example of a modal.
CSS Animation
Sarah reviews how to use the transition component for custom and more involved CSS animations.
Challenge 5: Adding Animation
In this challenge, students create a transition or animation for the entrance or exit of an element.
Challenge 5: Solution
Sarah reviews the benefits of Vue.js animations.
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
Sarah reviews how to associate JavaScript powered animations to the transition wrapper component.
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
Sarah demonstrates how Nuxt.js allows for quickly creating page transitions.
Page-Specific Transitions
Sarah reviews how different transitions can be applied to within an application.
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
Sarah reviews filters in Vue.js. While filters do not transform the data, they change the output that the user sees.
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
Sarah examines in more detail custom directives, which are useful in gaining access to some DOM on elements.
Challenge 6: Filter
In this challenge, students use filters to manipulate the rendered data.
Challenge 6: Solution
Sarah walks through the solution to Challenge 6.
Vuex
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.
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
With a sample Vuex application, Sarah demonstrates how to coordinate state with Vuex.
Challenge 7: Vuex
In this challenge, students create a simple Vuex application.
Challenge 7: Solution
Sarah walks through the solution to Challenge 7.
