Getting Started with Vue!

What is Vue?

Progressive JavaScript Library

Why use Vue?

  • Simplicity
  • Easy to jump from HTML/CSS/JS
  • Incrementally adoptable (progressive)
  • Super fast
  • Lightweight (20kb)
  • Data manipulation (MVVM)

Progressive?

  • Start with view engine
  • Add routing
  • Add CLI
  • Add state management
  • Add unit testing
  • Create full SPA

Freedom of Choice

LAB 01

Hello World

Download Starter Files
github.com/scotch-io/vue-starter-course

Ways to Use Vue

  • <script>
  • Vue CLI (Basic)
  • Vue CLI (Advanced w/ webpack)

Our Tools

Ways to Code

  • CodePen
  • Local Editor (VS Code / Sublime)

Optional Tools: lite-server

Automatically reload browser on save.

# node and npm required
# nodejs.org

# install lite-server
npm install -g lite-server

Our Learning Approach

Beginner's Approach

Coming from Vanilla JavaScript

First JS Framework

Current State of JS

  • Node and npm
  • Packages galore
  • ES6
  • Transpilers
  • Module loaders
  • Task runners

Less

More

JavaScript Framework Land

Why use Vue?

  • Simplicity
  • Easy to jump from HTML/CSS/JS
  • Incrementally adoptable (progressive)
  • Super fast
  • Lightweight (20kb)

What is a JS App?

Define

Show

Listen

Plain JS vs Vue

LAB 02

Vue Basics

The Vue Instance

The Root of All Vue

var app = new Vue({
    el: '#app'
});

Workng with Data


var app = new Vue({
    el: '#app',

    data: {
        myVariableOne: 'something cool',
        myVariableTwo: 'something even cooler'
    }
});

Defining Data

Handling Events


var app = new Vue({
    el: '#app',

    data: {
        myVariableOne: 'something cool',
        myVariableTwo: 'something even cooler'
    },
    
    methods: {
        celebrate: function () {
            alert('CELEBRATING!');
        }
    }
});

LAB 03

Template Basics

{{ }}

Attributes

v-bind

Directives

v-if

LAB 04

Template Lists

Looping

v-for

LAB 05

Styles and CSS

LAB 06

Handling Events

Listening to an Event

v-on

LAB 08

Processing Forms

2-way data-binding

v-model

*magic!*

LAB 09

Lifecycle Events

LAB 10

Getting Real Data

LAB 11

Components

Next Steps

Vue CLI

We're Vue Pros Now!

  • Templating
    • Interpolation
    • Event Listening
    • Attribute Bindings
  • Binding Data with v-model
  • Lifecycle Hooks
  • Components
    • Global vs Local Registration
    • Organization
  • Vue CLI

Next Courses

  • Routing
  • Forms and Validation
  • Mixins
  • CLI
  • State management (vuex)
  • Server-side rendering
  • Build more real apps
Made with Slides.com