指令系统之事件指令

事件指令

指令释义
v-on 触发事件（不推荐）
@ 触发事件（推荐）
@[event] 触发event事件（可以是其他任意事件）

v-on:click 可以缩写成@click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件指令</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <button v-on:click="handleClick1">点我1</button>
    <!-- 下面这个用的多 -->
    <button @click="handleClick2">点我2</button>
    <!-- 如果不传参数，是没有区别的 -->
    <button @click="handleClick3()">点我3-1(带括号)</button>
    <!-- 如果要传参数 -->
    <button @click="handleClick3(1,22,333)">点我3-2(带括号+参数)</button>
    <!-- 传入事件 -->
    <button @click="handleClick4($event)">点我4(带事件参数)</button>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {

        },
        methods: {
            handleClick1() {
                console.log('点我1')
            },
            handleClick2() {
                console.log('点我2')
            },
            handleClick3(a,b,c) {
                console.log(a,b,c)
            },
            handleClick4(event) {
                console.log(event)
            },
        }
    })
</script>
</html>

 

posted @ 2022-04-11 17:51  那就凑个整吧  阅读(73)  评论(0)  编辑  收藏  举报