vue.js事件处理

简介: 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>
相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
3月前
|
JavaScript 前端开发
js事件队列
js事件队列
139 55
|
29天前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
30 2
|
2月前
|
JavaScript 前端开发
JavaScript 事件
JavaScript 事件
34 2
|
3月前
|
JavaScript 前端开发
javascript中常用的事件
这篇文章列出并演示了JavaScript中常用的DOM事件,包括失去焦点、获得焦点、鼠标点击、键盘事件等,并展示了如何通过直接在HTML标签中使用事件句柄和通过JavaScript为元素添加事件监听器两种方式来注册事件。
|
3月前
|
JavaScript 前端开发
JavaScript 事件的绑定
JavaScript 事件的绑定
37 0
|
16天前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
40 6
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
22 5
|
19天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
45 0
|
2月前
|
监控 JavaScript 前端开发