Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter）

1、绑定监听@click:（以监听click为例，其他如keyup，用法类似）
v-on:click="fun"
@click="fun"
@click="fun(参数)"

  <button @click="test1">test1</button><button @click="test2('abc')">test2</button><button @click="test3('abcd', $event)">test3</button>methods: {test1(eve) {//test1函数没有参数，默认传递 $event alert(eve.target.innerHTML)  //test1},test2 (msg) { //test1函数有参数，传递该参数alert(msg)  // abc},test3 (msg, event) { //有参数，如果想获取到enevt，则函数中需要写 $eventalert(msg+'---'+event.target.textContent)  // abcd---test3}}

2、@click.stop与@click.prevent

@click.stop 阻止事件冒泡

@click.prevent 阻止事件的默认行为，

<a href="http://www.baidu.com" @click.prevent="test4">百度一下</a> //阻止a标签跳转，仅执行函数test4

<form action="/xxx" @submit.prevent="test5"> //阻止表单提交，仅执行函数test5

3、按键修饰符

@keyup.enter

//按下enter时，执行方法test7

methods: {

test7 (event) {
console.log(event.keyCode)
alert(event.target.value)
}

}

Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter）相关推荐

Vue知识（一）Vue基础语法
Vue知识一.邂逅Vue.js 1.认识Vue.js 2.Vue.js安装方式 3.Vue初体验 4.Vue的MVVM框架二.Vue基础语法 v-if指令 v-show指令 v-else指令 v- ...
Vue基础语法知识（自用，完整版）
Vue基础语法知识 1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法 3.root容器中里的代码被称为 ...
Vue——基础语法篇
Vue--基础语法篇 author:木子六日学习视频来源 coderwhy老师的vue教学文章目录 Vue--基础语法篇 author:木子六日学习视频来源 01.hello vue 02.vu ...
Vue -- 基础语法指令(v-bind，v-if，v-else，v-else-if，v-for）
文章目录 1. Vue--基础语法指令(v-bind,v-if,v-else,v-else-if,v-for) 1.1 v-bind 1.1.1 代码示例 1.1.2 运行结果 1.1.3 小结 1. ...
二、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v-else、v-show）、循环遍历（v-for遍历数组对象，key属性、检测数组更新）、图书案例、双向绑定
四.事件监听在前端开发中,我们需要经常和用于交互. 这个时候,我们就必须监听用户发生的时间,比如点击.拖拽.键盘事件等等在Vue中如何监听事件呢?使用v-on指令 v-on介绍作用:绑定事件监听 ...
第二天：Vue基础语法
1.计算属性的setter和getter 每个计算属性都有setter和getter 一般来说用到setter较少,都不希望数据被改动,所以只用getter时也有缩写 <!DOCTYPE htm ...
Vue 学习笔记（1） Vue 基础语法 + Axios 基本使用
Vue Vue 简介下载 Vue {{}}:插值表达式 v-text:显示文本 v-html:显示解析html标签的文本 v-on:事件绑定 v-show:控制页面元素隐藏与显示(display控制 ...
Vue基础语法必知必会
文章目录一.插值操作 1.Mustache语法 2.v-once指令的使用 3.v-html指令的使用 4.v-text指令的使用 5.v-pre指令的使用 6.v-cloak指令的使用二.动态绑 ...
vue学习资料：vue笔记ppt整理(vue基础指令vue基础语法)
vuejs基础语法:
前端——Vue基础语法
Vue介绍 Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件. 特点易用 ...

Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter）

Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter）相关推荐

最新文章

热门文章