Vue

Scaffold Shelf with create-vue, learn the anatomy of a .vue file, register components, and wire them together with props going down and events going up.

1. create-vue — Your First Project12 min
2. Single File Components13 min
3. Registering Components11 min
4. Props — Data Flowing Down14 min
5. Events — Messages Flowing Up14 min

Show values with double curly braces, render trusted HTML with v-html, bind attributes, classes and styles with v-bind, and see where unclaimed attributes land on a component.

1. Text Interpolation11 min
2. v-html — Rendering Raw HTML11 min
3. v-bind — Attributes, Classes and Styles14 min
4. Attribute Inheritance14 min

Read the Options API you will meet in older code, then write the Composition API with script setup, ref and reactive, and derive values with computed.

1. The Options API12 min
2. The Composition API and script setup13 min
3. ref and reactive14 min
4. Computed Properties14 min

Choose between v-if and v-show, render lists with v-for and a proper key, handle events with v-on, and trim handler code with event and key modifiers.

1. Conditional Rendering — v-if and v-show13 min
2. Rendering Lists with v-for14 min
3. v-on — Inline and Method Handlers13 min
4. Event and Key Modifiers13 min

Learn the order a component is created, mounted, updated and removed, run setup work in onMounted, clean up in onUnmounted, and react to changes with watch.

1. The Lifecycle and onMounted13 min
2. Updates and Cleanup13 min
3. Watchers14 min

Bind text boxes, checkboxes, radios and selects with v-model, clean input with modifiers, and give your own components v-model support with defineModel.

1. v-model on Text Inputs12 min
2. Checkboxes, Radios and Selects14 min
3. v-model Modifiers11 min
4. v-model on Your Own Components14 min