Getting Started with Vue!

What is Vue?

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.

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 06

Handling Events

Listening to an Event

v-on

LAB 08

Processing Forms

2-way data-binding

v-model

LAB 09

Lifecycle Events