jQuery-Vuejs

Proyecto que pretende ayudar a los programadores de jQuery a entender y aplicar Vuejs.

Se presentan diferentes soluciones de complejidad ascendente y a medida que se avanza se muestra como realizarlo en jQuery y en Vuejs. Hay articulo por cada proyecto.

Indice

Inicio. Input Simple.

Tema: Reactividad de la forma mas sencilla.

Vuejs:

• Uso de {{}}
• v-model.
• Instancia vue.
• Significado de "el".
• ¿Por qué id="app"?.
• Los datos en la instancia de Vuejs (data).
  JS:
• Evento input.

Codigo jQuery
Codigo Vuejs
Articulo

Control de errores.

Tema: Gestión de errores en un input simple

JS:

• if ternario
  Vuejs:
• :class
• @ para los eventos en vuejs.

Codigo jQuery
Codigo Vuejs
Articulo

Filtro de contenido

Tema: Gestión sencilla de filtro de contenido en un input.

Vuejs:

• THIS

Codigo jQuery
Codigo Vuejs
Articulo

RadioButton y CheckBox

Tema: Control de check box y Radio button.

Vuejs:

• v-model con arrays y booleans

Codigo jQuery Radio Button
Codigo Vuejs Radio Button
Codigo jQuery CheckBox
Codigo Vuejs CheckBox
Articulo

Estilos Inline y Clases CSS

Tema: Style Inlne y clases Css

Vuejs:

• @click
• :style
• v-if
• v-else
• Virtual DOM
• Computadas

Codigo jQuery Estilos inline
Codigo Vuejs Estilos inline
Codigo jQuery Clases CSS
Codigo Vuejs Class CSS
Articulo

Tabuladores

Tema: Un sistema simple de tabs para diferente contenido

Vuejs:

• v-show
• v-for

jQuery:

• Eventos (evt)

Codigo jQuery
Codigo Vuejs
Articulo

Select Simple

Tema: Sistema simple de Select.

Vuejs:

• v-model en select.

Codigo jQuery
Codigo Vuejs
Articulo

Select relacionados

Tema: control de contenido son selects relacionados entre si.

Vuejs:

• watch JS:
• Importación de constante externa
• Funcionamiento de < script >
• every()
• Notación Arrow
• Join()
• find()
• if y else innecesarios

jQuery:

• Funciones templates

Codigo jQuery
Codigo Vuejs
Articulos

Filtros en Selects

Temas: Filtrar el contenido de un Select

JS:

• Desestructuración
• Plantillas de cadenas de texto ${}
• filter()
• includes()

Codigo jQuery
Codigo Vuejs
Articulo

Select dinamicos y componentes

Tema: Select con contenidos dinámicos y creación del primer componente. JS:

• Copias por referencias (arrays, objectos)
• findIndex()
• splice()
• incremento (++pre y post++)

Vuejs:

• Componentes (explicación, concepto, creación)
• $emit
• Eventos propios

Codigo jQuery
Codigo Vuejs
Articulo

Sencilla hoja de calculo

Temas: Sencilla lógica del funcionamiento de una hoja de calculo.

Codigo jQuery
Codigo Vuejs
Articulo

Galería de imágenes

Temas: Una galería de imágenes sencilla. CSS:

• @keyframe

JS:

• setTimeout()

VueJS:

• Ciclo de vida de un componente.

Codigo jQuery
Codigo Vuejs
Articulo

Selección múltiple. Menús

Temas: Select con selección múltiple y menú de opciones.

Vuejs:

• Transition

Codigo jQuery Seleccion Multiple
Codigo Vuejs Seleccion Multiple
Codigo jQuery Menus
Codigo Vuejs Menus
Articulo

Tabla simple y paginación

Tema: Tabla de información, modal para expandir datos y paginación.

JS:

• Array.From

Vuejs:

• v-html

Codigo jQuery
Codigo Vuejs
Articulo