Vue.js Crash Course

πŸ––Introduction to Vue.js with Nuxt.js πŸ––

πŸ’₯

What we are going to build

Expectation VS Reality

gangsthub/vue-exercises

Did you install the dependencies?

npm i

About myself

Paul Melero

Front End Developer

Github gangsthub
Twitter @paul_melero
CodeSandBox gangsthub/sandboxes
Erni paul.melero@erni-espana.es

Why Vue.js?

Why a new framework!?

Legacy = 'longer than 1 week'

The big 3

Open Source!

We need frameworks, mainly, because:

  • They help us organize our codebase.
  • They do things cleaner and more elegantly (DOM manipulation, models syncing, validation...).
  • We have better performance.

  • They do automatic tasks for us: compiling, optimization, compression, code-splitting, tree-shaking, SSR...

What is Vue.js?

It is a View focused library for building user interfacesΒ 

πŸŽ₯ Movie Time! 🍿 

Gregg Pollack (Vue Mastery) and Evan You (Creator)

Introduces Single File Components

Not mandatory API, tho

Β 

*html

*js/*ts

*(s)css

What about SC?

MVVM

Virtual DOM

Not to confuse with Shadow DOM

isolated

DOM node

or custom element

Shadow

DOM

CSS

Reactive

Image from docs

"The meat" of a component

Native rendering

With Vue.js (and the power of modern building tools)

  • we have really powerful applications πŸ’ͺ🏽
  • real good, real quick πŸ’ƒπŸΎ
  • that are flexible and performant πŸš€

Personal Statement

  • It super friendly with other libraries.
  • It is ergonomic,
  • easier to learn than others,
  • and to understand.
  • Has a great community.

Differences with other frameworks

Β πŸ‘¨β€πŸ‘§ πŸ‘¨β€πŸ‘§β€πŸ‘¦ πŸ‘¨β€πŸ‘§β€πŸ‘§ πŸ‘©β€πŸ‘¦ πŸ‘©β€πŸ‘¦β€πŸ‘¦

Some numbers πŸ“ˆΒ 

V

R

A

Some numbers πŸ“ˆΒ 

A word about Angular

Simplest Vue.js example

<div id="simplest-example">
  <h1>{{ whatever }}</h1>
</div>

new Vue({
Β  el: '#simplest-example',
Β  data: {
Β  Β  whatever: 'Hello world',
Β  }
})
1
2
3
...
1

2

3

4

5

1 Getting Started - installation

npm install --global vue-cli
>

2 Getting Started - Dev Tool!

3.1 Getting started - Syntax

<div id="app">
  <span
    v-if="seen"
  >Now you see me</span>
</div>
new Vue({
  el: '#app',
  data: {
    seen: true // <----
  }
});

v-if

3.2 Getting started - Syntax

<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
new Vue({
  el: '#app',
  data: {
    todos: [ // <----
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

Loops​

v-for (in)

3.3 Getting started - Syntax

<!-- method handler -->
<button v-on:click="doThis"></button>

<!-- inline statement -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- shorthand -->
<button @click="doThis"></button>

<!-- key modifier using keyAlias -->
<input @keyup.enter="onEnter">
new Vue({
  el: '#app',
  // data: {},
  methods: { // <----
    doThat: function(...args) { /* ... */ }
  }
})

3.4 Getting started - Forms

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
new Vue({
  el: '#app',
  data: {
    message: 'How vuetiful is that!'
  }
})

3.5 Data vs Computed Properties

<div id="app-6">
  <p>{{ message }}</p>
  <p>{{ message.split('').reverse().join('') }}</p>
</div>
new Vue({
  el: '#app',
  data: {
    message: 'I\'m the original message'
  },
  





})
<p>{{ reversedMessage }}</p>
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }

new Vue

            
import Vue from 'vue';
import App from './app';
import router from '@router';
import store from '@state/store';
import 'components/globals.js';

const app = new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')           
        

Organizing Components

Global vs Local

Image from docs

Local

import ComponentA from './ComponentA.vue'
            
export default {
  name: 'parent-component',
  data() {/* ... */},
Β  methods: {/* ... */},
  components: {
    ComponentA
  },
};

Global

Vue.component('my-component', {
Β  data() {/* ... */},
Β  methods: {/* ... */},
Β    // ...
});

// ES6 modules

Intro to Nuxt.js

Features

  • Write Vue Files (*.vue)
  • Automatic Code Splitting
  • Server-Side Rendering
  • Powerful Routing System with Asynchronous Data
  • Static File Serving
  • ES6/ES7 Transpilation
  • Bundling and minifying of your JS & CSS
  • Managing <head> element (<title>, <meta>, etc.)
  • Hot module replacement in Development
  • Pre-processor: Sass, Less, Stylus, etc.
  • HTTP/2 push headers ready
  • Extending with Modular architecture

Scaffolding πŸš€

  • nuxt-community/adonuxt
  • nuxt-community/starter
  • nuxt-community/express
  • nuxt-community/koa
  • nuxt-community/electron
  • nuxt-community/pwa
  • nuxt-community/typescript
  • nuxt-community/content
  • nuxt-community/nuxtent-template
  • ...

Vue.js Links

Thank you very much!

πŸ––πŸ’•πŸ’•πŸ’•πŸ’•πŸ––

Vue.js Introduction Workshop (Development Day version)

By Paul Melero

Vue.js Introduction Workshop (Development Day version)

The exercises that goes with the talk: https://github.com/gangsthub/vue-exercises

  • 99
Loading comments...

More from Paul Melero