vue\u4e2d, \u901a\u5e38\u4f7f\u7528axios\u6765\u8c03\u7528http\u5f02\u6b65\u8bf7\u6c42, axios\u8c03\u7528\u7684\u8fd4\u56de\u503c\u5fc5\u987b\u662fjson\u683c\u5f0f<\/p>\n\n\n\n
\u5728vue\u4e2d\u8c03\u7528axios\u7684get\u6216\u5176\u4ed6\u8c03\u7528\u65f6, this\u7684\u7ed1\u5b9a\u503c\u4f1a\u53d8, \u4f60\u53ef\u4ee5\u4f7f\u7528\u7bad\u5934\u51fd\u6570\u6216\u628athis\u4fdd\u5b58\u4e0b\u6765<\/p>\n\n\n\n
\u4e0b\u9762, \u662f\u4e00\u4e2a\u8c03\u7528\u5929\u77e5\u9053\u63a5\u53e3\u7684\u5b9e\u4f8b<\/p>\n\n\n\n
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script>\n<!-- \u5f15\u5165\u5b98\u7f51\u63d0\u4f9b\u7684 axios -->\n<script src=\"https:\/\/unpkg.com\/axios\/dist\/axios.min.js\"><\/script>\n<h2>vuejs\u914d\u5408axios\u67e5\u8be2\u5929\u6c14\u5b9e\u4f8b<\/h2>\n<div class=\"wrap\" id=\"app\">\n <div class=\"search_form\">\n\t<div class=\"form_group\">\n\t <input\n\t\ttype=\"text\"\n\t\tv-model=\"city\" @keyup.enter=\"searchWeather()\"\n\t\tclass=\"input_txt\"\n\t\tplaceholder=\"\u8bf7\u8f93\u5165\u67e5\u8be2\u5730\"\n\t \/>\n\t <button class=\"input_sub\" @click=\"searchWeather()\">\n\t\t\u641c \u7d22\n\t <\/button>\n\t<\/div>\n\t<div class=\"hotkey\">\n\t <a href=\"javascript:;\" @click=\"changeCith('\u5317\u4eac')\">\u5317\u4eac<\/a>\n\t <a href=\"javascript:;\" @click=\"changeCith('\u6d77\u53e3')\">\u6d77\u53e3<\/a>\n\t <a href=\"javascript:;\" @click=\"changeCith('\u5e7f\u5dde')\">\u5e7f\u5dde<\/a>\n\t <a href=\"javascript:;\" @click=\"changeCith('\u957f\u6c99')\">\u957f\u6c99<\/a>\n\t<\/div>\n <\/div>\n <ul class=\"weather_list\">\n\t<li v-for=\"item in weatherList\">\n\t <div class=\"info_type\"><span class=\"iconfont\">{{item.type}}<\/span><\/div>\n\t <div class=\"info_temp\">\n\t\t<b>{{item.low}}<\/b>\n\t\t~\n\t\t<b>{{item.high}}<\/b>\n\t <\/div>\n\t <div class=\"info_date\"><span>{{item.date}}<\/span><\/div>\n\t<\/li>\n <\/ul>\n<\/div>\n<!-- \u4e3b\u8981\u7684\u903b\u8f91\u5904\u7406js -->\n<script type=\"text\/javascript\">\n\t var app = new Vue({\n\t\t el:'#app',\n\t\t data:{\n\t\t\t city:'\u5317\u4eac',\n\t\t\t weatherList:[]\n\t\t },\n\t\t methods:{\n\t\t\t searchWeather:function(){\n\t\t\t\t axios.get(\"http:\/\/wthrcdn.etouch.cn\/weather_mini?city=\"+this.city).then((res)=>{\n\t\t\t\t\t console.log(res.data.data.forecast);\n\t\t\t\t\t this.weatherList=res.data.data.forecast\n\t\t\t\t }).catch((err)=>{\n\t\t\t\t\t console.log(err);\n\t\t\t\t })\n\t\t\t },\n\t\t\t changeCith:function(city){\n\t\t\t\t this.city=city;\n\t\t\t\t this.searchWeather();\n\t\t\t }\n\t\t }\n\t })\n<\/script>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"vue\u4e2d, \u901a\u5e38\u4f7f\u7528axios\u6765\u8c03\u7528http\u5f02\u6b65\u8bf7\u6c42, axios\u8c03\u7528\u7684\u8fd4\u56de\u503c\u5fc5\u987b\u662fjson\u683c\u5f0f \u5728vue\u4e2d\u8c03… \u7ee7\u7eed\u9605\u8bfb vue\u4f7f\u7528axios\u5f02\u6b65\u8bf7\u6c42<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/www.52dixiaowo.com\/vuejs\/wp-json\/wp\/v2\/posts\/91"}],"collection":[{"href":"https:\/\/www.52dixiaowo.com\/vuejs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52dixiaowo.com\/vuejs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52dixiaowo.com\/vuejs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52dixiaowo.com\/vuejs\/wp-json\/wp\/v2\/comments?post=91"}],"version-history":[{"count":0,"href":"https:\/\/www.52dixiaowo.com\/vuejs\/wp-json\/wp\/v2\/posts\/91\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.52dixiaowo.com\/vuejs\/wp-json\/wp\/v2\/media?parent=91"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52dixiaowo.com\/vuejs\/wp-json\/wp\/v2\/categories?post=91"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52dixiaowo.com\/vuejs\/wp-json\/wp\/v2\/tags?post=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}