O trecho de código dentro das tags é o código HTML que compõe a estrutura visual do componente. Ele contém um container , uma transição e um card que exibe a previsão do tempo da cidade pesquisada. O componente também inclui um rodapé que contém um campo de texto para o usuário inserir o nome da cidade que deseja pesquisar.
O trecho de código dentro das tags <script> é o código JavaScript que controla o comportamento do componente. Ele importa a biblioteca Axios para fazer a chamada à API de previsão do tempo e também importa algumas imagens para exibir o ícone correspondente ao clima atual.
O componente tem um objeto de dados que contém as informações do estado atual do componente, como a cidade pesquisada, a linguagem do resultado da previsão do tempo, a imagem do ícone de clima atual, os dados da previsão do tempo, e as imagens dos ícones de clima.
O componente também tem um método chamado getWeather() que faz a chamada à API de previsão do tempo e atualiza as informações do estado do componente com os dados da previsão do tempo e a imagem do ícone correspondente. O método também inclui uma estrutura de controle try-catch para lidar com possíveis erros na chamada da API.
O componente também tem um watcher que observa o valor do campo de texto city e redefina os dados de previsão do tempo para null caso o campo de texto esteja vazio.
O trecho de código dentro das tags <style> contém algumas regras de estilo para a transição da animação e a animação de flutuação do ícone de clima atual.
# yarn
yarn
# npm
npm install
# pnpm
pnpm install
# yarn
yarn dev
# npm
npm run dev
# pnpm
pnpm dev
# yarn
yarn build
# npm
npm run build
# pnpm
pnpm build