基本语法

定义事件

const app = Vue.createApp({
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        handleBtnClick() {
           this.counter += 1
        }
    },
    template: `
    <div>
        {{counter}}
       <button @click = "handleBtnClick">按钮</button>
    </div>
`
})
const vm = app.mount('#root')

获取原生的事件对象evet

事件函数的第一个参数默认是事件对象evet

 const app = Vue.createApp({
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        handleBtnClick(event) {
           this.counter += 1
           console.log(event);
        }
    },
    template: `
    <div>
        {{counter}}
       <button @click = "handleBtnClick">按钮</button>
    </div>
`
})
const vm = app.mount('#root')

调用函数的时候固定传参

 const app = Vue.createApp({
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        handleBtnClick(step) {
           this.counter += step
           console.log(event);
        }
    },
    template: `
    <div>
        {{counter}}
       <button @click = "handleBtnClick(2)">按钮</button>
    </div>
`
})
const vm = app.mount('#root')

调用事件函数的时候传固定参数如何获取到事件对象event？

const app = Vue.createApp({
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        handleBtnClick(step,event) {
           this.counter += step
           console.log(event);
        }
    },
    template: `
    <div>
        {{counter}}
       <button @click = "handleBtnClick(2,$event)">按钮</button>
    </div>
`
})
const vm = app.mount('#root')

如果要额外的传入参数，同时要获取到事件对象event，那么在模板中要使用$event传入原生的事件

一次调用多个函数

const app = Vue.createApp({
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        handleBtnClick1() {
            alert("1")
        },
        handleBtnClick2() {
            alert("2")
        }
    },
    template: `
    <div>
        {{counter}}
       <button @click = "handleBtnClick1(),handleBtnClick2()">按钮</button>
    </div>
`
})
const vm = app.mount('#root')

事件修饰符

.stop

阻止事件冒泡

 const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods: {
            handleDivClick() {
                alert("div click")
            },
            handleBtnClick() {
                this.counter += 1
            }
        },
        template: `
        <div @click="handleDivClick">
            {{counter}}
           <button @click = "handleBtnClick">按钮</button>
        </div>
    `
    })
 const vm = app.mount('#root')

当点击按钮触发handleBtnClick但也触发了handleDivClick,这是因为时间冒泡，当点击handleBtnClick的div的时候，会把click事件冒泡到它的上一层div上

如何停止事件冒泡呢？

const app = Vue.createApp({
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        handleDivClick() {
            alert("div click")
        },
        handleBtnClick() {
            this.counter += 1
        }
    },
    template: `
    <div @click="handleDivClick">
        {{counter}}
       <button @click.stop = "handleBtnClick">按钮</button>
    </div>
`
})
const vm = app.mount('#root')

当在点击事件上加上.stop修饰符后就阻止了事件的冒泡

.self

只有点击自己的DOM才触发事件，点击它的子标签的DOM不触发事件

 const app = Vue.createApp({
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        handleDivClick() {
            alert("div click")
        },
        handleBtnClick() {
            this.counter += 1
        }
    },
    template: `
    <div @click="handleDivClick">
        {{counter}}
       <button @click = "handleBtnClick">按钮</button>
    </div>
`
})
const vm = app.mount('#root')

当点击button按钮和counter的时候都会触发handleDivClick方法

那么如何让它只有点击自己的时候触发handleDivClick方法？

 const app = Vue.createApp({
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        handleDivClick() {
            alert("div click")
        },
        handleBtnClick() {
            this.counter += 1
        }
    },
    template: `
    <div @click.self="handleDivClick">
        {{counter}}
       <button @click = "handleBtnClick">按钮</button>
    </div>
`
})
const vm = app.mount('#root')

当给handleDivClick加上.self修饰符后，那么只有它自己本身的DOM才会触发事件，当点击button的时候判断为handleDivClick不是自己触发的所以就不触发

.prevent

阻止事件的默认行为

.capture

默认事件是按冒泡的形式绑定的，它会把冒泡模式(从内向外)改为捕获模式(从外向内)

.once

事件绑定只执行一次

.passive

每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。

按键修饰符

有很多比如

• .enter
• .tab
• .delete
• .esc
• .up
• .down
• .left
• .right

const app = Vue.createApp({
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        handleKeyDown() {
            console.log("div click")
        }
    },
    template: `
    <div>
        <input @keydown.enter="handleKeyDown"/>
    </div>
`
})
const vm = app.mount('#root')

鼠标修饰符

比如：

• .left
• .right
• .middle

精确修饰符 .exact

如下面的代码，当给click事件加上.ctrl后，不管是按ctrl + A 还是ctrl的其他组合键，都会触发handleClick

const app = Vue.createApp({
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        handleClick() {
            console.log("div click")
        }
    },
    template: `
    <div>
        <div @click.ctrl="handleClick">123</div>
    </div>
`
})
const vm = app.mount('#root')

那么我们有没有什么办法控制，在只按ctrl键才会触发handleClick事件？

   const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods: {
            handleClick() {
                console.log("div click")
            }
        },
        template: `
        <div>
            <div @click.ctrl.exact="handleClick">123</div>
        </div>
    `
    })
    const vm = app.mount('#root')