vue之v-on
我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<button @click="counter += 1">{{counter}}</button>
<button v-on:click="cl">{{message}}</button>
<button @click="say('hi')">内联语句</button>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{
message: "hello",
counter:0,
test:''
},
methods:{
cl(){
this.message = this.message + ' vue!';
},
}
})
</script>
</body>
</html>
事件修饰符
- stop 阻止冒泡
- prevent 阻止默认事件
- capture 使用事件捕获模式
- self 只在当前元素本身触发
- once 只触发一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<button v-on:click="cl">{{message1}}</button>
<button v-on:click.once="c2">{{message2}}</button>
<a href="http://cnblogs.com" target="_blank">普通链接</a>
<a @click.prevent href="http://cnblogs.com" target="_blank">取消默认行为</a> </div>
<script>
var demo = new Vue({
el:'#demo',
data:{
message1: "hello",
message2: "hello",
counter:0,
},
methods:{
cl(){
this.message1 = this.message1 + ' vue!';
},
c2(){
this.message2 = this.message2 + ' vue!';
},
}
})
</script>
</body>
</html>
需要注意的是，使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。
鼠标修饰符
- left 左键
- right 右键
- middle 滚轮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<button @mouseup.right="right" @mouseup.middle="middle" @mouseup.left="left">{{message}}
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{
message: "hello",
text:'点我'
},
methods:{
left(){
this.message = 'left'
},
right(){
this.message = 'right'
},
middle(){
this.message = 'middle'
},
}
})
</script>
</body>
</html>
分别点击鼠标左键，右键和滚轮时，会触发不同的事件：
键值修饰符
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符。
- .enter
- .tab
- .delete (捕获 “删除” 和 “退格” 键)
- .esc
- .space
- .up
- .down
- .left
- .right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<button v-on:keyup.enter="enter">{{message}}<br>
<button @keyup.tab="tab">{{message}}<br>
<button @keyup="show($event)">{{message}}<br>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{
message: "hello",
},
methods:{
enter(){
this.message = 'enter'
},
tab(){
this.message = 'tab'
},
show(e){
this.message = e.keyCode
}
}
})
</script>
</body>
</html>
表单事件
在进行表单提交时，页面会刷新，导致我们绑定的表单提交事件执行出问题，会避免刷新，我们需要使用阻止修饰符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<form v-on:submit.prevent="onSubmit">
<input type="text"><br />
<input type="submit" value="提交">
</form>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{
message: "hello",
},
methods:{
onSubmit(){
alert('提交')
},
}
})
</script>
</body>
</html>
vue之v-on的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- Vue基础（环境配置、内部指令、全局API、选项、内置组件）
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- vue集成环信IM
vue 集成环信im 简单demo 环信AppKey:1106190415055331#test 测试账号: test1 123456 test2 123456 test3 123456 默 ...
- Vue main.js 文件中全局组件注册部分
在 \src\components\index.js 文件中export组件 import HeaderList from './HeaderList' import HeaderMenu from ...
- vue.js的ajax和jsonp请求
首先要声明使用ajax 在 router下边的 Index.js中 import VueResource from 'vue-resource'; Vue.use(VueResource); ajax ...
- 如何在Vue项目中使用Typescript
0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...
- vue基础响应式数据
1.vue 采用 v……vm……m,模式,v---->el,vm---->new Vue(实例),m---->data 数据,让前端从操作大量的dom元素中解放出来. 2.vue响应 ...
- vue.js 配置axios 用来ajax请求数据
* 用npm 安装 axios 切换到项目的根目录 npm install --save axios vue-axios * 在vue的入口文件./src/main.js 中引入axios, 添加2行 ...
- 第六十二篇：Vue的双向绑定与按键修饰符
好家伙,依旧是vue的基础 1.按键修饰符 假设我们在一个<input>框中输入了12345,我们希望按一下"Esc" 然后删除所有前面输入的内容,这时候,我们会用到按 ...
- 微信小程序探究
前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注.拖到现在正好借组内分享的时机来仔细了解一下微信小程序.了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来 ...
随机推荐
- NYOJ 12：喷水装置（二）（贪心，区间覆盖问题）
12-喷水装置(二) 内存限制:64MB 时间限制:3000ms 特判: No 通过数:28 提交数:109 难度:4 题目描述: 有一块草坪,横向长w,纵向长为h,在它的橫向中心线上不同位置处装有n ...
- The 2018 ACM-ICPC Asia Qingdao Regional Contest, Online -C：Halting Problem（模拟）
C Halting Problem In computability theory, the halting problem is the problem of determining, from a ...
- BOM-JavaScript浏览器的对象模型
BOM-JavaScript是运行在浏览器中的,所以提供了一系列对象用于和浏览器窗口进行交互,这些对象主要包括window.document.location.navigator和screen等.通常 ...
- 前端开发利器： Bootstrap + AngularJS
http://blog.csdn.net/conquer0715/article/details/51181391 概述 在HTML5盛行的互联网时代,涌现诸多的前端html/css/js框架,基于其 ...
- Extend a root LVM partition online
There is also a quick remedy for the emergency situation when your root partition runs out of disk s ...
- 【BZOJ3527】【ZJOI2014】力
"FFT还不是随手写?"我终于能说这样的话了இwஇ 原题: 给出n个数qi,给出Fj的定义如下: 令Ei=Fi/qi,求Ei. FFT嘛,直接推公式 然后就变成俩卷积了,FFT ...
- 【mybatis源码学习】利用maven插件自动生成mybatis代码
[一]在要生成代码的项目模块的pom.xml文件中添加maven插件 <!--mybatis代码生成器--> <plugin> <groupId>org.mybat ...
- LG3187 [HNOI2007]最小矩形覆盖
题意 题目描述 给定一些点的坐标,要求求能够覆盖所有点的最小面积的矩形,输出所求矩形的面积和四个顶点坐标 输入输出格式 输入格式: 第一行为一个整数n(3<=n<=50000),从第2至第 ...
- React中的Context——从父组件传递数据
简介:在React中,数据可以以流的形式自上而下的传递,每当你使用一个组件的时候,你可以看到组件的props属性会自上而下的传递.但是,在某些情况下,我们不想通过父组件的props属性一级一级的往下传 ...
- zeebe 为微服务架构的工作流引擎
zeebe 是灵活.轻量的基于微服务架构的工作流引擎 包含以下特性: 可视化的额工作流 审计日志以及历史 水平缩放 持久化&&容错 消息驱动 操作容易 语言无关 工作流基于标准bpmn ...