<!DOCTYPE html>

<html>

<head>

    <title>Bootstrap 实例</title>

    <meta charset="utf-8">

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

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<style>

    .container{

        width: 80%;

        margin: 0 auto;

        border:1px solid #cccccc;

        border-radius: 10px;

        padding: 40px;

    }

    table{

        margin-top: 40px;

    }

</style>

<body>

<div class="container">

    <form class="form-inline">

        <label for="city">请选择城市:</label>

        <input type="text" class="form-control" id="city" placeholder="请选择城市" v-model="city">

        <button type="button" class="btn btn-primary" v-on:click="search">查询</button>

    </form>

    <table class="table table-bordered">

        <thead>

        <tr>

            <th>城市</th>

            <th>日期</th>

            <th>温度</th>

            <th>天气情况</th>

            <th>风向</th>

        </tr>

        </thead>

        <tbody>

            <tr v-for="item in info">

                <td>{{ city }}</td>

                <td>{{ item.date }}</td>

                <td>{{ item.temperature }}</td>

                <td>{{ item.weather }}</td>

                <td>{{ item.direct }}</td>

            </tr>

        </tbody>

    </table>

</div>

</body>

<script>

    new Vue({

        el: '.container',

        data () {

            return {

                info: null,

                city: null

            }

        },

        // mounted () {

        //

        // },

        methods:{

            search:function(){

                _this = this;

               axios

                   .get('http://www.1809A.com/api/Index/index/city/'+_this.city)

                   .then(function (response) {

                       _this.info = response.data.result.future;

                       _this.city = response.data.result.city;

                   })

                   .catch(function (error) { // 请求失败处理

                       console.log(error);

                   });

            }

        }

    })

</script>

</html>

api模块index控制器kuaidi方法

    public function index()

    {

        // 查询天气预报

        $city = input("city");

        // 确定接口地址：

        $url = "http://apis.juhe.cn/simpleWeather/query";

        // 确定参数

        $param = ['city'=>$city,'key'=>'7808686de93c14aae043ee1b8eb9916c'];

        // 调用函数执行

        $result = curl_request($url,true,$param);

        // 判断结果

        if(!$result){

            echo "查询失败";

            die;

        }

        // 成功

        return $result;

    }

tp 天气Vue参考的更多相关文章

  1. vue参考

    https://github.com/taylorchen709/vue-admin http://element-cn.eleme.io/#/zh-CN/component/layout https ...

  2. 新手创建Vue项目

    ======================安装vue=============================(参考网址:http://www.bubuko.com/infodetail-21320 ...

  3. vue源码逐行注释分析+40多m的vue源码程序流程图思维导图 （diff部分待后续更新）

    vue源码业余时间差不多看了一年,以前在网上找帖子,发现很多帖子很零散,都是一部分一部分说,断章的很多,所以自己下定决定一行行看,经过自己坚持与努力,现在基本看完了,差ddf那部分,因为考虑到自己要换 ...

  4. vue eslint 代码自动格式化

    vue-cli 代码风格为 JavaScript Standard Style 代码检查规范严格,一不小心就无法运行,使用eslint的autoFixOnSave可以在保存代码的时候自动格式化代码 V ...

  5. vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用

    vue之mapMutations的使用 我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...

  6. vue理解$nextTick

    首先要明确: Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 ...

  7. vue系列之vue cli 3引入ts

    插件 Vue2.5+ Typescript 引入全面指南 vue-class-component强化 Vue 组件,使用 TypeScript/装饰器 增强 Vue 组件 vue-property-d ...

  8. angular里使用vue/vue组件怎么在angular里用

    欢迎加入前端交流群交流知识&&获取视频资料:749539640 如何在angularjs(1)中使用vue参考: https://medium.com/@graphicbeacon/h ...

  9. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

随机推荐

  1. 社交网络分析的 R 基础：（三）向量、矩阵与列表

    在第二章介绍了 R 语言中的基本数据类型,本章会将其组装起来,构成特殊的数据结构,即向量.矩阵与列表.这些数据结构在社交网络分析中极其重要,本质上对图的分析,就是对邻接矩阵的分析,而矩阵又是由若干个向 ...

  2. Gitee 自已提交的代码提交人头像为他人、码云上独自开发的项目显示为 2 个开发者

    简介 自己写的代码提交到码云(Gitee)上却变成了两个人,一个被正确的代码提交统计了,另一个却没有,并且确信自己输入的Gitee账号是自己绑定的邮箱,具体如下: 解决办法 查看自己的用户名 git ...

  3. 入门-Kubernetes概述 (一)

    1 Kubernetes是什么 Kubernetes是Google在2014年开源的一个容器集群管理系统,Kubernetes简称K8S. K8S用于容器化应用程序的部署,扩展和管理. K8S提供了容 ...

  4. web项目获取全路径、端口、项目名等

    感谢大佬:https://blog.csdn.net/u010180031/article/details/52369537 request.getSchema(),返回的是当前连接使用的协议,一般应 ...

  5. Python解释器安装、多版本共存以及手动添加环境变量教程

    Python解释器安装.多版本共存以及手动添加环境变量教程 一.Python解释器下载 1. 先进入官网(python.org) 下图为网站的主页,依次按顺序点击"①Download&quo ...

  6. SpringCloud微服务实战——搭建企业级开发框架（三十六）：使用Spring Cloud Stream实现可灵活配置消息中间件的功能

      在以往消息队列的使用中,我们通常使用集成消息中间件开源包来实现对应功能,而消息中间件的实现又有多种,比如目前比较主流的ActiveMQ.RocketMQ.RabbitMQ.Kafka,Stream ...

  7. PHP面试常考内容之面向对象（1）

    PHP中面向对象常考的知识点有以下几点,我将会从以下几点进行详细介绍说明,帮助你更好的应对PHP面试常考的面向对象相关的知识点和考题. 整个面向对象文章的结构涉及的内容模块有: 一.面向对象与面向过程 ...

  8. Solution -「国家集训队」「洛谷 P2619」Tree I

    \(\mathcal{Description}\)   Link.   给一个 \(n\) 个点 \(m\) 条边的带权无向图,边有权值和黑白颜色,求恰选出 \(K\) 条白边构成的最小生成树.    ...

  9. k8s集群节点ping不通其他主机的ip

    文章目录 排查过程 本地宿主机网络检查 pod网络检查 tcpdump检查网络 检查flannel网卡 检查宿主机网卡 iptables检查 解决方法 测试环境服务出现问题,服务一直报错认证超时,检查 ...

  10. .Net Core Aop之IResourceFilter

    一.简介 在.net core 中Filter分为一下六大类: 1.AuthorizeAttribute(权限验证) 2.IResourceFilter(资源缓存) 3.IActionFilter(执 ...