L. Catalina Meneses
Software Developer at Ubidots Internet of Things. Co-organizer of @pionerasdev / Making history with {code} 👩💻
VueJS
@kath_code
(pronounced /vjuː/, like view)
Pronunciación
Evan you - @youyuxi
Creador
- Vue.js es un conjunto de utilidades para crear componentes reactivos re-utilizables para la Web.
- Es realmente sencillo de utilizar y muy rápido a la hora de renderizar su resultado.
- Permite asociar una fuente de datos a un componente y que ambas partes.
Que es ?
Renderizado condicional
Conditional: v-else
<p v-if="variable_seen">Se mostrará este contenido.</p>
var app3 = new Vue({
el: '#app-3',
data: {
variable_seen: true
}
})<p v-else="variable_seen">No se mostrará</p>
Conditional: v-if
<li v-for="tutorial in tutorials">
{{ tutorial.name }}
<li>Renderizado de listas
Loop: v-for
var app4 = new Vue({
el: '#app-4',
data: {
tutorial: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})<button v-on:click="reverseMessage">Reverse Message</button>Eventos, métodos
Event listener: v-on
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})Data binding
Data binding: v-model
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
Componentes
<div id="example">
<my-component></my-component>
</div>// register
Vue.component('my-component', {
template: '<div>Soy un componente!</div>'
})
// create a root instance
new Vue({
el: '#example'
})<div id="example">
<div>A custom component!</div>
</div>Renderizará:
Getting started
<div id="app">
{{ message }}
</div>HTML
Javascript
var app = new Vue({
el: '#app',
data: {
message: 'Hello PionerasDev!'
}
})Resultado
Hello PionerasDev!
1.Instalación
2.Agregar vue
3. Conectar con la API
4. Lista de albunes
5. Filtros en la una lista de albunes
Vue.JS
By L. Catalina Meneses
Vue.JS
Vuejs
