1. 核心框架：Vue

Vue 以其轻量、易用、响应式数据绑定的特点，非常适合快速构建这类小型界面组件。即使是直接通过 CDN 引入，也能高效开发，降低项目复杂度，无需搭建完整工程化环境 。

2. 网络请求：Axios

用于发送 HTTP 请求获取天气接口数据，它在浏览器端使用简洁，支持 Promise 语法，能方便地和 Vue 结合处理异步数据获取。

3. CDN 替换

一开始用的 cdn.jsdelivr.net 可能存在访问不稳定情况，替换为 cdnjs.cloudflare.com，保障资源可靠加载 。

4. 最终效果

上代码, 复制保存为HTML直接打开就可以看到效果

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>天气卡片</title>

  <style>

    .weather-card{margin:50px auto;width:300px;background: rgb(213,243,255);

background: linear-gradient(360deg, rgba(213,243,255,1) 0%, rgba(248,253,255,1) 100%);border-radius:8px;padding:16px;box-shadow:0 2px 4px rgba(0,0,0,0.1);font-family:sans-serif}.location{display:flex;align-items:center}.location svg{width:24px;height:24px;margin-right:8px;fill:#fdb813}.temp{font-size:48px;font-weight:bold;margin:8px 0;width:65%}.desc{color:#666;width:35%;text-align:right;margin:15px 0 0}

  </style>

</head>

<body>

  <div id="app">

    <div class="weather-card">

      <div class="location">

        <svg t="1753281034305" style="width:24px;height: 24px;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8458" width="32" height="32"><path d="M920.25920987 329.59374532a24.69356705 24.69356705 0 0 0-23.87821341-1.63070726l-79.32226019 36.34147603-46.59163593 21.60687116c-0.75711409 3.61085178-1.45598862 7.16346402-2.3295818 10.77431581-25.21772295 102.44335951-200.16931588 315.77481255-220.02900069 339.76950506-9.14360855 11.00727399-22.59694343 32.84710333-36.92387148 32.84710333s-27.72202338-21.83982933-36.86563193-32.84710333c-19.74320572-23.87821341-192.19049822-234.58888693-219.44660526-337.78936053-19.68496619-10.54135763-32.38118697-17.47186349-32.49766606-17.47186348a24.69356705 24.69356705 0 0 0-31.04167743-3.96028906l-87.35931738 54.51221405a24.69356705 24.69356705 0 0 0-11.64790898 21.02447572v428.17713423a24.7518066 24.7518066 0 0 0 35.29316421 22.36398525l228.47373472-113.45063349L628.77028755 931.3247234a24.6353275 24.6353275 0 0 0 23.29581798 0l266.73711572-143.85167594a24.69356705 24.69356705 0 0 0 13.04565806-21.7815898v-415.24795527a24.81004614 24.81004614 0 0 0-11.58966944-20.84975707z" fill="#8a8a8a" p-id="8459"></path><path d="M511.06816728 101.70240606a231.79338878 231.79338878 0 0 0-231.56043059 231.56043059 234.2976892 234.2976892 0 0 0 6.69754767 55.56052585c23.81997387 96.73588411 205.70207265 317.23080117 213.44793212 326.54912835a14.67636532 14.67636532 0 0 0 11.64790898 5.35803814 14.85108396 14.85108396 0 0 0 11.64790898-5.35803814c7.74585947-9.31832718 189.62795825-229.81324424 213.44793213-326.60736789a231.73514923 231.73514923 0 0 0-225.32879929-287.0627169z m0 311.17388849a79.6134579 79.6134579 0 1 1 79.6134579-79.6134579A79.6134579 79.6134579 0 0 1 511.06816728 412.99277364z" fill="#F8D247" p-id="8460"></path></svg>

        <span>{{ city }}</span>

      </div>

      <div style="display: flex;">

      <div class="temp">

        {{ temperature }}<span style="font-size:16px;vertical-align: text-top;">°C</span>

        <span style="font-size:16px;float:left;">

          <img :src="wea_img" style="width:50px; margin: 6px 5px 0 0;"/>

        </span>

      </div>

      <div class="desc">

        {{ weatherDesc }}<br>

        湿度 {{ humidity }}

      </div>

    </div>

      <div style="margin-top:8px; text-align: center;">

        <a href="javascript:;" @click="viewFull" style="color: #333;text-decoration: none;">查看完整预报</a>

      </div>

    </div>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>

  <script>

    new Vue({

      el: '#app',

      data: {

        city: '',

        temperature: '',

        weatherDesc: '',

        humidity: '',

        isLoading: true

      },

      created() {

        this.fetchWeatherData();

      },

      methods: {

        async fetchWeatherData() {

          try {

            // get接口里使用的appid和key请自行前往天气api注册

            const response = await axios.get('http://gfeljm.tianqiapi.com/api?unescape=1&version=v63&appid=55556666&appsecret=12341234');

            this.city = response.data.city;

            this.temperature = response.data.tem;

            this.weatherDesc = response.data.wea;

            this.wea_img = 'http://dps.tianqiapi.com/static/skin/apple/' + response.data.wea_img + '.png';

            this.humidity = response.data.humidity;

            this.isLoading = false;

            document.title = response.data.city + '天气卡片'

          } catch (error) {

            console.error('获取天气数据失败', error);

            this.isLoading = false;

          }

        },

        viewFull() {

          document.location.href='http://tianqiapi.com'

        }

      }

    });

  </script>

</body>

</html>

使用vue制作一个漂亮的天气卡片插件的更多相关文章

  1. 小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器

    来自:http://blog.csdn.net/dawanganban/article/details/17679069 在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的 ...

  2. 用 Swift 制作一个漂亮的汉堡按钮过渡动画

    汉堡按钮在界面设计中已经是老生常谈了,但是当我在dribbble看到这个漂亮的过渡动画时,我决定试试用代码实现它.   这是 CreativeDash team 的原型图: 你可能已经注意到了,汉堡顶 ...

  3. IOS制作一个漂亮的登录界面

    上图是Facebook的登录界面,看起来很漂亮,eamil框和passwod框合在一起,那么这种效果是怎么做出来的呢?我们都知道输入框用layer属性是可以做成圆角的形式,那么怎么样才能够仅仅只让上边 ...

  4. css3制作一个漂亮的按钮

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAAA4CAIAAAAO41POAAAGWklEQVRogeWabWwTdRzH/8EwMb6Q69

  5. Vue实现一个图片懒加载插件（转载）

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

  6. 制作一个轻量级的状态管理插件：Vue-data-state

    Vuex 是不是有点繁琐? Vuex 是针对 Vue2 来设计的,因为 option API 本身有很多缺点,所以 Vuex 只好做各种补丁弥补这些缺点,于是变得比较"复杂". 现 ...

  7. 制作一个功能丰富的Android天气App

    简易天气是一个基于和风天气数据采用MD设计的Android天气App.目前的版本采用传统的MVC模式构建.通过丰富多彩的页面为用户提供日常所需的天气资讯. 项目说明 项目放在github上面 地址是: ...

  8. PS网页设计教程XXIV——从头设计一个漂亮的网站

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  9. 如何制作一个类似Tiny Wings的游戏 Cocos2d-x 2.1.4

    在第一篇<如何使用CCRenderTexture创建动态纹理>基础上,增加创建动态山丘,原文<How To Create A Game Like Tiny Wings with Co ...

  10. 给Ajax一个漂亮的嫁衣——Ajax系列之五（下）之序列化和反序列化

    给Ajax一个漂亮的嫁衣——Ajax系列之五(下)之序列化和反序列化 标签: ajaxdictionaryjsonobject服务器function 2012-07-25 18:41 2242人阅读  ...

随机推荐

  1. 原生JS表格数据常用总结

    主要是在数据报表这块, 做了好几年发现, 其实用户最终想要看的并不是酷炫的BI大屏, 而是最基础也是最复杂的 中国式报表. 更多就是倾向于从表格中去获取数据信息, 最简单的就是最好的, 于是还是来总结 ...

  2. vue3 基础-传送门 teleport

    之前介绍了一波混入 mixin 和 自定义指令 directive 其基本作用就是为了在 vue 中实现代码的复用. 而本篇介绍的是 vue3 的一个新特性叫做传送门. 一听这个名字是不是就感觉特别科 ...

  3. CTP报单业务介绍

    程序化登录信息 客户如果需要调用API介入柜台进行程序化交易,登录时需要一些基本信息,如下: 1.BrokerID 简称期货编码,是在该期货公司在CTP系统上的编码,为四位数,例如海通期货是8000 ...

  4. Django开发过程中遇到的问题和解决方案

    1.django向数据库中添加中文时报错 解决方案:创建数据库的时候设置编码格式 2.django的信号使用无法触发信号里的内容 解决方案:在django 1.7后,使用信号时候需要在应用配置类中的r ...

  5. MySQL Explain查看执行计划详解

    目录 前言 EXPLAIN 中的列 id 和select_type table type possible_keys key 和 key_len ref 和 rows Extra 小结 Referen ...

  6. Web前端入门第 65 问：JavaScript 函数参数各种使用方式

    函数参数是什么? 就是函数内部无法确定的一个东西,需要外部传给函数内部的玩意儿,语法上就是写在函数括号中的东东.比如: function test(a) {} 其中的 a 就是 test 函数的参数, ...

  7. kubernetes集群之资源配额(Resource Quotas)

    一.简单介绍 资源配额(Resource Quotas)是用来限制用户资源用量的一种机制. 它的工作原理为: 资源配额应用在Namespace上,并且每个Namespace最多只能有一个Resourc ...

  8. pip安装模块提示Command "python setup.py egg_info" failed with error code 1

    报错详情: [root@k8s001 ~]# pip install kubernetes Collecting kubernetes Using cached https://files.pytho ...

  9. Vertx 接入MongoDB (九)

    项目github地址:https://github.com/fotocj007/VertxWebApi 一:加入配置文件 mongodb.json 1 compile group: 'io.vertx ...

  10. java基础--抽象类、接口

    final(最终.修饰符) ## final关键字的用法: 1. final关键字修饰一个基本类型的变量时,该变量不能重新赋值,第一次的值为最终的. 2. fianl关键字修饰一个引用类型变量时,该变 ...