Vue3基础学习笔记（二）Vue基础语法6-事件绑定

事件绑定

基础内容

知识点：

1. 如果在methods中要额外传递参数，同时要获取原生的事件对象，要在模板中使用 $event变量，这就指原生的事件对象

<script>
    const app= Vue.createApp({
        data(){
            return{
                counter:0
                }
        },
        methods: {
            handleAddBtnClick(num,event){
                this.counter +=num;
                console.log(event)
            }
        },
        template:`
            {{counter}}
            按钮
            `
    });
    const vm = app.mount('#root');
script>

2. 绑定一个事件支撑多个函数时，用逗号间隔，并且加括号

<script>
    const app= Vue.createApp({
        data(){
            return{
                counter:0
                }
        },
        methods: {
            handleAddBtnClick(){
                alert(1)
            },
            handleAddBtnClick1(num,event){
                alert(2)
            }
        },
        template:`
            {{counter}}
            按钮
            `
    });
    const vm = app.mount('#root');
script>

修饰符

事件修饰符

知识点：

1. .stop 停止冒泡

<script>
    const app= Vue.createApp({
        data(){
            return{
                counter:0
                }
        },
        methods: {
            handleAddBtnClick(){
               this.counter+=1
            },
            handleDivclick(){
                alert('divClick')
            }
        },
        template:`
            {{counter}}
            

            按钮
            
            `
    });
    const vm = app.mount('#root');
script>

2. .self只执行自身触发的事件，不执行子标签触发的事件

<script>
    const app= Vue.createApp({
        data(){
            return{
                counter:0
                }
        },
        methods: {
            handleAddBtnClick(){
               this.counter+=1
            },
            handleDivclick(){
                alert('divClick')
            }
        },
        template:`
            

            {{counter}}
            按钮
            
            `
    });
    const vm = app.mount('#root');
script>

3. .prevent阻止默认行为
4. .capture将时间变为捕获模式（从外到内）
5. .once 事件只执行一次
6. .passive提升滚动性能

按键修饰符

知识点：

1. .enter 按下键盘（enter键）时，才会执行
2. 其他例如 .tab 、.delete 、.esc、.up、.down 、 .left 、.right

<script>
    const app= Vue.createApp({
        data(){
            return{
                }
        },
        methods: {
            handleKeyDown(event){
                console.log('keydown')
            }
        },
        template:`
            

                
            
            `
    });
    const vm = app.mount('#root');
script>

鼠标修饰符

.left、 .right、 .middle 分别为：鼠标左键，右键，中间滚轮

精确修饰符

.exact

<script>
    const app= Vue.createApp({
        data(){
            return{

                }
        },
        methods: {
            handleClick(event){
                console.log('Click')
            }
        },
        template:`
            

                
123
            
            `
    });
    const vm = app.mount('#root');
script>