The Progressive JavaScript Framework.
Pagina oficial: vuejs.org doc en español
Mi presentación online vuejs-talk-2017
Video de la charla en EmprenDevs
Creado por Evan You, cuando estaba trabajando en Google Creative Labs.
Evan You:
"I figured, what if I could just extract the part that I really liked about Angular and bulid something really lightweight without all the extra concepts involved?"
- Es un Framework JavaScript código abierto para construir interfaces de usuario
- Enfocado en el patron MV-viewModel
- Posee conceptos de Angular y React
- Con menor complejidad
- Primer lanzamiento en 2014, la v2 en abril del 2016
Fuente timqian.com/star-history npmtrends Github Trending
Progresivo.
Renderizado declarativo.
Reactivo.
Componente functional.
<body>
<div id="app">
<h1>{{ message }}</h1>
<input v-model="message">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Welcome to your Vue.js app!'
}
})
</script>
<body>Vue.component('hello-component', {
template: '#hello',
data: function () {
return {
message: 'Welcome to your Vue.js app!'
}
}
});<template id="hello">
<div>
<h1>{{ message }}</h1>
<input v-model="message">
</div>
</template><body>
<div id="app">
<hello-component></hello-component>
</div>
</body><template id="hello">
<div>
<h1>{{ message }}</h1>
<button v-on:click="change('message')">change</button>
</div>
</template>Vue.component('hello-component', {
template: '#hello',
data: function () {
return { message: 'Welcome to your Vue.js app!' }
},
methods: {
change: function(value) {
this.message = "new " + value;
}
}
});Eventos click
<button v-on:click="message = 'yo'">Change message</button>
<button @click="message = 'yo'">Change message</button>Eventos para teclas
<input v-on:keyup.enter="submit()">
<input @keyup.alt.67="clear()">
<div @click.ctrl="doSomething()">Do something</div>El evento submit no recargara la pagina.
<form v-on:submit.prevent="onSubmit()"></form><template id="hello">
<div>
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</template>Vue.component('hello-component', {
template: '#hello',
data: function () {
return { message: 'Welcome to your Vue.js app!' }
},
methods: { /* ... */ },
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
});
Usar los eventos en nuestro componente
Vue.component('hello-component', {
template: '#hello',
data: function () {
return { message: 'Welcome to your Vue.js app!' }
},
methods: { /* ... */ },
computed: { /* ... */ },
beforeCreate: function(){ /* ... */ },
created: function(){ /* ... */ },
beforeMount: function(){ /* ... */ },
mounted: function(){ /* ... */ }
beforeUpdate: function(){ /* ... */ },
updated: function(){ /* ... */ }
});Directivas de control de flujo
<p v-if="Math.random() > 0.5"> Mayor </p>
<p v-else> Menor </p><div v-show="Math.random() > 0.5">
<p> Math.random() Mayor que 0.5</p>
</div><ul>
<li v-for="item in items">
{{ item.message }}
</li>
<li v-for="(item, index) in items">
{{ parentMessage +" - "+ index +" - "+ item.message }}
</li>
</ul><div v-for="(value, key) in object">
{{ key + ": " + value }}
</div>Atributos vinculados HTML
<img src="{{ imgURL }}">
<img v-bind:src="imgURL">o sintaxis abreviada :
<img :src="imgURL">Directivas personalizadas
<input v-focus>// Register a global custom directive called v-focus
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
})Podemos declara directivas locales para cada componente.
Filtros
<p>{{ message | capitalize }}</p>Vue.filter('capitalize', function (value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
});Plugin de Filter
Comunicación entre padres e hijos.
Eventos Personalizados
<template id="parent">
<child v-bind:clicks="count" v-on:count="mParent"></child>
<child :clicks="count" @count="mParent"></child>
</template>Vue.component('parent', {
template: '#parent',
data: function () { return { count: 0 } },
methods: {
mParent: function (value) { this.count += value; }
}
});
Vue.component('child', {
props: ['clicks'],
template: '<button @click="mChild">{{clicks}}</button>',
methods: {
mChild: function () { this.$emit('count', 5); }
}
});Comunicación entre componentes sin parentesco
var bus = new Vue()
// in component A's method
bus.$emit('id-selected', 1)
// in component B's created hook
bus.$on('id-selected', function (id) {
// ...
})Slots
<div id="app">
<h1>el título de padre</h1>
<mi-component>
<h3>Titulo</h3>
<p> Se mostrará dentro de Slot </p>
</mi-component>
</div><template id="mi-component">
<h2>el título del hijo</h2>
<slot>
Esto sólo se mostrará si no hay contenido
</slot>
</template>Para la base del proyecto con webpack completo
npm install --global vue-cli
vue init webpack my-project
cd my-project
npm install
npm run devPara un proyecto simple
npm install --global vue-cli
vue init simple my-project
cd my-project
npm install
npm run devRecomendación para persona que recién inician en este mundo del front-end usar la plantilla vue init simple my-project y si tienes algún conocimiento básico de npm y webpack vue init webpack-simple my-project
Muy útil para entender como esta armada nuestra pag. y la estructura de nuestros componentes
Es un xml con tres partes, estructura de la vista, modela y lógica, estilos de la vista.
Lista de plugins oficiales
var Vuex = require('vuex');
Vue.use(Vuex);Merece un análisis aparte, la idea es que al tener muchos componentes que requieran tener la misma información se usa un lugar común para que acedan, state
en el video de la charla esta mejor explicado
