事件
创建 03-事件.html
需求:点击查询按钮,按照输入框中输入的内容查找公司相关信息
在前面的例子基础上,data节点中增加 result,增加 methods节点 并定义 search方法
data: {
searchMap:{
keyWord: '尚硅谷'
},
//查询结果
result: {}
},
methods:{
search(){
console.log('search')
//TODO
}
}
html中增加 button 和 p
使用 v-on 进行数件处理,v-on:click 表示处理鼠标点击事件,事件调用的方法定义在 vue 对象声明的 methods 节点中
<!-- v-on 指令绑定事件,click指定绑定的事件类型,事件发生时调用vue中methods节点中定义的方法 -->
<button v-on:click="search()">查询</button>
<p>您要查询的是:{{searchMap.keyWord}}</p>
<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
完善search方法
search(){
console.log('search');
this.result = {
"title":"尚硅谷",
"site":"http://www.atguigu.com"
}
}
简写
<!-- v-on 指令的简写形式 @ -->
<button @click="search()">查询</button>