vue网络应用：天气查询

通过vue网络应用建立的天气查询网页

功能：

1.点击查询城市天气
2.按键输入查询天气
3.默认城市天气查询
4.查询失败返回
5.界面隐藏

技术应用：

1.html5，css3布局：采用流失布局为主，flex布局为辅。
2.vue本地应用于网络应用。
3.axios接口。
4.网络应用接口。
5.git工具部署静态网页。

技术逻辑：

1.回车查询：输入内容按下回车，通过双向绑定和enter绑定按键事件，调用接口，将输入的内容传递到服务器，接受到服务器返回的内容之后，渲染成列表界面。
2.点击查询：绑定点击事件，将输入值传递给服务器。
3.默认城市查询：将默认城市赋值到城市变量中上传至服务器，接收返回数据。

测试接口：

请求地址：http://wthrcdn.etouch.cn/weather_mini

示例：http://wthrcdn.etouch.cn/weather_mini?city=深圳
请求方法：get
请求参数：city

网页效果如下：

阿闷天气

js代码：

/* 获取 json 格式的天气
请求地址：http://wthrcdn.etouch.cn/weather_mini
请求方法：get
请求参数：city */
var app = new Vue({
    el: "#app",
    data: {
        city: '请输入要查询的城市名称.',
        cityWeather: []
    },
    methods: {
        weather: function () {
            var thad = this;
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city="
                + this.city)
                .then(function (response) {
                    // console.log(response.data.data.forecast);
                    thad.cityWeather = response.data.data.forecast;
                })
                .catch(function (err) {
                    alert('查询不到输入的名称。');
                })
        },
        cityList: function (city) {
            this.city = city;
            this.weather();
        },
        clear: function () {
            this.city = '';
        },
        mouseAdd: function ($event) {
            // console.log('鼠标经过');
            $event.currentTarget.className = "nav_bd mouse";

        },
        
        mouse: function ($event) {
            // console.log('鼠标移出');
            $event.currentTarget.className = "nav_bd";
        }
    }

})