{{message}}

Usando la directiva personalizada v-color:arg!

Directivas personalizadas III Directivas personalizadas III UTILIZANDO MODIFICADORES En este nuevo ejercicio utilizaremos más propiedades de las directivas, hasta hora hemos visto como crear una directiva que cambia el color de un texto. Una muy simple con un comportamiento estático modificando el estilo del texto y otra un poco más avanzada en la que introducimos un parámetro. En esta ocasión introduciremos el uso de los modificadores, que son simplemente nuevos decoradores que se le pueden añadir o no a la directiva. Volviendo a las modificaciones de estilo de los textos, un buen ejemplo sería decidir el formato en función de ciertos modificadores. Para ello crearemos la directiva v-format que podrá recibir diferentes modificadores que cambien el estilo del texto del elemento. Los modificadores se declaran a partir de un punto y seguido al nombre de la directiva u otro modificador. Este podría ser un ejemplo de declaración:

{{message}}

Directivas personalizadas IV Directivas personalizadas IV DIRECTIVAS EN LA INSTANCIA Hasta ahora hemos visto cómo crear y declarar nuestras directivas personalizadas de forma global pero en este ejercicio podremos ver cómo se definen de forma local dentro de una instancia o componente Vue. Para ello simplemente tendremos que ir al código javascript de nuestra instancia y añadir un nuevo objeto directives con una sintaxis ligeramente diferente a la que hemos visto hasta ahora. En este ejemplo condensaremos varias de las directivas de los ejercicios anteriores añadiéndolas en este apartado con sus correspondientes funciones. En la declaración no cambia nada:

{{message}}

Componente

Componente parametrizables

Componente Tipo Propiedades

Cambiar valor de props

Reactividad Data

Reactividad NextTick

Directiva v-show vs v-if

Bucle v-for y key

Bucle atributos y rango

Peticiones Fetch

Contexto This

Promesas

Conjunto de Promesas

Inline templates

Slots

Transiciones/Animaciones I

Transiciones/Animaciones II

Instalación NodeJs

Nuevo proyecto con Vue CLI 3

Estructura del proyecto

Compilar en desarrollo y producción

Variables de entorno y ejecución

CLI Service scripts y servidor http

Componente – App, Librería y WC

Despliegue en Servidor de Aplicaciones

Instalación Vue Router y Modos

Carga óptima de Ruta y navegación

Rutas dinámicas

Rutas anidadas

Navegación desde código

Protección global de rutas

Protección en ruta y componente

Vuetify Diseño menú lateral

V-Toolbar y rutas de navegación

Crear Tablas

Selección de filas en tabla

Comunicación Hijo a Padre y Snackbar

Diseñar y visualizar ficha

Vuex, primeros pasos

Vuex – Getters

Vuex – Mutaciones

Vuex – Acciones

Vuex – Módulos

Vuex Plugin Logger

Vuex – Persistencia estados al refrescar

Vuex – Persistencia en Cookies

Vuex – Subscriptores

Axios – Comunicación con Servidor

Axios – Cancelar solicitud

Axios – Interceptor de solicitudes

Axios – Interceptor Respuestas

Axios – Post

Axios – PUT

Axios – Delete

Comunicación – Padre – Hijo

Comunicación – Hijo – Padre

Comunicación – Hijo – Padre por Callback

Comunicación – Entre hermanos

Comunicación – Bus de eventos

Comunicación – Mensajería Global

Comunicación bidireccional

Formulario – Campo Texto

Formularios – Email con validación

Formularios – Fechas moment

Formularios – Opciones Checkbox

Formularios – Opción única Radiobutton

Formularios – Combobox

Formularios – Campo Personalizado

Formularios – Validación Vuelidate

Formularios – Validación personalizada

Pruebas Unitarias – Jest

Pruebas Unitarias – Creación

Pruebas Unitarias – Props

Pruebas Unitarias – Aislar componentes

Pruebas Unitarias – Mock de Vuex

Pruebas Unitarias – Router

Pruebas desde UI

¡Bienvenidos a Vue, queridos lectores! En este ejercicio veremos cómo empezar a trabajar con Vue con el mínimo esfuerzo, pero en primer lugar daremos algunas pinceladas sobre Vue.

¿Qué es Vue? Vue es un framework progresivo para construir interfaces de usuario [1].

¿Qué significa progresivo? Simplemente que está modularizado de manera que su librería principal está enfocada solo a la parte visual y, usándola en conjunto con otras librerías o proyectos, puede construir fantásticas aplicaciones web SPA. Esto significa que Vue no es un todo o nada sino que puede escoger las partes que más le interesen e incluso usarlas conjuntamente con otros frameworks o librerías web.

Para ilustrar el concepto de progresivo vamos a importar lo mínimo necesario para crear nuestra primera aplicación.

En primer lugar, vamos a utilizar un editor online como JSFiddle ( https://jsfiddle.net/) y en la ventana de HTML añadiremos el siguiente contenido [2].

Tenemos nuestro “Hola Vue” que renderiza una página de forma estática. Para trabajar de forma dinámica añadiremos los scripts necesarios para importar la librería de Vue [3].

En la ventana del editor para el código Javascript añadimos la instancia de Vue, la ligamos al elemento con id #app y añadimos una variable en el bloque data denominada message[4].

Volviendo al HTML asociamos a uno de los elementos el id que hemos declarado en la parte de Javascript [5]. ¡Dentro de este elemento añadimos un título (h1) con la variable message y ya tenemos nuestro “¡Hola Vue!”

¡Así de fácil ha sido crear nuestra primera aplicación y de forma online! En siguientes ejercicios configuraremos nuestro entorno en local para trabajar cómodamente y con la ayuda de múltiples herramientas para el desarrollo web.