Alquimista de código

Entradas

Mostrando las entradas etiquetadas como vuejs

Alpine JS

Hace tiempo hablamos sobre librerías y frameworks para desarrollo web en este enlace: https://alquimistadecodigo.blogspot.com/2024/08/frameworks-y-librerias-para-desarrollar.html En Javascript existen decenas de librerías y frameworks que ofrecen la panacea universal a los desarrolladores web. Alpine JS es uno de ellos. Alpine JS es un framework ligero que ofrece las características reactivas y declarativas de frameworks más robustos como Vue JS o React. De cierta manera es considerado un jQuery moderno. Según el sitio oficial posee una colección de: 15 atributos. 6 propiedades. 2 métodos. Comenzaremos con los atributos: Atributos Atributo Descripción x-data Declarar un nuevo componente Alpine y sus datos para un bloque de HTML. x-bind Establecer dinámicamente atributos HTML en un elemento. x-on Escuchar eventos del navegador en un elemento. x-text Establecer el contenido de te...

Frameworks y librerías para desarrollar aplicaciones web dinámicas

En esta ocasión veremos una lista de frameworks y/o librerías para desarrollo de sitios web dinámicos. Framework o librería Descripción Sitio oficial React JS Librería para interfaces de usuario web y nativas. https://es.react.dev/ Angular Framework de JavaScript de código abierto que permite crear aplicaciones web dinámicas de una sola página. https://angular.dev/ Vue JS Framework progresivo para crear páginas dinámicas. https://vuejs.org/ Astro El marco web para sitios web basados en contenido. https://astro.build/ Svelte Compilador Front End gratuito y de código abierto. Evolución de Ractive JS (https://ractive.js.org/) https://svelte.dev/ Aurelia Colección de módulos de JavaScript modernos que, cuando se usan juntos, funcionan como una poderosa plataforma para crear aplic...

Creando un proyecto con Vue JS

Vue Js es considerado un Framework progresivo en el cual se van agregando módulos de acuerdo a la necesidad que vaya surgiendo. Al trabajar con este framework nos encontraremos que es muy similar a Angular y/o React JS. Vue Js , al igual que otras herramientas, es ideal para el desarrollo de aplicacaciones tipo SPA. Pero, ¿qué es una SPA? Una Single-Page Application (SPA) es un tipo de aplicación web que ejecuta todo su contenido en una sola página. Y funciona más o menos así: Al abrir la página web completa se irá cargando el contenido HTML, CSS y Javascript. Al abrir otra sección no se cargará de nuevo todo el contenido, solo esa sección. Así se obtienen diferentes vistas sobre la misma página. Es una forma dinámica de trabajo. ¿Qué se necesita antes de usar este framework (y cualquier otro similar)? Tener nociones de HTML. Tener nociones de CSS. Tener nociones de Javascript. Un framework, en teoría, nos facilitará la existencia a la hora de desarrollar una aplica...

React JS en un vistazo

React JS es una librería desarrollada por Facebook para aplicaciones web reactivas. Existen dos formas para desarrollar con React JS: 1. Incluyendo un archivo *.js en tus páginas HTML o 2. Desde la terminal con la aplicación create-react-app (de manera a similar a Angular Cli y/o Vue JS Cli). Para eso requieres tener Node JS (y por ende, NPM). index.html <!DOCTYPE html> <html> <head> <title> Aprendiendo React JS </title> <script crossorigin src= "https://unpkg.com/react@17/umd/react.development.js" ></script> <script crossorigin src= "https://unpkg.com/react-dom@17/umd/react-dom.development.js" ></script> <script src= "https://unpkg.com/babel-standalone@6.15.0/babel.min.js" ></script> <script> function inicio(){ alert( "Iniciando con React JS" ); console.log( ...

Instalar Vue CLI

Instalamos Vue Cli con: $ npm install - g @vue / cli Comprobamos su instalación con: $ vue -- version Crear proyecto con: $ vue create my - app Ubicarnos en el directorio creado: $ cd my - app Ejecutar: $ npm run serve Abrir navegador en http://localhost:8080 También podemos crear una aplicación con: $ vue ui Se abrirá el navegador en la dirección: http://localhost:8000/project/select Elegimos Crear, elegimos un directorio de instalación y los plugins a usar. Links: http://alquimistadecodigo.blogspot.com/2018/06/vue-js.html

Vue JS (v-model, v-if, v-for)

He aquí un ejemplo de Vue JS. <!DOCTYPE html> < html lang = "es" > < head > < meta charset = "utf-8" > < title > Curso de Vue JS </ title > < script src = "https://code.jquery.com/jquery-3.7.1.js" integrity = "sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin = "anonymous" > </ script > < script src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js" > </ script > </ head > < style > . clase { background-color : # 4ac8b8 ; color : black ; font-weight : bold ; } </ style > < body > < h1 > Programando con Vue JS </ h1 > < div id = "app" > < h2 > 1. {{ titulo }} </ h2 > < div > < h3 > Libros </ h3 > < ol > < li v- for = "libro in libros" > {{ libro }} </ li > </ ol > </ di...