目录
一、前言
上一节我们介绍了：天知道-介绍-回车查询，详见可参考博文：Vue笔记整理，让你快速入门Vue.js：04_4.网络应用：（项目）天知道-介绍-回车查询 这篇博文我们来看看点击查询。
二、实现思路
（1）点击事件
我们可以通过 v-on 指令进行绑定，修改文本框的值，本质就是修改 v-model 绑定的 data 中的数据的值。而天气查询的逻辑，和回车查询是完全一样的。只是我们需要点击来改变城市名，所以这里我们可以使用事件自定义参数，让代码更加的的灵活。
（2）查询数据和渲染数据
我们在上一节回车查询已经实现过了，这里我们只需考虑如何的复用就行？类似于 data 中数据的使用，通过 this 关键字就可以啦，定义在 methods 中的方法，我们也可以通过 this 关键字给点出来，加上括号就可以调用了。这样查询数据和渲染数据，我们就不需要再重新编写，直接在修改完文本框的值以后，通过 this 关键字调用之前定义的方法 ，就可以啦。
三、代码实现
1、写一个改变城市的方法【main.js】
// 写一个改变城市的方法
changeCity:function (city) {
this.city = city;
}
2、给城市添加 @click 点击事件【模板.html】
<div class="hotkey">
<a href="javascript:;" @click="changeCity('北京')">北京</a>
<a href="javascript:;" @click="changeCity('上海')">上海</a>
<a href="javascript:;" @click="changeCity('广州')">广州</a>
<a href="javascript:;" @click="changeCity('深圳')">深圳</a>
</div>
3、根据改变的城市，同步城市的天气数据【main.js】
// 写一个改变城市的方法
changeCity:function (city) {
this.city = city;
// 根据改变的城市，同步城市的天气数据
//调用 searchWeather 方法
this.searchWeather();
}
四、内容-总结
