Binding Content to a Template

Binding Text

• Semantic Binding 1
• Semantic Binding 2
• Semantic Binding 3
• Semantic Binding 4
• Declarative Binding (property not found)
• One-Time Bindings

Binding HTML

• Default HTML Rendering
• Using v-html
• Attempting nested bindings

Binding to HTML Attributes

Binding to CSS Classes

• Binding to CSS Properties
• Binding to CSS Classes
• Getting CSS Classes from an Array
• Getting CSS Classes from an Object

Using Input Bindings

Binding to Text Fields

• Binding to a "text" input field.
• Binding to a textarea field.
• Text field bindings with different input types.

Binding to Checkboxes

• Binding to a "checkbox" input field.
• Binding to a checkbox list.

Binding to Radio Buttons

• Binding to radio buttons.

Using Input Bindings

• Binding to Radio Buttons
• Binding to Drop-Down Lists

Modifying Bound Values

• Modifying Bound Values
• Trimming String Values
• Converting Values to Numbers

Lazily Binding Values

• The default binding approach (input event)
• The lazy binding approach (change event)

Using Event Handlers

Attaching to Events

• Attaching to an Event

Defining an Event Handler

• Defining an Event Handler

Examining the Event

• Examining the Event

Passing Parameters with Inline Statements

• Passing a string with an inline statement
• Passing a Number with an inline statement
• Passing a Date with an inline statement
• Passing an Object with an inline statement

Altering Events

Understanding Event Propagation

• Demo
• Using the Capture Modifier
• Mixing Capturing and Bubbling
• Using the Prevent Modifier
• Using the Prevent Modifier on an Ancestor
• Using the Stop Modifier
• Using the Stop Modifier on an Ancestor
• Using the Self Modifier
• Using the Self Modifier on an Ancestor
• Using the Once Modifier
• Once Modifier Event Propagation
• Comparing Event Modifiers
• Chaining Event Modifiers Together

Reacting to Keyed Events

• Demo
• Using the enter modifier
• Using Custom Modifiers

Reacting to Mouse Events

• All mouse modifiers in one example

Reacting to the Left Mouse Button

• An example with the onmousedown event
• An example with the onclick event

Reacting to the Middle Mouse Button

• An example with the onmousedown event

Reacting to the Right Mouse Button

• An example with the onmousedown event
• An example with the click and contextmenu events
• A custom context menu

Reacting to Special Keys

• Demo

Rendering Elements Conditionally

On Load

• simulation with poor load time
• v-cloak in action

At Runtime

• if-else directives
• v-show directive

Comparing v-if And v-show

• Using v-if and v-show together

Rendering Lists of Items

Looping a Specific Number of Times

• example 01
• floating-point number test
• using of in a v-for

Traversing Object Properties

• getting property values
• getting property keys
• getting property index

Iterating through Arrays

• iterating through an array of values
• iterating through an array of objects
• getting the index of an array object
• iterating through an array of arrays

using-v-for-and-v-if-together

• using v-for and v-if together

Detecting Array Changes

Changing an Array

sort

• Sorting an array of strings
• Sorting an array of numbers

reverse

• Reversing a sorted Array
• Reversing an unsorted Array

Pushing and Popping Array Items

• Push items onto an Array
• Pop items off an Array

Using the Shift and Unshift Functions

• Unshift items onto an Array
• Shift items off an Array

Splicing an Array

• Removing a specific number of items with splice
• Removing remaining items with splice
• Inserting items with splice

Updating an Array

• Updating an array item
• Updating an array item with splice

• lifecycle of watchers, computed properties, and filters.

Monitoring Changes with Watchers

Introduction

• Using watched property
• Using watched property with a reference

Defining a Watcher's Behavior

• Introductory example
• Simplified example
• Getting before and after values

Defining a Watcher's Depth

• Example

Faster Rendering with Computed Properties

• Initializing a computed property
• Adding a getter
• Adding a setter
• Auto generation

Formatting with Filters

• using a filter
• passing a parameter to a filter
• programmatically calling filters
• chaining filters together
• comparing methods and filters