Hagamos un widget del clima con alpine.js y open weather map

Alpine.js ofrece las propiedades reactivas y declarativas de grandes frameworks como Vue o React con un coste mucho menor. Mantiene el DOM, pudiendo mejorar y perfeccionar el comportamiento como más convenga. Podríamos considerarlo como un Tailwind para JavaScript.

Alpine nos ofrece 14 directivas y 6 propiedades mágicas que puedes conocer leyendo su documentación .

Hagamos un pequeño ejemplo para entender mejor que es alpinejs

Bueno, pongamos manos a la obra y trabajemos en un widget para el clima que se verá más o menos como esto:

템플릿 원본 de iaminos .

Para hacer este proyecto necesitamos conocer sobre:

템플릿 문자열

algunas directivas de alpine:

x-data: 구성 요소의 새로운 범위를 선언합니다.

x-init: Ejecuta una expresión cuando un componente se inicializa.

x-텍스트: 요소의 내부 텍스트를 실제화합니다.

Tener una llave api de open weather map.

Asumiendo que bajaron el template vamos a irlo modificando poco a poco.

엔 엘 <head> vamos a incluir esta estiqueta javascript:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>

Ya con esto tendremos alpine inicializado.

Ahora vamos a crear una etiqueta script y vamos a incluir lo siguiente:

function temp() {
    return {
        temp: {},
        init() {
            // todo
        }
    }
}

Si quieres saber como continua, te invito a mi blog .

Reference

이 문제에 관하여(Hagamos un widget del clima con alpine.js y open weather map), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/abr4xas/hagamos-un-widget-del-clima-con-alpine-js-y-open-weather-map-3848

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다