<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box" >
{{count}}
<button @click="handleAdd1($event,1,2,3)">add-1-函数表达式</button>
<button @click="handleAdd2">add-2-函数名</button> 传递的是参数
<button @click="count++">add-3-表达式</button> 传递事件
<input type="text" @input="handleInput"/>
<ul @click.self="handleUlClick">
<li @click.stop="handleLiClick">1111</li>
<li @click="handleLiClick">2222</li>
<li @click.once="handleLiClick">3333</li>
</ul>
<a href="http://www.baidu.com" @click.prevent>跳转</a>
<input type="text" @keyup.enter.ctrl="handleKeyup"/>
<input type="text" @keyup.65="handleKeyup"/>
<!-- .esc , .up .down .left .right ,.space .ctrl .shift .delete -->
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
count:1
},
methods:{
handleAdd1(evt,a,b,c){
console.log(evt,a,b,c)
this.count++
},
handleAdd2(evt){
this.count++
console.log(evt.target)
},
handleInput(evt){
console.log("input",evt.target.value)
},
handleLiClick(evt){
console.log("li")
// evt.stopPropagation()
},
handleUlClick(){
console.log("ul")
},
handleKeyup(evt){
// console.log("keyup",evt.keyCode)
// if(evt.keyCode===13){
console.log("li add ",evt.target.value)
// }
}
}
})
</script>
</body>
</html>
<button @click="handleAdd1($event,1,2,3)">add-1-函数表达式</button>//如果都想传，￥event传递事件，必须写成￥event，后面接参数
<button @click="handleAdd2">add-2-函数名</button> 传递的是参数
<button @click="count++">add-3-表达式</button> 传递事件
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】