当前位置：首页 > news >正文

Vue基础(4)_事件处理

news 来源：原创 2025/6/4 23:11:17

事件处理

事件的基本使用：
1、使用 v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名。
2、事件的回调需要配置在 methods 对象中，最终会在vm上。
3、methods中配置的函数，不要用箭头函数！否则this就不是vm了。
4、methods中配置的函数，都是被vue所管理的函数，this的指向是 vm 或组件实例对象。
5、@click = "demo" 和 @click = "demo($event)" 效果一致，但后者可以传参。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>事件处理</title><script type="text/javascript" src="../js/vue.js"></script><style>p{font-size: larger;font-weight: bolder;}p:first-child{color: blue;}p:nth-child(2){color: green;}</style>
</head>
<body><div id="root"><p>你好，{{name1}}</p><p>你好，{{name2}}</p><button v-on:click="showInfo1">点我提示{{name1}}(不传参)</button><!-- $event和李四顺序可调换，不影响$event使用 --><button @click="showInfo2('李四',$event)">点我提示{{name2}}(传参)</button></div><script>var vm = new Vue({el:'#root',data: {name1:'张三',name2:'李四'},methods: {     showInfo1(event){console.log(event.target.innerText);alert("你好！张三" )},showInfo2(name2,event){console.log(event.target.innerText);alert("你好！" + name2)}}
})</script>
</body>
</html>