Vue.js 2 Academy: Learn Vue Step by Step

Chris Dixon, Web Developer & Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
82 Videos (7h 24m)
    • Welcome

      2:47
    • What is Vue & why should I learn it?

      2:04
    • Visual studio installation

      1:51
    • Section Intro: Vue Basics

      0:30
    • Download project starter

      2:32
    • Installing Vue.js

      3:05
    • The Vue instance & the data object

      7:28
    • Templates & the virtual DOM

      3:31
    • Two way data binding with v-model

      3:08
    • Event handling & methods

      5:46
    • List rendering

      2:54
    • Conditional rendering in Vue

      5:19
    • Binding elements to attributes

      4:11
    • Binding styles

      4:48
    • Vue shorthand syntax

      2:42
    • Outputting text & HTML

      6:25
    • V-if vs v-show

      3:10
    • Using Javascript expressions

      4:22
    • Section Outro: Vue Basics

      0:32
    • Section Intro: A Deeper Look At Vue

      0:39
    • Adding a progress bar

      7:46
    • Computed properties

      8:57
    • Watchers

      3:50
    • Key events & modifiers

      3:21
    • Filters

      6:08
    • More on looping: keys & index numbers

      5:27
    • Using multiple Vue instances

      6:25
    • Looping with objects

      6:56
    • Adding our navigation links & keys

      6:16
    • Accessing Vue instances externally

      4:32
    • Vue instance properties & methods

      4:50
    • Referencing elements with ref

      4:45
    • Using string templates

      7:06
    • The Vue lifecycle

      5:40
    • Vue lifecycle hooks in action

      6:51
    • Section Outro: A Deeper Look At Vue

      0:39
    • Section intro: Build tools & Workflow

      0:37
    • Installing Node & NPM

      4:08
    • Scaffolding projects with the vue-cli

      8:06
    • Exploring our project layout and build tools

      9:26
    • Using the data object with single file templates

      7:49
    • Section outro: Build tools & Workflow

      0:19
    • What are components?

      5:07
    • Registering global components

      10:57
    • Registering local components

      5:26
    • Creating single file components

      8:37
    • Adding the card front component

      9:07
    • Emit data to parent components

      9:21
    • Dynamic components

      2:49
    • Creating the additional card components

      5:53
    • Creating the text input component

      9:40
    • Receiving data from the text input

      4:38
    • Creating the text output component

      3:38
    • Passing data with props

      5:37
    • Keeping components alive

      2:26
    • Scoping CSS styles

      7:40
    • Prop validation

      5:01
    • Passing prop data to a style object

      3:19
    • Introduction to slots

      9:38
    • Slot scope & fallback content

      4:57
    • Named slots

      3:30
    • Setting up Firebase

      6:55
    • Creating the ImageUpload component

      6:40
    • Uploading images to Firebase

      9:44
    • Image preview thumbnail

      4:11
    • Upload progress bar & $emit file data

      8:54
    • Image output component

      9:09
    • Downloading images from Firebase

      6:15
    • Set image button

      7:20
    • Text options menu: font sizes

      8:00
    • Text options menu: text alignment

      5:03
    • Text options menu: font style & weight

      9:56
    • Remove image button

      4:21
    • Passing data with callbacks

      6:40
    • Making images draggable

      5:48
    • Finishing the CardInsideLeft component

      4:50
    • Finishing the CardInsideRight component

      2:48
    • Finishing the CardBack component

      3:39
    • Introduction to the event bus

      7:26
    • Sending events to the event bus

      6:51
    • Receiving events from the event bus

      13:05
    • Thank you

      1:33