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


  • 0 Comentarios:

    Publicar un comentario

    ACCEDE A CODIGO FUENTE GRATIS

    Compartiendo código a través de una plataforma gratuita, compartiendo proyectos y codigo siempre con el lema de Educar es Compartir.

    Oficina Central

    DIRECCIÓN

    Comercial el Rey, Local B58

    CORREO

    angel@nubeclan.com
    soporte@nubeclan.com

    TELEFONO

    +591 326 4587

    MOVILES

    +591 600 07721

    EDUCAR ES COMPARTIR

    Blog

    GitHub

    REDES SOCIALES

    Facebook

    Twiter

    LinkedIn