1.事件绑定
v-on:事件名="函数"
简写:@事件名="函数"
元素事件监听:
1.监听哪个元素
2.什么事件
3.事件处理函数(必须是vue下自定义的函数)
在vue下如何自定义函数?
1.methods 中定义。属于选项是api
2.setuo中定义 并return 输出
3.在<script setup> 直接定义 handle 在标签上绑定 @click=event=>handle(event)
<body>
<div id="app">
<button v-on:click="">绑定点击事件</button>
</div>
<script>
let app=Vue.createApp({
// methods: {
// handle(){
// console.log('handle run');
// }
// },
setup() {
const handle=()=>{
console.log('handle ron');
}
return{
handle
}
}
})
app.mount("#app");//指定vue根模板
// 问题 handle 函数 能做button的事件处理函数吗??
// 不能 handle 是window 下的函数
function handle() {
console.log('handlw ren');
}
</script>
</body
2.传参
事件处理函数传参:
注意: 事件对象要单独传
$event 是事件对象 内置api
<body>
<div id="app">
<button @click="handle1">默认参数</button>
<!-- 第一种写法 不推荐 -->
<button @click="handle2(123,'aaaa',$event)">自定义参数</button>
<!-- 第二种写法 推荐写法 -->
<button @click="event=>handle2(123,'aaaa',event)">自定义参数</button>
<!--
为什么 $event 和 a 都是事件对象呢?
因为 $event是内置api
a在元素上定义了函数 触发时间时候执行 行内函数,默认形参赋值 事件对象
-->
<!-- 一个事件绑定多个业务处理函数 -->
<button @click="[handle3,handle4]">点击触发多个函数</button>
<button @click="event=>{handle3(),handle4()}">点击触发多个函数</button>
</div>
<!--
所有操作的都是在虚拟dom上修改,修改完成以后会有底层算法将修改后的虚拟dom编译成真实的dom反馈给页面优化性能,使用框架性能优化
-->
<script>
let app = Vue.createApp({
setup() {
//默认传参事件对象
//事件对象:记录触发事件的一个详细目录(位置,元素)
const handle1 = (e) => {
console.log(e);
console.log(e.target);//获取出发事件的真实dom
}
const handle2 = (a,b,c) => {
console.log(a,b,c);
}
const handle3=()=>{
console.log('handle3 run');
}
const handle4=()=>{
console.log('handle4 run');
}
return {
handle1,
handle2,
handle3,
handle4,
}
}
})
app.mount("#app");//指定vue根模板
</script>
</body