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

一、图例及代码

花了两天的时间学习了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不可以是body
    el: '#weather',
    data: {
        //定义当前城市
        curCity: '',
        //定义省级数据
        provinceList: [],
        //定义市级数据
        cityList: [],
        //定义当天时间
        curWeather_data: null,
        //定义天气图片
        curDayPictureUrl: null,
        //定