Conceptos básicos de VueJS


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 }}

Comentarios