Vue深度学习-方法与事件处理器

Posted BluesQian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue深度学习-方法与事件处理器相关的知识,希望对你有一定的参考价值。

方法处理器

可以用 v-on 指令监听 DOM 事件:

<div id="app">
    <button v-on:click = "greet">Greet</button>
</div>

Js代码

new Vue({
    el: ‘#app‘,
    data: {
        message: ‘菜鸟教程!‘
    },
    methods:{
        greet:function () {
            alert("OP");
        }
    }
})

内联语句处理器

除了直接绑定到一个方法,也可以用内联 javascript 语句:

<div id="app">
    <button v-on:click = "greet(‘welcome‘)">Greet</button>
</div>

Js代码

new Vue({
    el: ‘#app‘,
    data: {
        message: ‘菜鸟教程!‘
    },
    methods:{
        greet:function (msg) {
            alert(msg);
        }
    }
})

有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法:

<button v-on:click="say(‘hello!‘, $event)">Submit</button>

js代码:

new Vue({
  el: ‘#example‘,
  methods: {
    say: function (msg, event) {
    // 现在我们可以访问原生事件对象
    event.preventDefault()
  }
  }
})

事件修饰符

在事件处理器中经常需要调用 event.preventDefault() 或 event.stopPropagation()。尽管我们在方法内可以轻松做到,不过让方法是纯粹的数据逻辑而不处理 DOM 事件细节会更好。为了解决这个问题,Vue.js 为 v-on 提供两个事件修饰符:.prevent 与 .stop

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

按键修饰符

在监听键盘事件时,我们经常需要检测 keyCodeVue.js允许为v-on添加按键修饰符:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难,Vue.js 为最常用的按键提供别名:

<!-- 同上 -->
<input v-on:keyup.enter="submit">

常用按键别名:enter、tab、delete、esc、space、up、down、left、right

以上是关于Vue深度学习-方法与事件处理器的主要内容,如果未能解决你的问题,请参考以下文章

vue3学习随便记7

vue3学习随便记7

Vue学习笔记——制作一个todoList

14 深度学习-卷积

14 深度学习-卷积

vue 事件处理器