开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):前端技术-vue 绑定事件】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/667/detail/11307
前端技术-vue 绑定事件
vue 中怎样绑定事件
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset = "UTF-8" >
<meta name= "viewport" content= "width = device-width, initial-scale= 1.0" >
<meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
<title>Document</title>
</head>
<body>
<div id= "app">
<! --vue
绑定事件--
>
<button v-on:click = "search()">
查询</button>
执行:
查询→点击查询→输出方法名称 search...
<! --vue 绑定事件简写-->
<button @click = "search()→()可加可不加">查询1</button>
执行:
查询→点击查询→输出方法名称 search...
</div>
<script src= "vue.min.js"></script>
<script>
new Vue({
el: '#app' ,
data: {
earchMap: {
keyWord: '
尚硅谷'
} ,
//查询结果
result: {}
},
methods: {//定义多个方法
search() {
console.log( 'search...' )
},
f1() {
console.log( 'f1...' )
}
}
})
</script>
</body>
</html>