写在前面:
心血来潮想用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....
我直接监听了用户的实时传值,但事实证明,这东西还真不是自己想用就能用的。
=======================分割线============================