¿Que es vuejs?
Vue es un framewoek progresivo para la creación de interfaces de usuario. Vue se centra sólo en la capa de vista y es muy fácil de captar e integrar con otras bibliotecas o proyectos existentes.
¿Por qué Vue?
Por la facilidad de aprender, es muy ligero.
Instalación
Existen varias formas de instalar vuejs.
Jugando con Vue.js
Cabe mencionar que es reactivo (Two Way Data ), si cambias desde la vista la variable message en el modelo “data” tambien cambia.
Si abrimos la consola y tecleamos app.message = “Hola, vuejs” cambiará lo que ve en message por el nuevo texto
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hola, sucodigo.com'
}
})
El resultado es Hola, sucodigo.com
<div id="app">
<p v-if="seen">Ahora me puedes ver!</p>
</div>
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
El resultado es ver o no el mensaje ‘Ahora me puedes ver!’, en este caso como esta declarado en true, si se ve el mensaje.
<div id="app">
<h3>Tareas:</h3>
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app = new Vue({
el: '#app',
data: {
todos: [
{ text: 'Aprender Vue.js' },
{ text: 'Ser programador' },
{ text: 'Visitar sucodigo.com' }
]
}
})
El resultado es una lista de Tareas.
Tareas:
Aprender Vue.js
Ser programador
Visitar sucodigo.com
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Bienvenido a sucodigo.com!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
El resultado es que al hacer clic en el boton el mensaje Bienvenido a sucodigo.com
cambia de orden.
La caracteristica más importante de Vuejs es que se pueden hacer componentes, en el proximo post hare un editor de markdown para ver como trabajar con componentes.
Si quieres aprender màs de Vuejs, busca en youtube, hay muchos videos y la documentación es muy buena.