Javascript 我想了解vue.js组件和与用户交互的数据绑定，有人能纠正我的代码并向我解释吗？

我是一名初学者，目前正在使用vue.js开发一个天气应用程序项目。我在使用vue进行组件和数据绑定时遇到一些问题。有谁能用一些代码示例向我解释一下吗

我读过一些论坛，看了一些关于自定义组件的教程视频，也尝试过，但我认为我犯了一些错误。 具体地说，我想知道，如何将API url数据绑定到下拉框中，位置会随着每次选择而改变

注意：使用的API是基于纬度和经度位置的开放天气API

var myDropdown=Vue.component（'my-dropdown'{
模板：“#下拉列表”，
数据：函数（）{
返回{
伊索彭：错，
选中：空，
选项：[
“Heidenheim an der Brenz”，
“Giengen”，
“乌尔姆”，
]
}
},
方法：{
切换：函数（）{
this.isOpen=！this.isOpen；
},
show:function（）{
this.isOpen=真；
},
隐藏：函数（）{
this.isOpen=false；
},
设置：功能（选项）{
this.selected=选项；
this.hide（）；
}
},
挂载：函数（）{
log（'My dropdown component is mounted！'）
}
});
让weatherApp=新Vue({
el:“#应用程序”，
数据：{
镇：''，
临时工：''，
minTemp:“”，
maxTemp:“”，
风：''，
说明：“”，
图标：“”，
hdh:'https://fcc-weather-api.glitch.me/api/current?lat=48.6833&lon=10.15',
乌尔姆：'https://fcc-weather-api.glitch.me/api/current?lat=48.39841&lon=9.99155',
吉根：“你知道吗？”https://fcc-weather-api.glitch.me/api/current?lat=48.39841&lon=9.99155'
},
方法：{
getWeather（）{
var url=''；
axios
.get（url）
。然后（响应=>{
this.town=response.data.name
this.Temp=response.data.main.Temp；
this.minTemp=response.data.main.temp_min；
this.maxTemp=response.data.main.temp_max；
this.wind=response.data.wind.speed；
this.description=response.data.weather[0]。description；
this.icon=response.data.weather[0].icon；
})
.catch（错误=>{
console.log（错误）；
});
},
},
beforeMount（）{
这个。getWeather（）；
},
});
正文{
背景：url(https://shiftyjelly.files.wordpress.com/2013/11/w.jpg?w=960&h=400);
背景重复：无重复；
字体系列：“蒙特塞拉特”，无衬线；
字号：100；
文本阴影：0px 0px 2px#000000；
颜色：#ffffff；
宽度：960px；
高度：400px；
}
#天气{
填充：15px；
}
#温度{
位置：绝对位置；
字体大小：40px；
顶部：240px；
左：420px；
颜色：黑色；
}
#温度值{
文本对齐：右对齐；
位置：相对位置；
文本：分发；
显示：块；
顶部：60px；
左：-200px；
颜色：黑色；
}
#信息{
填充：15px；
}
#名字{
顶部：10px；
左：300px；
字体大小：40px；
颜色：黑色；
位置：相对位置；
}
.风{
顶部：180像素；
左：380px；
颜色：黑色；
位置：相对位置；
}
#图标{
颜色：黑色；
字体大小：20px；
左：-180px；
顶部：120px；
位置：相对位置；
}
#我的下拉列表{
光标：指针；
位置：绝对位置；
左：0%；
最高：0%；
最小宽度：250px；
高度：40px；
}
#精选{
位置：相对位置；
z指数：2；
显示：块；
宽度：100%；
高度：40px；
填充：0 20px；
背景：rgba（05,46,41,0.1）；
边界半径：10px；
字体：1.25rem/40px‘Ubuntu’、Helvetica、Arial、无衬线字体；
文本阴影：2PX2PX0PX#000；
颜色：rgb（0237255）；
}
#选定：之后{
不透明度：0.5；
显示：内联块；
左边距：10px；
内容:'▼';
颜色：黑色；
}
#选定：悬停：之后{
不透明度：1；
}
#选择权{
位置：绝对位置；
左：0；
最高：100%；
z指数：1；
宽度：100%；
利润上限：3倍；
背景：rgba（05,46,41,0.1）；
边界半径：10px；
}
#选择权{
填充：5px20px；
边框底部：1px实心rgba（0,0,0,0.25）；
字体：1.2rem'Vollkorn'，佐治亚州，泰晤士报，衬线；
颜色：rgb（0237255）；
文本阴影：2PX2PX0PX#000；
}
#选项：悬停{
背景色：rgba（0,0,0,0.05）；
}
#选项：最后一个孩子{
边框底部：无；
}
#淡入激活状态。淡入保持激活状态{
过渡：所有0.25秒都放松；
}
#淡入淡出激活{
不透明度：0.5；
转换：translateY（-30px）；
}
*{框大小：边框框；}

天气应用程序
在这里选择您的城镇
{{option}}
{{城镇}
{{description}}
{{Temp}}°

最小值：{minTemp}}°
最大值：{{maxTemp}}
{{wind}}米/秒

首先，最好将所有数据保存在一个地方，而不是在下拉组件中硬编码城镇名称。您也不需要每次都存储整个url。因此，从下拉列表中删除
选项
。您将通过道具将城镇数据传递给它

1） 将应用程序的城镇数据重组为如下对象数组：

data: {
  ...
  towns: [
    {abbr: 'hdh', name: 'Heidenheim an der Brenz', lat: '48.6833', lon: '10.15'},
    {abbr: 'ulm', name: 'Ulm', lat: '48.39841', lon: '9.99155'},
    {abbr: 'giengen', name: 'Giengen', lat: '48.39841', lon: '9.99155'}
  ]
}

2） 通过名为“选项”的道具将城镇数据传递到下拉组件：

<my-dropdown :options="towns"></my-dropdown>

props: ['options']

5） 当城镇发生变化时发出自定义事件：

set: function(option) {
  this.$emit('change-town', option);
  ...
}

6） 在父模板的
getWeather
中处理该事件：

<my-dropdown :options="towns" @change-town="getWeather"></my-dropdown>

非常感谢。我很感激。帮助很大。
getWeather(option) {
  const urlpath = 'https://fcc-weather-api.glitch.me/api/current?'
  const qs = `lat=${option.lat}&lon=${option.lon}`;
  const url = path + qs;
  axios.get(url)...
  ...
}