【05】Vue基础：v-on的使用

点击事件

模板写法：

<button v-on:click="onClick">点击</button>
或简写：
<button @click="onClick">点击</button>

js写法：

var vm = new Vue({
    el: '#app',
    methods: {
        onClick() {
            alert('我被点击了');
        }
    }
})

在浏览器运行此文件后，点击里面的按钮可以看到成功弹出我被点击了。

回车事件

模板写法：

<input v-on:keyup.enter="onEnter" />
或简写：
<input @keyup.enter="onEnter" />

js写法：

var vm = new Vue({
    el: '#app',
    methods: {
        onEnter() {
            alert('我被回车了');
        }
    }
})

在浏览器运行此文件后，点击文本框，然后回车可以看到成功弹出我被回车了。

常见修饰符

在日常开发中，经常会使用event.preventDefault（阻止节点默认行为）和event.stopPropagation（阻止事件冒泡），Vue将其封装成简短易用的事件修饰符，可以写在事件名称的后面。

名称	说明
.stop	阻止事件冒泡
.prevent	阻止元素默认行为
.capture	阻止事件捕获
.self	限制事件仅作用于节点自身
.once	事件被触发一次后即解除监听
.passive	可用在移动端滚动事件中，限制事件永不调用preventDefault()方法

模版写法：

<form @submit.prevent="onSubmit">
    <button type="submit">提交</button>
</form>

js写法：

var vm = new Vue({
    el: '#app',
    methods: {
        onSubmit() {
            alert('我被提交了');
        }
    }
})

代码说明：当未指定form表单的action时，表单会被提交到当前的URL，所以可以使用.prevent阻止元素默认行为。

按键修饰符

别名修饰符	键值修饰符	对应按键
.delete	.8/.46	回车/删除
.tab	.9	制表
.enter	.13	回车
.esc	.27	退出
.space	.32	空格
.left	.37	左
.up	.38	上
.right	.39	右
.down	.40	下