vue.js事件处理-阿里云开发者社区

vue.js事件处理

2022-11-08 107

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue.js事件处理

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css">
        .Odiv1{
            width: 80px;
            height: 80px;
            background: #aaa;
            margin: 5px;
        }
        .Odiv2{
            width: 50px;
            height: 50px;
            background: #ccc;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
   <div id="app">
        <h3>一、事件处理</h3>
        <h4>1、鼠标事件</h4>
        <!-- increment增加   -->
        <button @click="inc($event)">+</button>
        <!-- v-bind单向绑定，只能显示data中的数据值 -->
        <!-- v-model双向绑定，既可以显示data的值，也可以修改data的数据 -->
        <input type="text" style="width: 50px;" v-bind:value="count" @keyup.up="inc($event)" @keyup.down="dec($event)">
        <!-- decrement减少   -->
        <button @click="dec($event)">-</button>
        <h4>2、键盘事件</h4>
        <!-- $event表示事件对象，只要产生一个事件，就会自动生成对应的事件对象，在该对象中保存与事件相关的信息 -->
        <!-- enter表示必须敲回车才会触发事件处理程序 -->
        <!-- tab键只能用keydown去监听-->
        <input type="text" @keyup.enter="handleKey($event)" placeholder="请敲击回车">
        <input  @keyup.shift.s="handleSave()" placeholder="请敲击shift+s">
        <h3>二、事件修饰符</h3>
        <h4>1、阻止事件冒泡</h4>
        <div @click="doParent()">
            <button @click="doThis()">事件冒泡</button>
            <button @click.stop="doThis()">阻止事件冒泡</button>
        </div>
        <h4>2、阻止默认行为</h4>
        <div @click="doParent()">
            <a href="https://www.baidu.com">不阻止默认行为</a>
            <a href="https://www.baidu.com" @click.prevent>阻止默认行为</a>
            <a href="https://www.baidu.com" @click.prevent.stop>既阻止默认行为又阻止事件冒泡</a>    
        </div>
        <h4>3、设置事件传播方向为捕获方向，也就是从父元素向子元素传播事件</h4>
        <div @click.capture="doParent()">
            <button @click="doThis()">事件捕获</button>
        </div>
        <h4>4、设置事件自身触发</h4>
        <div class="Odiv1" @click.self="doParent()">a
            <div class="Odiv2" @click="doThis()">b</div>
        </div>
        <h4>5、设置事件只触发一次</h4>
        <button>只执行一次</button>
   </div>
   <script>
       var vm = new Vue({
            el: '#app',
            data: {
                count: 0
            },
            methods: {
                inc(e){
                    this.count++;
                    // 通过事件对象的target属性获取真正引起该事件的那个网页标签
                    console.log(e.target.tagName)
                },
                dec(e){
                    this.count--;
                    console.log(e.target.tagName)
                },
                handleKey(e){
                    console.log('键盘被敲击了');
                    console.log('用户敲击了'+e.key);
                    // if(e.key=='Enter'){
                    //     alert('通过测试')
                    // }
                    alert('通过测试')
                },
                handleSave(){
                    console.log('shift+s组合键被敲击了');
                },
                doParent(){
                    console.log("我是父元素单击事件");
                },
                doThis(){
                    console.log("我是当前元素的单击事件");
                }
            }
       })
   </script>
</body>
</html>

vue.js事件处理

热门文章

最新文章

相关课程

相关电子书

相关实验场景