Home-theater-designers
El mundo del desarrollo web es caótico: los marcos aparecen y desaparecen y las cosas pueden ser abrumadoras tanto para los desarrolladores nuevos como para los experimentados.
A diferencia de la mayoría de los marcos de desarrollo web, Alpine.js pretende ser lo más simple posible, pero lo suficientemente potente como para manejar conceptos como la reactividad y los efectos secundarios.
MAKEUSEOF VÍDEO DEL DÍA DESPLAZAR PARA CONTINUAR CON EL CONTENIDO
Primeros pasos con Alpine.js
Instalar Alpine.js es bastante simple. Solo necesitas incluir lo siguiente guion etiqueta en tu HTML:
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
Alternativamente, puede instalar Alpine.js en su proyecto usando Node Package Manager:
npm install alpinejs
Reactividad en Alpine.js
Crear un índice.htm archivo y agregue el siguiente código repetitivo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine.js</title>
</head>
<body>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>
El aplazar atributo en el guion La etiqueta le dice al navegador que ejecute el script solo después de que haya terminado de analizar el documento.
el micrófono está recogiendo la salida de audio windows 10
Alpine.js proporciona varias directivas como datos x que utiliza para almacenar datos y texto x que utiliza para establecer textointerno del componente adjunto. Para usar estas directivas, agregue el siguiente código a su HTML.
<div x-data="{name:'David Uzondu', organisation:'Make Use Of'}">
My name is <strong x-text="name"></strong>
and <i x-text="organisation"></i> is Awesome
</div>
La directiva x-data almacena un objeto con las claves nombre y organización . Luego puede pasar esas claves a la directiva x-text. Cuando ejecute el código, Alpine.js completará los valores:
Cómo se compara Alpine.js con React
Alpine.js es un marco ligero que lo hace adecuado para desarrollar pequeños proyectos y prototipos.
En marcos más grandes como React, usas ganchos como usarEfecto() para manejar los efectos secundarios en el ciclo de vida del componente. Este enlace ejecuta una función de devolución de llamada cada vez que cambia uno de los elementos de la matriz de dependencia:
import {useEffect} from "React";
function MyComponent() {
useEffect(() => {
/* Callback function goes here */
}, [ /* The dependency array is optional */ ]);
}
Para manejar los efectos secundarios en Alpine.js, puede usar el efecto x directiva. Por ejemplo, supongamos que desea ver una variable y registrar el valor cada vez que cambia:
<div x-data="{number: 1}" x-effect="console.log(number)">
<h1 x-text="number"></h1>
<button @click="number = number + 1">Add new number</button>
</div>
Lo primero que notará es que no necesita especificar una dependencia. Alpine simplemente escuchará los cambios en todas las variables pasadas a efecto x . El @hacer clic directiva incrementa la variable número en 1.
Representación condicional en Alpine.js
Renderizar elementos condicionalmente es algo que puedes hacer en frameworks como React. Alpine.js también le permite renderizar elementos condicionalmente. Proporciona un x-si directiva y una especial plantilla elemento que puede usar para representar elementos condicionalmente.
Crea otro índice.htm archivo y agregue el mismo código repetitivo que antes. Agregue el siguiente código al cuerpo del HTML.
<div x-data="{shown:true}">
<button @click="shown=!shown" x-text="shown ? 'Hide Element' : 'Show Element'">Toggle</button>
<template x-if="shown">
<div>The quick brown fox jumped over the dog.</div>
</template>
</div>
El x-si se pasa la directiva al plantilla elemento. Esto es importante porque permite que Alpine.js realice un seguimiento de un elemento que se agrega o elimina de la página. El plantilla el elemento debe contener un elemento de nivel raíz; el siguiente código violaría esa regla:
<template x-if="shown">
<div>This element will be rendered just fine.</div>
<div>This element will be ignored by Alpine.js</div>
</template>
Creación de una aplicación de tareas pendientes con Alpine.js
Es hora de combinar todo lo que ha aprendido hasta ahora y crear una aplicación de tareas sencilla con soporte de almacenamiento local. Primero, cree una carpeta y llénela con un índice.htm archivo y un estilo.css archivo. Agregue el código repetitivo en el archivo index.htm e incluya una referencia al estilo.css archivo:
<link rel="stylesheet" href="style.css">