Getting Started
  • Course Introduction
  • Let's Create our First VueJS Application
  • Extending the VueJS Application
  • Course Structure
  • Take Advantage of all Course Resources!
  • Setup VueJS Locally
  • Module Resources & Useful Links
Using VueJS to Interact with the DOM
  • Module Introduction
  • Understanding VueJS Templates
  • How the VueJS Template Syntax and Instance Work Together
  • Accessing Data in the Vue Instance
  • Binding to Attributes
  • Understanding and Using Directives
  • Disable Re-Rendering with v-once
  • How to Output Raw HTML
  • Optional: Assignment Starting Code
  • Time to Practice - Outputting Data to Templates
  • Listening to Events
  • Getting Event Data from the Event Object
  • Passing your own Arguments with Events
  • Modifying an Event - with Event Modifiers
  • Listening to Keyboard Events
  • Time to Practice - Events
  • Writing JavaScript Code in the Templates
  • Using Two-Way-Binding
  • Reacting to Changes with Computed Properties
  • An Alternative to Computed Properties: Watching for Changes
  • Saving Time with Shorthands
  • Time to Practice - Reactive Properties
  • Dynamic Styling with CSS Classes - Basics
  • Dynamic Styling with CSS Classes - Using Objects
  • Dynamic Styling with CSS Classes - Using Names
  • Setting Styles Dynamically (without CSS Classes)
  • Styling Elements with the Array Syntax
  • Time to Practice - Styling
  • Module Wrap Up
  • Module Resources & Useful Links
Using Conditionals and Rendering Lists
  • Module Introduction
  • Conditional Rendering with v-if
  • v-else-if in Vue.js 2.1
  • Using an Alternative v-if Syntax
  • Don't Detach it with v-show
  • Rendering Lists with v-for
  • Getting the Current Index
  • Using an Alternative v-for Syntax
  • Looping through Objects
  • Looping through a List of Numbers
  • Keeping Track of Elements when using v-for
  • Time to Practice - Conditionals & Lists
  • Module Wrap Up
  • Module Resources & Useful Links
First Course Project - The Monster Slayer
  • Introduction & Challenge
  • Setting up the Course Project
  • Creating the Vue Instance and Styling the Healthbars
  • Showing the Player Controls Conditionally
  • Implementing a "Start Game" Method
  • Implementing a "Attack" Method
  • Write better Code - Time for Refactoring!
  • Implementing a "Special Attack"
  • Implementing a "Heal" Method
  • Finishing the Action Buttons
  • Creating an Action Log
  • Printing the Log (v-for)
  • Finishing the Log
  • Styling the Log Conditionally
  • Wrap Up
  • Full Application Code
Understanding the VueJS Instance
  • Module Introduction
  • Some Basics about the VueJS Instance
  • Using Multiple Vue Instances
  • Accessing the Vue Instance from Outside
  • How VueJS manages your Data and Methods
  • A Closer Look at $el and $data
  • Placing $refs and Using them on your Templates
  • Where to learn more about the Vue API
  • Mounting a Template
  • Using Components
  • Limitations of some Templates
  • How VueJS Updates the DOM
  • The VueJS Instance Lifecycle
  • The VueJS Instance Lifecycle in Practice
  • Module Wrap Up
  • Module Resources & Useful Links
Moving to a "Real" Development Workflow with Webpack and Vue CLI
  • Module Introduction
  • Why do we need a Development Server?
  • What does "Development Workflow" mean?
  • Using the Vue CLI to create Projects
  • Installing the Vue CLI and Creating a new Project
  • An Overview over the Webpack Template Folder Structure
  • Understanding ".vue" Files
  • Understanding the Object in the Vue File
  • How to Build your App for Production
  • Module Wrap Up
  • More about ".vue" Files and the CLI