Vue学习记录

最新推荐文章于 2024-11-12 16:34:34 发布

spirit_ferry

最新推荐文章于 2024-11-12 16:34:34 发布

阅读量261

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/spirit_ferry/article/details/124625247

版权

Vue事件绑定

<body>
    <div id="main"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                counter: 0
            }
        },
        methods: {
            handleAdd(event) {
                // this.counter += 1;
                // console.log(event.target);
                alert(1)
            },
            handleAdd1(event) {
                // this.counter += 1;
                // console.log(event.target);
                alert(2)
            }
        },
        template: `
            <div>
                {{counter}}
                <button @click="handleAdd(),handleAdd1()">增加</button>      
            </div>
                `
    });
    const vm = app.mount("#main");
</script>

v-on（@）绑定事件，绑定的事件方法写在methods里面，也可以直接在绑定事件时写js表达式<button @click="counter +=1">增加</button> ，一般不建议使用这种方法，最好将方法写在methods内。
v-on（@）绑定原生事件，可以接收到一个事件对象（event），在vue中也可以接收到event对象。常用event.target可以获取当前绑定事件的元素
调用事件绑定的方法时，可以直接传参数：<button @click="handleAdd(2，$event)>增加</button> // $event 用于获取原生的事件对象
一个事件对象可能需要绑定多个事件方法，可以在绑定的时候，绑定多个方法用逗号间隔，调用的时候不能用引用需要调用方法执行（加括号）<button @click="handleAdd(),handleAdd1()">增加</button>
事件绑定中的修饰符：<button @click.stop="handleAdd()">增加</button>
1. .stop修饰符：阻止事件的冒泡
2. .self修饰符：只有点击自己的时候触发点击事件（会对点击进行判断，是否是自己，子元素不触发点击事件）
3. .prevent修饰符：阻止默认行为
4. .capture:修改事件为捕获模式
5. .once:事件绑定只触发一次
按键修饰符：<input @keydown="handlekeydown"></input>
1. .enter修饰符：按回车键时执行绑定的事件方法
2. .tab修饰符：按下tab键的时候执行绑定的事件方法
3. .delete修饰符：按下delete键的时候执行绑定的事件方法
4. .esc修饰符，.up修饰符，.down修饰符，.left修饰符，.right修饰符
鼠标修饰符：<div @click.left="handleClick"></div>
1. .left修饰符：点击鼠标左键触发绑定事件
2. .right修饰符：点击鼠标右键触发绑定事件
3. .middle修饰符：点击鼠标中间键触发绑定事件
精确修饰符：.exact