Skip to main 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
- 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
- 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
- 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.
- 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 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
- 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.
- 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.