Vue.js es un framework de JavaScript
nuevo, si lo comparamos con otros frameworks como Backbone o Ember.
Sin embargo, su facilidad de aprendizaje y uso con
respecto a otros frameworks y libraries como ReactJS, su rendimiento comparado
con AngularJS y la facilidad para usarlo y adaptarlo a proyectos tanto grandes
como pequeños, ha hecho que Vue gane cada vez más popularidad.
Objetos especiales
vm: el objeto que representa la instancia de Vue.
key: propiedad
que identificará como único a un elemento para ser reutilizado por Vue
$data: variable
que contiene el modelo de la instancia Vue en el objeto vm.
$event: variable
que representa el evento cuando se ejecuta en la instancia Vue en el objeto vm.
$store: variable
que representa el estado de la aplicación cuando se usa Vuex en Vue.
$route: variable
que representa el objeto de rutas de la aplicación cuando se usa Vue Router en
Vue.
template: etiqueta
HTML que mantiene el contenido del lado del cliente que no se renderiza cuando
se carga una página, pero que posteriormente puede ser instanciado durante el
tiempo de ejecución empleando JavaScript.
Directivas
Atributos especiales que nos permiten realizar cambios
reactivos en el DOM.
v-model: enlaza
los datos a través de la propiedad data .
v-bind: añadir
o remover atributos ( atajo : ).
v-show: permite
mostrar u ocultar contenido del DOM sin eliminarlo del mismo, no funciona con
la etiqueta template.
v-if, v-else-if,
v-else: condicionales.
v-for: ciclos,
se puede usar el operador in u of indistintamente.
v-on: manejar
eventos ( atajo @ ).
v-once: evita
la reactividad en un elemento, lo vuelve estático.
v-text: muestra
contenido textual dentro de un elemento, NO acepta código HTML.
v-html: muestra
contenido textual dentro de un elemento, SÍ acepta código HTML.
v-pre: ignora las expresiones Vue del elemento,
evitando la compilación reactiva del mismo.
Interpolaciones
- Enlazan de
datos entre Vue.js y el DOM. Se requiere el uso de las dobles llaves
{{ propiedad }}
- Podemos
hacer operaciones aritméticas
{{ 19 + 7 }}
- Podemos
concatenar
Hola, {{ propiedad + ':)' }}
- Podemos
hacer expresiones de una sola línea
{{ propiedad ? true : false }}
0 Comentarios:
Publicar un comentario