vue事件（六）

内容简介：用事件修饰符有基本的6种使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用

<div id="test">
    <button @click="sayHi('你好')">说你好</button> <!--这里使用@-->
    <button @click="sayHi('我被点击了')">说我被点击了</button> <!--这里使用@-->
</div>
<script type="text/javascript">
    var myVue = new Vue({
        el: '#test',
        methods: {      //这里使用methods
            sayHi: function (message) {
                alert(message)
            }
        }
    })
</script>

二、vue访问原生 DOM 事件

用 $event 获取

<button @click="changeColor('你好',$event)">点击我</button> <!--这里使用@-->
<div style="height: 100px;width: 100px;background-color: red;" @mouseover="over('鼠标从我上面滑过',$event)">
    鼠标从我上面滑过试试
</div>
           
            
<script type="text/javascript">
    var myVue = new Vue({
        el: '#test',
        methods: {      //这里使用methods
            changeColor: function (message, event) {
                alert(message+event);    //弹出我被点击了,事件是[object MouseEvent]
            },
            over :function (message, event) {
                alert(message+event);   //弹出鼠标从我上面滑过,事件是[object MouseEvent]
            }
        }
    })
</script>

三、事件修饰符

事件修饰符有基本的6种

.stop阻止事件冒泡

<a v-on:click.stop="doThis"></a>

.prevent阻止默认事件

<form v-on:submit.prevent="onSubmit"></form>

.capture时间捕获（从上到下）

<div v-on:click.capture="doThis">...</div>

.self只在元素自身回调

<div v-on:click.self="doThat">...</div>

.once只触发一次

<a v-on:click.once="doThis"></a>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 `@click.prevent.self 会阻止所有的点击，而 @click.self.prevent` 只会阻止元素上的点击

四、键值修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符

<div id="app">
    {{msg}}
    <input type="text" v-on:keydown="ke"/>
</div>
<script>
var app = new Vue({
        el:"#app",
        data:{
            msg:"事件处理",
            counter:0
        },
        methods:{
            ke:function(e){
                if(e.keyCode == 13){
                    this.msg = e.target.value;
                    e.target.value = "";
                }
            }
        }
});
</script>

enter
tab
delete
esc
space
up
down
left
right

我们也可以通过全局 config.keyCodes 对象自定义键值修饰符别名

Vue.config.keyCodes.f1 = 112

、

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

哥德尔、艾舍尔、巴赫

[美] 侯世达 / 严勇、刘皓明、莫大伟 / 商务印书馆 / 1997-5 / 88.00元

集异璧－GEB，是数学家哥德尔、版画家艾舍尔、音乐家巴赫三个名字的前缀。《哥德尔、艾舍尔、巴赫书：集异璧之大成》是在英语世界中有极高评价的科普著作，曾获得普利策文学奖。它通过对哥德尔的数理逻辑，艾舍尔的版画和巴赫的音乐三者的综合阐述，引人入胜地介绍了数理逻辑学、可计算理论、人工智能学、语言学、遗传学、音乐、绘画的理论等方面，构思精巧、含义深刻、视野广阔、富于哲学韵味。中译本前后费时十余年，......一起来看看《哥德尔、艾舍尔、巴赫》这本书的介绍吧!

码农工具