VUE--v-on修饰符
1、v-on的修饰符
.stop:阻止事件冒泡
<div @click="getTitle">
阿Q
<button @click="getBut">按钮</button>
<button @click.stop="getBut2">按钮2</button>
</div>
.prevent：阻止默认行为
<form action="Baidu">
<input type="submit" value="提交">
<input type="submit" value="提交" @click.prevent="getSubmit">
</form>
.enter:监听enter(确认)键的情况-------（按下\弹起）
<input type="text" @keyup="getKeyup">
<input type="text" @keyup.enter="getKeyup">
.once：事件只触发一次
<button @click="getOnce">按钮</button>
<button @click.once="getOnce">按钮2</button>
******完整代码*******
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<div id="app">
<div @click="getTitle">
阿Q
<button @click="getBut">按钮</button>
<button @click.stop="getBut2">按钮2</button>
</div>
<br> <form action="Baidu">
<input type="submit" value="提交">
<input type="submit" value="提交" @click.prevent="getSubmit">
</form>
<br> <input type="text" @keyup="getKeyup">
<input type="text" @keyup.enter="getKeyup">
<br>
<br> <button @click="getOnce">按钮</button>
<button @click.once="getOnce">按钮2</button>
</div> <body>
<script>
let vm = new Vue({
el: '#app',
data: () => ({ }),
methods: {
getTitle: () => {
console.log("啊Q")
},
getBut: () => {
console.log('Btn')
},
getBut2: () => {
console.log('Btn2')
},
getSubmit: () => {
console.log('getSubmit')
},
getKeyup: () => {
console.log('getKeyup')
},
getOnce: () => {
console.log('getOnce')
}
}
})
</script>
</body> </html>
VUE--v-on修饰符的更多相关文章
- vue中的修饰符
Vue2.0学习笔记:Vue事件修饰符的使用 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理 ...
- Vue的事件修饰符
转载于:https://www.cnblogs.com/xuqp/p/9406971.html 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到meth ...
- vue 之 .sync 修饰符
在一些情况下,我们可能会需要对一个 prop (父子组件传递数据的属性) 进行“双向绑定”. 在vue 1.x 中的 .sync 修饰符所提供的功能.当一个子组件改变了一个带 .sync 的prop的 ...
- vue中.sync 修饰符
一直以来,都不太明白.sync的用法,归根结底原因在于,没有仔细阅读“.sync修饰符”. 正好,最近在拿一个项目练手,然后使用了elment-ui,然后在用到dialog的时候,属性visible是 ...
- Vue表单修饰符（lazy,number,trim）
lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步 <div id="example"> <input type="text ...
- 027——VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 026——VUE中事件修饰符之使用$event与$prevent修饰符操作表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 指令和修饰符
1. v-textv-text主要用来更新textContent,可以等同于JS的text属性. <spanv-text="msg"></span> 这两者 ...
- Vue 自定义按键修饰符
如点击F2 触发某个事件 <input type="button" name="" id="" value="添加" ...
- VUE中事件修饰符：stop prevent self capture
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
随机推荐
- 201871010105-曹玉中《面向对象程序设计（java）》第十周学习总结
201871010105-曹玉中<面向对象程序设计(java)>第十周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...
- Java虚拟机所管理的内存，包含的运行时数据区域？
运行时数据区域 线程私有(随用户线程的启动和结束而建立和销毁)或所有线程共享(随虚拟机进程的启动而存在) 抛出的异常 备注 程序计数器(Program Counter Register) 线程私有 唯 ...
- Zookeeper注册中心搭建-单机版（三）
Zookeeper是一个分布式协调组件,本质是一个软件. Zookeeper常用的功能有: 发布订阅功能,把 zookeeper 当作注册中心的原因. 分布式/集群管理功能 Zookeeper是Jav ...
- djang项目中的疑问及解决办法（ValueError: Invalid model reference 'apps.user.User'. String model references must be of the form 'app_label.ModelName'.）
这个问题其实就是apps.user.User这种用法是不对的,就在下面的模型中,我本来是绑定apps.user.User,但是试了一下,由于order和user是在同一个apps中,所以直接用user ...
- oracle左连接与右连接
left join(左联接) ---返回左表中的所有记录和右表中条件字段相等的记录. right join(右联接) ---返回右表中的所有记录和左表中联结字段相等的记录 inne ...
- 数据结构——链队列（linked queue）
/* linkedQueue.c */ /* 链队列 */ #include <stdio.h> #include <stdlib.h> #include <stdboo ...
- 前端css命名规范----BEM
一.什么是BEM BEM就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法可以使css类对其他开发者来说更加透明 ...
- docker--发布docker镜像
前戏 前面我们自己做了个docker镜像,我们可以上传到docker hub,别人就可以下载使用了 发布到docker hub 我们前面使用docker search 查找的镜像都是从docker h ...
- 【树论】FBI树
原题传送门 思路 讲这道题之前,先讲一个黑科技一般的函数:basic_string::substr(int x,int y). 这是一个string类的成员函数,它返回一个新的string对象,该对象 ...
- mac 下使用shell 命令 jq 解析json
官网 https://stedolan.github.io/jq/download/ 安装 brew install jq 创建json文件,file.json { , "msg" ...