[Vue]事件绑定

事件的基本使用:
1. 使用 v-on :xxx 或 @xxx 绑定事件，其中 xxx 是事件名;
2. 事件的回调需要配置在 methods 对象中，最终会在 vm 上;
3. methods 中配置的函数，不要用箭头函数！否则 this 就不是 vm 了，直接指向 window;
4. methods 中配置的函数，都是被Vue所管理的函数，this 的指向是 vm 或组件实例对象;
5. @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参;
6. 理论上这些方法写到 data 中也可以被调用，但是会被做多余的数据代理，浪费性能。
复制代码
<body>
    <div id="root">
        ~事件代理~ {{ name }}
        <!-- <button v-on:click="showpop">点我弹窗！</button> -->
        <button @click="showpop1">点我弹窗！不传参</button>
        <button @click="showpop2(22, $event)">点我弹窗！传参</button>
    </div>
</body>

<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: 'Nihao'
        },
        methods: {
            showpop1(event) {
                console.log(this == vm)
                alert(event.target.innerText)
            },
            showpop2(num, event){
                alert(num + event.target.innerText)
            }
        }
    })
</script>
复制代码

 

posted @   夕苜19  阅读(33)  评论(0)  编辑  收藏  举报
相关博文：
· [Vue]内置指令
· [Vue]事件修饰符
· Vue事件的处理
· 06事件的基本使用
· vue学习——事件处理
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· .NET10 - 预览版1新功能体验（一）
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛