一、图例及代码

花了两天的时间学习了vue.js教程及API，练习着完成了一款天气app，界面如下，希望对刚入门的你有帮助！

详细代码下面会贴出主要的，你也可以直接点击下载查看，每句代码都有注释。这里先记录一下遇到的一些问题

二、问题

1、跨域问题

由于是用ajax访问，会遇到跨域问题，可参与以下代码使用JSONP解决跨域问题

$.ajax({url: 'http://api.map.baidu.com/location/ip',dataType: "jsonp",jsonp: 'callback',data: data,jsonpCallback: "success_jsonpCallback",success: function (result) {var city = result.content.address_detail.city;self.curCity = city;self.getListByKeyWord();},error: function () {alert("请求出错！");}
});

2、this指向

var weater = new Vue({el:'#weather',methods:{getLocation: function (data) {var self = this; //储存this，},},

3、 Vue 实例的挂载目标的DOM 元素

作为 Vue 实例的挂载目标的DOM 元素可以是 CSS 选择器，也可以是一个 HTMLElement 实例，但是不可以是body不可以是body不可以是body，如果你这样做了，浏览器会友好的提醒你

talk is cheap,show me the code，下面是主要的代码，更加详细的代码点击下载查看

/*** Created by Jill on 16/12/10.*/
var weater = new Vue({//作为 Vue 实例的挂载目标的DOM 元素可以是 CSS 选择器，也可以是一个 HTMLElement 实例，但是不可以是body不可以是body不可以是bodyel: '#weather',data: {//定义当前城市curCity: '',//定义省级数据provinceList: [],//定义市级数据cityList: [],//定义当天时间curWeather_data: null,//定义天气图片curDayPictureUrl: null,//定义当天温度curTemperature: null,//定义当天天气curWeather: null,//定义当天风的强度curWind: null,//定义当天实时空气质量curPm25: null,//定义未来几天天气数据weatherList: [],//定义各项建议数据suggestList: []},created: function () {//获取当前位置数据var data = "ak=IGRqnr7eERqnOV5YmQgHxUEj1kY1cw6P&coor=bd09ll";//初始化函数this.getLocation(data);},methods: {//获取当前位置getLocation: function (data) {//存储this，保证this指向正确var self = this;$.ajax({url: 'http://api.map.baidu.com/location/ip',//处理跨域dataType: "jsonp",jsonp: 'callback',data: data,jsonpCallback: "success_jsonpCallback",success: function (result) {//数据加载完，显示页面，防止页面出现未请求好的渲染数据，如｛｛curCity｝｝$('#weather').show();//拿到当前位置－城市var city = result.content.address_detail.city;self.curCity = city;//调用对应的数据self.getListByKeyWord();},error: function () {//数据未加载完，隐藏页面$('#weather').hide();alert("当前位置请求出错！");}});},//点击当前城市sortAddress: function () {var self = this;//清空数据self.provinceList = [];self.cityList = [];//拿到对应动画的DOM元素var $sortPop = $(".sorting-address");//弹出下拉框，并加载省//判断弹出框是否已经弹出，若已经弹出，点击则弹入if ($sortPop.hasClass("fixed-top")) {$sortPop.removeClass("fixed-top");}//弹出else {$sortPop.addClass("fixed-top");//渲染省级数据var lenpro = data.province.length;for (var i = 0; i < lenpro; i++) {self.provinceList.push({province: [data.province[i], i]});}}},//点击选择省sortProvince: function (index) {var self = this;//判断点击的省级是否已选if ($(this).hasClass("current")) {$(this).removeClass("current");$("#city").css("left", "100%");}//否则选中该省级并加载对应市的数据else {$("#province li").removeClass("current");$(this).addClass("current");//渲染市级数据var lenCity = data.city[index].length;for (var i = 0; i < lenCity; i++) {self.cityList.push({city: data.city[index][i]});}$("#city").css("left", "50%");}},//点击选择市sortCity: function (city) {$("#city").css("left", "100%");var self = this;self.curCity = city;$(".sorting-address").removeClass("fixed-top");$(this).removeClass("current");self.getListByKeyWord();},//渲染对应城市的数据getListByKeyWord: function () {var self = this;$.ajax({url: 'http://api.map.baidu.com/telematics/v3/weather?location=' + self.curCity + '&output=json&ak=FK9mkfdQsloEngodbFl4FeY3',type: "POST",dataType: "jsonp",jsonp: 'callback',jsonpCallback: "success_jsonpCallback",success: function (result, status) {if (status == 'success') {$('#weather').show();//获取当前时间var curDate = new Date();//获取当前时间小时，进行判断白天黑夜var curHours = curDate.getHours();//获取weather_data长度var len = result.results[0].weather_data.length;//获取index长度var lenIndex = result.results[0].index.length;//清空数据self.weatherList = [];self.suggestList = [];//当天天气数据//当天时间self.curWeather_data = result.results[0].weather_data[0].date;//当天温度self.curTemperature = result.results[0].weather_data[0].temperature;//当天天气self.curWeather = result.results[0].weather_data[0].weather;//当天风的强度self.curWind = result.results[0].weather_data[0].wind;//当天实时空气质量self.curPm25 = result.results[0].pm25;//白天if (curHours >= 6 && curHours < 18) {$('header').css('background', '#FF8000');self.curDayPictureUrl = result.results[0].weather_data[0].dayPictureUrl;}//黑夜else {$('header').css('background', '#00015B');self.curDayPictureUrl = result.results[0].weather_data[0].nightPictureUrl;}//渲染未来几天的天气for (var i = 1; i < len; i++) {//白天if (curHours >= 6 && curHours < 18) {self.weatherList.push({listWeather: [//时间result.results[0].weather_data[i].date,//天气图片（早）result.results[0].weather_data[i].dayPictureUrl,//温度result.results[0].weather_data[i].temperature,//天气result.results[0].weather_data[i].weather,//风result.results[0].weather_data[i].wind,]})}//黑夜else {self.weatherList.push({listWeather: [//时间result.results[0].weather_data[i].date,//天气图片（晚）result.results[0].weather_data[i].nightPictureUrl,//温度result.results[0].weather_data[i].temperature,//天气result.results[0].weather_data[i].weather,//风result.results[0].weather_data[i].wind,]})}}//渲染各项建议数据for (var i = 0; i < lenIndex; i++) {self.suggestList.push({listSuggest: [//标题result.results[0].index[i].title,//指数result.results[0].index[i].zs,//建议result.results[0].index[i].tipt,//描述result.results[0].index[i].des,]})}} else {$('#weather').hide();alert('数据获取失败');}},error: function () {alert("请求出错！");}});},}
})

基于vue.js开发的demo—天气APP相关推荐

js时间选择器_Vuestic Admin一款免费与美妙基于Vue.js开发的管理模板
Vuestic Admin 简介 vuestic admin是一款流行,免费与美妙的基于Vue.js开发出来的管理模板,包括38以上个定制用户界面组件,由Epicmax开发,由Vasili Savit ...
基于Vue.js模拟酒店预订移动App
说明:vue项目用的mui框架和mintUI框架. 自己做的主要完成: 基于vue.js的移动端app,基于vue2全家桶完成选择住宿时间,房型列表和购物车等功能页面开发,后端用外部json文件和m ...
基于 vue.js 的仿QQ聊天室
简介这是一款基于 vue.js 开发的聊天室组件库,在提供基础封装的同时,最大程度的增加扩展性. 下面是效果演示图: MChat组件效果图: IChat组件效果图: 如何安装使用 npm 安装 n ...
基于vue.js的饿了么的element-ui的unpkg文件的下载到本地
现在vue.js使用很广泛,饿了么的element-ui基于vue.js开发的ui框架.官方提供了unpkg的访问地址https://unpkg.com/element-ui@2.4.6/.可以直接在 ...
基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+
2019独角兽企业重金招聘Python工程师标准>>> ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方 ...
vue时间天气插件_基于vue.js 2.0的百度天气应用 – vue-weather
vue-weather 基于vue.js 2.0的百度天气应用. 说明初学vue,在看完一个简单的视频教程和走两遍完官方文档之后仍然感觉云里雾里,知其然不知其所以然(虽然现在好了点).请教了高手之后 ...
基于node.js开发环境下创建及开发vue.js项目的环境配置骤
基于node.js开发环境下创建开发vue.js项目的环境配置骤如下: 步骤一:安装node.js,安装完后运行node -v命令检安装node的查版本,判断是否安装成功.Npm是node.js包管理 ...
基于Vue.js制作的仿车轮驾考通APP端页面
背景:学习完Vue,老师要求期末作业以Vue技术做一个手机端或者PC端的前端小项目.期末临近,周围的同学有的仿微信APP端,有的仿QQAPP端.小萍去年考科目一用了车轮驾考通刷题,然后她最后决定基于V ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...

基于vue.js开发的demo—天气APP