Vue.JS
Lucas Macedo
@luuckymacedo
github.com/lucassmacedo
Back-End Developer
ADS Unicesumar
Lib/Framework JS
Reativo
Desenvolvimento de Componentes e Spa`s.
Framework Progressivo
<script src="https://unpkg.com/vue">
npm install vue
import Vue from 'vue'
# instala o vue-cli globalmente
npm install -g vue-cli
# cria um novo projeto com o template NUXT "nuxt-community/starter-template"
vue init nuxt-community/starter-template femug-mga-nuxt
? Project name (femug-mga-nuxt)
? Project description (Nuxt.js project)
? Author (Lucas Macedo <luuckymacedo@gmail.com>)
vue-cli · Generated "femug-mga-nuxt".
To get started:
cd femug-mga-nuxt
npm install # Or yarn
npm run dev
Install with vue-cli
npm install --save nuxt
Install manually
{
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}
Capacidade de resposta automática e otimizada
Virtual DOM
Basicamente é observar um objeto javascript e refletir suas alterações no DOM do html.
Elemento renderizado pelo Javascriot
Templates, JSX, Hyperscript
Routing
State Management
<ul>
<li v-for="task of tasks">
<span>{{ task.text }}</span>
<a v-on:click="removeTask(task)">Delete</a>
</li>
</ul>
{
render (h) {
return <ul>
{tasks.map(task => <li>
<span>{task.text}</span>
<a onClick={removeTask(task)}>Delete</a>
</li>)}
</ul>
}
}
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '*', component: NotFound },
]
https://github.com/vuejs/vuex
Em menos de 30kb min+gzip
vue+vue-router+vuex = 28.11kb
jQuery = 29.41kb
angular2 hello world + tree shaking = ~50kb
em 2012
Primeira versão publicada
v 1.0
v 2.0
65.000 stars GitHub
55.000.000 downloads npm
30 000 000 visitas no site oficial
84 000 usuários devtools
@luuckymacedo
@vuejs
vuejs.org
vuejs.org/guide
vuejs.org/api
github.com/vuejs/awesome-vue
github.com/vuejs/vuex
github.com/vuejs/vue-router
forum.vuejs.org
gitter.im/vuejs/vue
vuejobs.com
vueslack.com