【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

文章作者: 技术潘
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 技术潘 !
  目录