Introduction to Vue.js
This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Table of Contents
Introduction to Vue.js
Course AgendaReviewing 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 InstanceWith a "Hello World!" example, Sarah demonstrates the basics of utilizing Vue.js framework.
DirectivesThrough 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: CalculatorIn this challenge, students create a simple calculator that performs addition.
Challenge 1: SolutionSarah walks through the solution to Challenge 1.
Methods, Computed, & Watchers
MethodsSarah reviews methods, which attach a function to an object.
Working with MethodsUsing a series of form code demonstrations, Sarah shows how practical examples of using methods.
Computed PropertiesSarah 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 BlogIn this challenge, students create a new blog post with a label. Then add filtering functionality to sort blog posts by labels.
Challenge 2: SolutionSarah walks through the solution to Challenge 2.
Reactive ProgrammingTo 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.
WatchersSarah 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.
TemplatesVue.js uses HTML-based template syntax to bind the Vue instance to the DOM, very useful for components
Introducing ComponentsSarah reviews components, which is a collection of elements that are encapsulated into a group that can be accessed through one single element.
PropsAfter 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 ComponentUsing a previous example, Sarah refactors the modularizes the code base by creating components. Sarah takes questions from students.
Communicating EventsDemonstrating 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.
SlotsSarah 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-AliveSarah 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 ComponentIn this challenge, students convert pre-existing code into a component.
Challenge 3: SolutionSarah walks through the solution to Challenge 3.
Vue CLI & Nuxt.js
Introducing Vue CLIAfter introducing the benefits of using Vue CLI, walks through the installation process.
Vue CLI WalkthroughSarah 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 SnippetsSarah reviews Vue.js snippets that aid in coding productivity.
Lifecycle HooksSarah 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.jsSarah introduces Nuxt.js, which is a framework for creating Universal Vue.js Applications.
Nuxt.js Application WalkthroughSarah demonstrates the makeup of a Nuxt.js application.
Challenge 4: Vue CLIIn this challenge, students transfer a component to a Vue-CLI build environment. Sarah takes questions from students.
Introducing AnimationsAfter describing the difference between transitions and animations, Sarah introduces the Vue.js transition wrapper component through an example of a modal.
CSS AnimationSarah reviews how to use the transition component for custom and more involved CSS animations.
Challenge 5: Adding AnimationIn this challenge, students create a transition or animation for the entrance or exit of an element.
Challenge 5: SolutionSarah reviews the benefits of Vue.js animations.
Transition ModesSarah introduces the Vue.js transition wrapper component, which allows add entering and leaving transitions for any element or component in multiple contexts.
Connect to InteractionUsing a coding example to make a robot illustration life-like, Sarah shows how to connect mouse events and animations through Vue.js.
Simple TransitionSarah demonstrates how Nuxt.js allows for quickly creating page transitions.
Page-Specific TransitionsSarah reviews how different transitions can be applied to within an application.
Planning & Fancy DemoSarah discusses how to plan out animations for inclusion into a Vue.js application and reviews a complex page transition demo.
Filters, Mixins, & Custom Directives
FiltersSarah reviews filters in Vue.js. While filters do not transform the data, they change the output that the user sees.
MixinsSarah 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 DirectivesSarah examines in more detail custom directives, which are useful in gaining access to some DOM on elements.
Challenge 6: FilterIn this challenge, students use filters to manipulate the rendered data.
Challenge 6: SolutionSarah walks through the solution to Challenge 6.
Introducing VuexSarah 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 SetupAfter reviewing the structure of a typical Vuex application, Sarah shows a simple Vuex demo. Sarah takes questions from students.
Vuex Example WalkthroughWith a sample Vuex application, Sarah demonstrates how to coordinate state with Vuex.
Challenge 7: VuexIn this challenge, students create a simple Vuex application.
Challenge 7: SolutionSarah walks through the solution to Challenge 7.