Introdução ao VueJS2

Em um mar de Frameworks...

Vue.JS

O QUE É?

Lib/Framework JS

Reativo

Desenvolvimento de Componentes e Spa`s.

Versátil & acessível

Framework Progressivo

Adequado para iniciantes

Produtivo para os mais experientes

<script src="https://unpkg.com/vue">

npm install vue

import Vue from 'vue'

vue-cli

# instala o vue-cli globalmente
npm install -g vue-cli

# cria um novo projeto com o template "webpack"
vue init webpack-simple my-app

# instala as dependências e executa!

cd my-app

npm install

npm run dev

Rápido

Capacidade de resposta automática e otimizada

Virtual DOM

Reatividade

Basicamente é observar um objeto javascript e refletir suas alterações no DOM do html.

Virtual DOM

O DOM também pode ser representado como uma estrutura de dados em Javascript.

Exemplo V.D

Elemento renderizado pelo Javascriot

Completo & flexível

Templates, JSX, Hyperscript

Routing

State Management

Templates

<ul>
  <li v-for="task of tasks">
    <span>{{ task.text }}</span>
    <a v-on:click="removeTask(task)">Delete</a>
  </li>
</ul>

JSX

{
  render (h) {
    return <ul>
      {tasks.map(task => <li>
        <span>{task.text}</span>
        <a onClick={removeTask(task)}>Delete</a>
      </li>)}
    </ul>
  }
}

Routing

const routes = [
  { path: '/',      component: Home },
  { path: '/about', component: About },
  { path: '*',      component: NotFound },
]

State management

devtools

.vue

Tudo isso..

Em menos de 30kb min+gzip

vue+vue-router+vuex = 28.11kb

jQuery = 29.41kb

angular2 hello world + tree shaking = ~50kb

Um projeto

Open Source

Criado por Evan You

em 2012

Fevereiro 2014

Primeira versão publicada

Outubro 2015

v 1.0

Setembro 2016

v 2.0

O que há de novo

Na versão 2.x

Performances

Um projeto em andamento

65.000 stars GitHub

55.000.000 downloads npm

30 000 000 visitas no site oficial

84 000 usuários devtools

patreon.com/evanyou

Thanks !

@luuckymacedo

Links

@vuejs

vuejs.org

vuejs.org/guide

vuejs.org/api

github.com/vuejs/awesome-vue

forum.vuejs.org

vuejobs.com