[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 @ 2023-10-18 13:59  夕苜19  阅读(27)  评论(0)  编辑  收藏  举报