From jQuery to Vue

JavaScript

Chris Sevilleja

Developer Dude

Scotch.io

@chrisoncode

Ado Kukic

Developer Evangelist

Auth0

@kukicado

What is Vue?

Progressive JavaScript Library

Why use Vue?

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

Less

More

JavaScript Framework Land

/Library

Progressive?

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

LAB

Hello World

Load the Vue Script

1

Create a Vue Instance

2

Create and Show Data

3

{{ }}

Attributes

v-bind

Listen and Act on Events

4

v-on

What is a JS App?

Define

Show

Listen

Vue is Easy!

An Easy Jump

Coming from Vanilla JavaScript

Current State of JS

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

FEATURE 1

Random Gif

🤞 Please be safe for work 🤞

FEATURE 2

Trending Gifs

FEATURE 2

Searching Gifs

Thanks!

Chris Sevilleja

@chrisoncode

Holly Lloyd

@hollylawly

Nick Cerminara

@whatnicktweets

Ado Kukic

@kukicado

Coming Soon

Scotch Swag Giveaway!

bit.ly/scotch-swag

Vue Basics

The Vue Instance

The Root of All Vue

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

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

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

Defining Data


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

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

Listening to an Event

v-on

LAB 03

Template Basics

Attributes

v-bind

Directives

v-if

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

LAB 04

Template Lists

Looping

v-for

LAB 05

Styles and CSS

LAB 06

Handling Events

LAB 08

Processing Forms

2-way data-binding

v-model

*magic!*

LAB 09

Lifecycle Events

LAB 10

Getting Real Data

LAB 11

Components

LAB 14

Next Steps

From jQuery to Vue

By Chris Sevilleja

Made with Slides.com

From jQuery to Vue

  • 1,124

More from Chris Sevilleja