Sarah Drasner
Google
Introduction to Vue 3
4 hours, 57 minutes CC
Course Description
Get started quickly with the Vue.js JavaScript framework. You’ll learn how to build reusable components and make them flexible with props, lifecycles, and slots. Use directives to build functionality with markup and learn to make your own custom directives. And learn what’s new in Vue 3 and how to abstract functionality with the new Composition API!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: October 20, 2020
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 19 minutes
Sarah Drasner introduces Vue.js, a JavaScript framework that is known for its declarative nature, for being legible, easy to maintain, powerful, and up to date with best practices for frontend libraries. This segment also includes a comparison between Vue.js and other frameworks, namely React and Angular, and an overview of the course content.
Sarah gives an overview of the course slides, the course repository, the various chrome extensions used for the course, and how to get set up with CodePen to follow along with the course.
Sarah creates a new Vue.js instance that returns the "Hello World" message, and demonstrates that using the Vue framework allows engineers to write clean, legible, easy to maintain, and reactive code.
Directives, Modifiers & Data Rendering
Section Duration: 30 minutes
Sarah explains that the V-model directive creates a relationship between the data in the component and a form input that allows the engineer to dynamically update values. A directive is a special token in the markup that tells the library to modify a DOM element. A Vue directive appears in the format of a prefixed HTML attribute. How to implement the v-model directive is also discussed in this segment.
Sarah defines v-if as a conditional directive that displays information depending on meeting a requirement. A requirement can be the filling of a text area which in return makes a button appear. This section also covers how to use v-if and v-else together.
Sarah defines v-bind as a directive that can be used for style binding, class binding, or for creating dynamic props, and why v-bind is one of the most useful directives.
Sarah defines v-for as a directive that loops through a set of values or that can also be a static number, and walks through a v-for example that contains a value, a key, and an index.
Sarah defines v-once as a directive that no longer updates an object once it has been rendered, and v-pre as a directive that prints out inner text and is useful when writing documentation. How to use the v-once and v-pre directives by embedding them in an HTML file is demonstrated in this segment.
Sarah defines the v-on or @ directive as a binder to events like click and mouseenter, and demonstrates how to embed the directive in an HTML file through an example.
Sarah defines v-html as a directive used for strings that have html elements that need to be rendered, explains that it is best practice to avoid the use of the v-html directive to render data on a page, and adds that v-text is a directive that is similar to using moustache templates, or templates without a control flow.
Students are instructed to use directives to build a calculator, and add a select dropdown that conditionally renders data into a page.
Sarah walks the students through the solution to the Directives exercise, and answers questions about the use of the v-lazy directive, when to specify a type, and about the uniqueness and type of a key when used in a DOM.
Sarah explains that the v-model.trim modifier strips any leading or trailing whitespace from the string that a component is bound to, adds that the v-model.number modifier changes strings to number inputs, making sure the inputs are the right type, and v-model.lazy does not populate content automatically, and listens to change events instead of input.
Sarah gives an overview of the main event modifiers, @mousemove.stop, @mousemove.prevent, @submit.prevent, and @click.once, and explains that the new HTML spec in Vue switched to the use of names instead of numbers for keycodes.
Methods, Computed Properties & Watchers
Section Duration: 1 hour, 5 minutes
Sarah explains that methods are functions that are bound to a Vue instance which allow connecting functionality to directives and allow engineers to access functions through directives, and walks students through a comment form that uses methods.
Sarah demonstrates how to create a form that uses a method called submitForm that posts to a server.
Sarah covers another usecase involving methods that uses data from a Netflix API and lists movies from highest to lowest and from lowest to highest using two different methods, "sortLowest" and "sortHighest".
Sarah defines computed properties as calculations that are cached and only update when needed, when the initial data value changes, and covers the main differences between computed properties and methods.
Students are instructed to build a form that allows users to create a blog post using a title, an author, and a label, and also allows filtering the list of blog posts using a label.
Sarah live codes the solution to the Computed Properties exercise, and shares another example that uses computed properties to render data.
Sarah covers a few examples using computed properties such as adding currency signs, filtering a large amount of data based on user input, and creating data visualizations that can be explored. This section also mentions why filters have been deprecated from Vue 2 to Vue 3, and why it is best practice with Vue 3 to use computed properties and methods.
Sarah explains that reactive programming is programming with asynchronous data streams, adds that a stream is a sequence of ongoing events ordered in time that offer some hooks with which to observe it, and walks through the various steps that Vue 3 goes through to make an object reactive. Proxies, which are objects that encase other objects or functions that allow engineers to intercept it, are also explored in this section.
Sarah defines Set(), as a method that takes in a series of values, comparable to an array, where any particular value can only be inserted once, and explains that Map() is a method that also takes a series of keys and values, similar to an object, but remembers the order and performs better in scenarios involving frequent addtion or removal of data. WeakMap() is defined as a method that is similar to Map() but with weaker references. In other words, when an element of the WeakMap() is deleted, the reference can be garbage collected.
Sarah explains that watchers are objects that are good for asynchronous updates and transitions involving data changes, and explains that watchers give access to both the new value and the old value of an element. Changing datasets using watchers is also discussed in this segment.
Students are instructed to use a watcher to modify the value of a given method.
Sarah walks through the code of the solution to the Watchers exercise.
Sarah explores one more example using watchers that changes animations when the timezone is modified. A question about how watchers affect properties within a method is asked.
Components & Props
Section Duration: 45 minutes
Sarah defines components as a collection of elements that are encapsulated into a group that can be accessed through one single element. How to build a component and modify a child component is demonstrated in this segment.
Sarah explores the use of props by refactoring the example from the previous segment so that with every child component, a prop is returned, and explains that props pass data from a parent to a child component to ensure that there is only one source of truth.
Sarah explains that each component instance has its own isolated scope, therefore data must be linked to a component through a function. How to add a component to a given template is also demonstrated in this segment.
Sarah explains that, to guarantee that there is only one source of truth, a prop is not mutated when it is defined within a child component, but the modification is communicated to the parent component through an $emit() function. An example of a child component reporting a change to the parent component is discussed in this segment.
Sarah explains how slot elements allow for the possibility of passing content into a component with ease. A few examples are covered where components utilize slots to create dynamic content. Slots are elements that allow users to populate content.
Students are instructed to refactor code into components, and add slots to each components.
Sarah walks through the code for the solution to the Components exercise.
App Development
Section Duration: 44 minutes
Sarah describes how to write a single file template in Vue, and adds that a single file template means no context-shifting.
Sarah demonstrates how to install the Vue CLI, explains how to start a new Vue project from the CLI, and refactors code from a previous CodePen into a Vue application.
Sarah refactors code from the backpack shop counter component example viewed in the previous section from CodePen into a Vue application, demonstrates how to push the code up to GitHub, and how to link GitHub to Netlify in order to deploy code using Netlify.
Sarah explains that it is best practice to use snippets in editors that are specific to Vue to be able to read and visualize code better, and describes the Vetur extension which provides highlighting, snippets, and formatting to Vue in VSCode.
Sarah gives a survey of lifecycle hooks or methods that can be used in Vue.js, shares the lifecycle methods that changed from Vue 2 to Vue 3, and introduces the new lifecycle methods available in Vue 3.
Sarah introduces Nuxt, explains her preference for Nuxt over Vue CLI to deploy code to production. Nuxt is a progressive framework based on Vue. Nuxt guarantees automatic code splitting, allows server-side rendering, has a powerful routing system with asynchronous data,offers automatic dynamic routes, and offers lighthouse scores. When loading a library, Nuxt only uses the methods that are necessary.
Sarah demonstrates setup and startup for a Nuxt project, walks students through the nuxt.config.js file, and explains how Nuxt.js and Vuex function together.
Sarah demonstrates how to render CSS in Nuxt, reminds the students that Nuxt renders server-side, and explains what hydration is. Hydration improves the performance of an application by speeding up performance to initially serve raw HTML and CSS, because it renders an application statically by rendering it server-side. After the static part has been served, Vue takes over the dynamic part of the application.
Students are instructed to go through the solution code from the Components solution, and refactor the code to contain all the setups necessary for Vue CLI.
Sarah walks the students through the Vue CLI solution.
Animations
Section Duration: 34 minutes
Sarah explains that there are a myriad of different ways to work with animations in Vue, mentions the use of surface API pieces which are parts of an API a user can interact with, and walks students through the use of transitions when creating animations. How to reuse transitions in different components is also discussed in this section.
Sarah explores using CSS classes when using the transition component, mentions custom eases and how to include them when using animations, and explores using only a class to create an animation.
Students are instructed to create either a transition or an animation that addresses the entrance or exit to an element. There are no solutions to this practice because transitions and animations vary from one student to another.
Sarah explains that transition modes are borrowed by Vue from React, and explores the different transition modes available to developers in Vue. Transition modes allow engineers to build animations that are not simultaneous entering and leaving transitions, for example, the in-out transition the new element transitions in first, and when complete, the current element transitions out.
Sarah explains why JavaScript is more powerful than CSS when building animations, demonstrates how to set up Vue to not look for CSS so only hooks are used for animation, and walks students through an example of animations that use hooks to create transitions and animations.
Sarah demonstrates through an example of an animated Wall-E how to loop through events and add animated interaction in Vue.js. How to coordinate scrolling with animation are also discussed in this segment.
Sarah reviews the enter and leave states that allow users to transition from one page to another, explains that Nuxt has the necessary hooks that can create transitions between pages, and walks students through how to add animations to one specific page using Nuxt.
Students are instructed to use Nuxt to create two pages, or to use the setup2 folder in the repository, and to set up a page transition.
Composition API & Custom Directives
Section Duration: 32 minutes
Sarah explains how the composition API allows engineers to encapsulate one piece of functionality so that the functionality can be used in different components throughout the application. The composition API follows a functional programming model that takes small pieces of functionality and allows developers to use it in different components throughout the application. Refactoring code using composition API is also discussed in this segment.
Sarah explains that computed properties take in a state and return a computed state, adds that the Watch method allows engineers to access the new and old values, and defines WatchEffect method as watchers with small differences. WatchEffect executes a function immediately, and tracks all the reactive state properties it used during the execution as dependencies.
Sarah explains that props in the context of the composition API are reactive and are passed into setup, and adds that context is passed as the second argument in setup, which allows the engineer to access events like emit.
Sarah explains that lifecycle hooks are named the same as other hooks, but are prefixed with "on" and camelCased when declared and used in the composition API. The composition API is useful when trying to extract reusable logic without a template such as getting dimensions of the viewport and component, gathering specific mousemove events, base elements of charts, clipboards, media queries, and dark mode. How to merge the options API (the former Vue API) and the composition API is also discussed in this segment.
Sarah demonstrates how to implement the script setup element instead of a script function in single file components, and shares additional resources to further one's knowledge about the composition API.
Students are instructed to refactor a given the example of the comment form introduced in the methods segment, using the composition API.
Sarah walks students through the solution to the Composition exercise.
Sarah explains that it is possible for engineers to create their own custom directives, and walks students through already existing directives.
Vuex
Section Duration: 20 minutes
Sarah defines the Vuex library as a centralized store for shared data, logic, shared oe asynchronous methods, explains that engineers use Vuex when multiple of instances of children and siblings communicating, or when it is necessary to see what all of the states look like and keep states in an organized place. State, actions, and getters in Vuex are also discussed in this segment.
Sarah describes how to use state, getters, mutations, and actions within components. How to use the spread operator to refactor code that uses state, getters, mutations, and actions is also discussed.
Students are instructed to create an application using the Vue CLI, and add store logic through Vuex that applies to components.
Sarah walks students through the solution to the Vuex exercise.
Wrapping Up
Section Duration: 3 minutes
Sarah congratulates students for finishing the course, and shares resources for students to further their knowledge in Vuex, after walking students through one last example, a weather notifier that uses a Vuex store to show the weather, and mutates the state of the weather. The Netlify e-commerce repository that contains other examples of using Vuex store is also discussed in this segment.
I just completed "Introduction to Vue 3" by Sarah Drasner to prep for an interview, it went great and couldn't help but celebrate with al pastor tacos! I loved the course!
Aileen VL
aileenvl
Loving this course on Vue 3 on Frontend Masters by Sarah Drasner. I learnt a lot. The best course for beginners on Vue 3!
Ali Shaikh
ShaikhAliAkbar
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops