v-on 绑定事件

v-on 绑定事件

1.可以用'v-on'指令监听 DOM 事件
2.'v-on'中要处理的逻辑比较复杂，因此不支持直接在'v-on'中直接写js代码，但支持方法，内联处理，和对象的形式(2.4.0+ 支持)
2.1.着重说明不支持在'v-on'中写js代码指的是:
<button v-on:click="alert('a')">v-on按钮</button>
如果这么写必须是在vue实例对象的method中有定义alter方法才行，否则不支持js的alert使用。
3.'v-on' 的缩写是@符号

v-on -- 方法处理器和内联处理器

1.两者区别写法上，带不带括号
2.两者区别参数上，方法处理由于没有括号不支持传参但只带event，内联由于带括号支持传参，但必须$evnet 当参数传入才有evet事件。

方法处理器

1.使用的时候不带括号就是方法处理案例:<button v-on:click="doThis"></button>
2.下面案例是根据官方我自己延伸案例，很巧妙的配内联函数法处理，实现的效果当点button时候触发了evet事件，进入if判断中，然后执，在这就可以更加明确的看出内联和方法的区别，自带evet事件和传参区别行，完毕后接着执行下个alert 弹出框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div id="app" >
        <button v-on:click="doThis">v-on按钮</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            methods:{
                // es6 语法
                doThis(){
                    if (event) {
                        alert(event.target.tagName)
                    }
                    alert('我是方法处理器')
                }
            },
        })
    </script>
</body>
</html>
内联处理器
1.使用的时候带括号:
<button v-on:click="doThat('hello，'$ event)"</button>
2.带括号的好处是可以传参，但不自带evet 事件，想使用event事件需要$event参数传入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div id="app" >
        <button v-on:click="doThat('hello', $event)">v-on按钮</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            methods:{
                // es6 语法
                doThat(parameter, event){
                    let msg = parameter + "内联方法";
                    if (event) {
                        alert(event.target.tagName)
                    }
                    alert(msg);
                }
            },
        })
    </script>
</body>
</html>
参考文章

在Vue.js中什么是内联处理器？

v-on -- 对象处理(2.4+)

1.根据官方api介绍，在2.4.0+版本已经开始提供可以传入对象的写法，这种写法
的好处是什么，参考下面同一个功能实现，在这之前的写法和现在的写法。
2.之前写法: <p @mouseover ="doTish" @mouseout ="doThat">对象形式</p>
3.现在写法: <p v-on="{ mouseover: doTish, mouseout: doThat }">对象形式</p>
案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app" >
    <p v-on="{ mouseover: doTish, mouseout: doThat }">对象形式</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        methods:{
            doTish(){
                event.target.style.color = "red";
            },

            doThat(){
                event.target.style.color = "#0f0";
            },
        },
    })
</script>
</body>
</html>

v-on:keyup -- 监听按键触发

1.有时候想根据键盘/鼠标上的按键触发指定的功能这时候需要keyup
2.配合keyup 有两种第一种直接使用按键别名，第二种使用定义按键序号位置
3.常见的按键别名:
    '.enter'
    '.tab'
    '.delete'(捕获“删除”和“退格”键)
    '.esc'
    '.space'
    '.up'
    '.down'
    '.left'
    '.right'
4.按键序号网址查询:'http://www.cnblogs.com/wuhua1/p/6686237.html'
5如果想全局配置且使用别名的方式建议这种全局书写配置:
    // 可以使用 `v-on:keyup.f1`
    Vue.config.keyCodes.f1 = 112
6.组件按键使用：
    <!-- Ctrl + Click -->
    <div @click.ctrl="doSomething">Do something</div>
7.规定组合按键顺序('exact')：
    <!-- 有且只有 Ctrl 被按下的时候才触发 -->
    <button @click.ctrl.exact="onCtrlClick">A</button>
案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app" >
    <!--鼠标点击+ctrl 才能触发-->
    <p @click.ctrl.exact ="doTish">对象形式</p>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        methods:{
            doTish(){
                event.target.style.color = "red";
            },

        },
    })
</script>
</body>
</html>

事件修饰符

1.事件修饰符可以解决到点击事件自身带的一些事件效果
    '.stop'      -- 阻止事件冒泡
    '.prevent'   -- 阻止默认事件
    '.capture'   -- 添加事件侦听器时使用事件捕获模式
    '.self'      --只当事件在该元素本身（比如不是子元素）触发时触发回调
    '.once'      --事件只触发一次
阻止事件冒泡 -- stop
1.多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素事件触
发了，外面的元素的该事件自动的触发了，注意相同事件(都是点击事件，中点击
叫做事件)
2.事件冒泡从里向外
3.阻止事件冒泡使用stop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <style>
        .inner{
            width: 200px;
            height: 200px;
            background-color: darkseagreen;
        }
    </style>
</head>
<body>
<div class="inner" id="app" @click="divClick">
    <input type="button" value="点击" @click.stop="inputClick">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        // data 负责输出理数据的
        data:{
        },
        // methods 负责处理调用方法的
        methods:{
            divClick(){
                console.log("最外层div")
            },
            inputClick(){
                console.log("最内层div")
            }
        }
    })
</script>
</body>
</html>
  • 点击按钮效果:
最外层div
实现捕获触发事件的机制 -- capture
1.冒泡是从向外依次触发，使用capture，就变成了从先显示外面，在显示里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <style>
        .inner{
            width: 200px;
            height: 200px;
            background-color: darkseagreen;
        }
    </style>
</head>
<body>
<div class="inner" id="app" @click.capture="divClick">
    <input type="button" value="点击" @click="inputClick">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        // data 负责输出理数据的
        data:{},
        // methods 负责处理调用方法的
        methods:{
            divClick(){
                console.log("最外层div")
            },
            inputClick(){
                console.log("最内层div")
            }
        }
    })
</script>
</body>
</html>
  • 打印结果
最外层div
最内层div
只会阻止自己身上冒泡行为 -- self
1.只会阻止自己身上冒泡行为 ,当有多层嵌套的时候，只会阻止有self 冒泡行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
    <style>
        .inner{
            width: 200px;
            height: 200px;
            background-color: darkseagreen;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="outer" @click="div2Handler">
        <div class="inner" @click.self="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
        </div>
    </div>
</div>
<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            div1Handler() {
                console.log('这是触发了 inner div 的点击事件')
            },
            btnHandler() {
                console.log('这是触发了 btn 按钮 的点击事件')
            },
            div2Handler() {
                console.log('这是触发了 outer div 的点击事件')
            }
        }
    });
</script>
</body>
</html>
  • 打印结果
这是触发了 btn 按钮 的点击事件
这是触发了 outer div 的点击事件
阻止默认事件 -- prevent
1.例如a标签默认事件就是点击跳转页面，为了阻止a标签的默认事件触发我
们绑定的事件，可以使用prevent
2.图片的默认事件禁止拖拽，如果想给图片设置拖拽效果的话记得做阻止默
认行为

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="www.baidu.com" @click.prevent.once="linkClick">百度</a>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        // data 负责输出理数据的
        data:{},
        // methods 负责处理调用方法的
        methods:{
            linkClick:function () {
                alert(1)
            }
        }

    })
</script>
</body>
</html>
  • 运行的效果
1.a标签不会页面跳转，反而点击后会弹出弹窗显示1
只触发一次默认行为
1.只触一次规定的默认行为
2.下面的案例第二次点击就会跳转页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue cdn 的网址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="www.baidu.com" @click.prevent.once="linkClick">百度</a>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        // data 负责输出理数据的
        data:{},
        // methods 负责处理调用方法的
        methods:{
            linkClick:function () {
                alert(1)
            }
        }
    })
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,839评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,543评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,116评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,371评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,384评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,111评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,416评论 3赞 400
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,053评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,558评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,756评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,324评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2赞 345

推荐阅读更多精彩内容