尝试调用API写个vue的查询天气WEB

写在前面：

心血来潮想用vue写个项目，也方便看看自己最近的代码学习效率和成果 ；

不写不知道，一写还确实踩了不少坑.....

文中需要重要注意的地方都用红色粗体标注了，代码部分的话就用注释就行了。写这个文章，以供以后再遇到相同问题，可以省不少事...也尽可能帮助到和我一样的vue小白们。

-----------------------------------------------2023/4/21----------------------------------------------------

简单写个页面，可以查询各地的天气那种；大概就是让用户输入城市，点击个按钮可以返回值；

先把数值写死，然后整个简单的样式；大概实现这个效果：

<template>
  <input type="text"  />
  <button>查询</button>
 <h1>
    您查询的城市是：
  </h1>
  <table>
    <tr>
      <th>日期</th>
      <th>天气情况</th>
      <th>温度</th>
    </tr>
  </table>
</template>

其实设计H5的总体页面就是这么简单；但是之后就需要优化优化了，

接下来，我们尝试给button添加一个点击事件。

  <button @click="searchEvent">查询</button>

 添加了@click，就肯定需要有触发的事件，

<script>
export default{
    methods: {
        searchEvent() {
          console.log("我被点击了")
     },
  },
}
</script>

大概就是这样；其实我做完这一步之后设计了一个优化。因为毕竟是vue，vue的优点是组件代码分离，可以实现多处调用，但是就因为我这个优化...导致我后来频繁bug：不是数据传不到子页面，就是数据实时传值的过程把变量各种修改…

这样，咱先把某个组件拆出来。这里我把<table></table>组件整个搬了出来，并且创建了子组件weather.vue用来存储后期查询到的某城市的天气数据。大概是...这样，

 OK。麻烦的来了（对于萌新来说）。实时监听数据并传值...

vue中怎么get到用户输入的数据呢？我一开始使用的是v-model。对没错，v-model....

我直接监听了用户的实时传值，但事实证明，这东西还真不是自己想用就能用的。

=======================分割线=========================