Egghead Instructor Greg Thoman

Greg Thoman

I love learning! It keeps me doing what I do. I play saxophone, ice hockey (which is full of learning!) and video games that tend to include dinosaurs.



Support Greg's Free Lessons
become a member today

Browse Greg Thoman's lessons.

showing 13 lessons...

Create Filters in Vue.js

Dynamic Vue.js Components with the component element

Build Reusable Vue.js Components

Bind Values to Input Fields in Vue.js

Handle DOM Events in Vue.js with v-on

Conditionally Render DOM Elements in Vue.js

Update Attributes, Classes and Styles in Vue.js with v-bind

Use Vue.js Watchers to Respond to Async Updates

Use Vue.js Component Computed Properties

Use Generated Content to Augment Information

Create a List Component in Vue.js

Create a Basic Component using Vue.js

Use CSS Counters to Create Pure CSS Dynamic Lists

js tutorial about Create Filters in Vue.js

Create Filters in Vue.js

1:45 js

Just like in the command line, you can pipe a property through a filter to get a desired result. You can even chain them together!

js tutorial about Dynamic Vue.js Components with the component element

Dynamic Vue.js Components with the component element

1:40 js

You can dynamically switch between components in a template by using the reserved <component> element and dynamically bind to its is attribute. By using <keep-alive> you can tell Vue to keep the component in memory.

js tutorial about Build Reusable Vue.js Components

Build Reusable Vue.js Components

2:12 js

By building components, you can extend basic HTML elements and reuse encapsulated code. Most options that are passed into a Vue constructor can be passed into a component. Each instance of a component has an isolated scope. Data can only be passed one direction and it must be from parent to child using props. To communicate with the parent element, use the $emit method.

js tutorial about Bind Values to Input Fields in Vue.js

Bind Values to Input Fields in Vue.js

1:47 js

Use v-model to create 2-way data binding. You can render dynamic options in a select element and bind them to their data. Use v-bind on inputs to use dynamic properties on the Vue instance. Adding modifiers like .lazy, .number and .trim allow us to trim our methods and let Vue take care of things like trimming white space.

js tutorial about Handle DOM Events in Vue.js with v-on

Handle DOM Events in Vue.js with v-on

1:06 js

v-on can be used to handle interaction with elements in your template. Modifiers like stop and prevent can be used in place to preventDefault() and stopPropagation. Vue.js can also capture key bindings such as v-on:keyup.enter and v-on:keyup.13.

js tutorial about Conditionally Render DOM Elements in Vue.js

Conditionally Render DOM Elements in Vue.js

1:01 js

You can use v-if and v-else to display content based on assertions on your data. Similarly, v-show can be used to render the content, but hide it with css. v-if can also be used on an invisible wrapper <template> element.

js tutorial about Update Attributes, Classes and Styles in Vue.js with v-bind

Update Attributes, Classes and Styles in Vue.js with v-bind

1:17 js

Use v-bind:class and v-bind:style to compute html classes and inline styles from component data. Vue.js will automatically add vendor prefixes when using v-bind:style.

js tutorial about Use Vue.js Watchers to Respond to Async Updates

Use Vue.js Watchers to Respond to Async Updates

0:40 js

Use watchers to keep an eye on your data. Watchers are methods that are invoked when the specified attribute changes. They are useful when you want to perform asynchronous operations in response to changing data.

js tutorial about Use Vue.js Component Computed Properties

Use Vue.js Component Computed Properties

1:12 js

You can add computed properties to a component to calculate a property on the fly. The benefit of this over invoking a method is that computed properties are cached based on their dependencies.

css tutorial about Use Generated Content to Augment Information

Use Generated Content to Augment Information

0:43 css

When you create a pseudo element, you have access to the parent HTML attributes. They can be used inside the content attribute of a pseudo element.

js tutorial about Create a List Component in Vue.js

Create a List Component in Vue.js

2:18 js

In this lesson, we will learn how to iterate over an array in a Vue.js template using the v-for property. We can add to and remove from that list using v-on:click and v-on:keypress.enter.

js tutorial about Create a Basic Component using Vue.js

Create a Basic Component using Vue.js

1:04 js

Vue.js is a "progressive framework for building user interfaces." The core of Vue is focused on the view layer only. It's easy to get started and quick to set up.

In this lesson, we will create a basic Vue component using the new Vue() method and add data properties to show dynamic content in window.

css tutorial about Use CSS Counters to Create Pure CSS Dynamic Lists

Use CSS Counters to Create Pure CSS Dynamic Lists

1:19 css

CSS counters let you create dynamic lists without JavaScript. In this lesson, we will create a multi-level table of contents using the CSS counter-reset and counter-increment properties with the counter attribute.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?