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

、

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

查看所有标签

猜你喜欢:

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

码农书籍

Mathematica Cookbook

Sal Mangano / O'Reilly Media / 2009 / GBP 51.99

As the leading software application for symbolic mathematics, Mathematica is standard in many environments that rely on math, such as science, engineering, financial analysis, software development, an......一起来看看《Mathematica Cookbook》这本书的介绍吧!

码农工具

XML、JSON 在线转换

在线XML、JSON转换工具

html转js在线工具

RGB HSV 转换

RGB HSV 互转工具