关于vue.js中事件处理器的练习
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件处理器</title>
</head>
<body>
<!-- 监听事件 -->
<!-- 可以用v-on监听DOM事件触发js -->
<div id="app-1">
<button v-on:click="counter+=1">增加1</button>
<p>你点击了{{counter}}次</p>
</div>
<!-- 方法事件处理器 v-on可以接受一个方法名 -->
<div id="app-2">
<button v-on:click="great">Great</button>
</div>
<!-- 内联处理器方法 -->
<div id="app-3">
<button v-on:click="say('hi')">点击</button>
</div>
<!-- 如果在内联处理器中需要使用到原生的DOM -->
<!-- vue提供了$event -->
<div id="app-4">
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
</div>
<!-- vue為了让methods只是纯粹的去处理数据逻辑 将处理DOM细节用(.)去表示 -->
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 按键修饰符 -->
<!-- 在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： -->
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名： -->
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
<!-- 全部的按键别名：
enter
tab
delete (捕获 “删除” 和 “退格” 键)
esc
space
up
down
left
right
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112 -->
<script src="js/vue.js"></script>
<script src="js/vuetext.js"></script>
</body>
</html>
js:
var app1=new Vue({
el:'#app-1',
data:{
counter:0
}
});
var app2=new Vue({
el:'#app-2',
data:{
name:'猴猴呀'
},
methods:{
great:function () {
alert(this.name)
}
}
});
var app3=new Vue({
//记得写#！！！！！！！！！！！！
el:'#app-3',
methods:{
say:function (message) {
alert(message)
}
}
});
var app4=new Vue({
el:'#app-4',
methods:{
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) {
event.preventDefault()
alert(message)
}
}
}
}
});
关于vue.js中事件处理器的练习的更多相关文章
- Vue.js：事件处理器
ylbtech-Vue.js:事件处理器 1.返回顶部 1. Vue.js 事件处理器 事件监听可以使用 v-on 指令: v-on <div id="app"> &l ...
- vue.js中，input和textarea上的v-model指令到底做了什么？
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- 详解Vue 方法与事件处理器
本篇文章主要介绍了详解Vue 方法与事件处理器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件 ...
- vue.js 中双向绑定的实现---初级
1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...
- vue.js 中 data, prop, computed, method，watch 介绍
vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
- 实例分析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...
- Vue.js中使用select选择下拉框
在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...
- [js]js中事件的3要素
js中事件的3要素 事件源 事件 事件处理程序 <!DOCTYPE html> <html> <head lang="en"> <meta ...
随机推荐
- android 测试 Monkey 和 MonkeyRunner 的使用
一.Monkey的使用 Monkey使用起来比较简单,简而言之就是模拟手机点击效果,随机发送N个点击动作给手机,主要对于程序的稳定和承受压力的测试. 1.首先连接上你的手机或者启动模拟器: 2.运行C ...
- 一次线上http接口调用不通相关的解决过程
2016-05-25 08:58:34 昨天线上小白系统因为调用外部http接口,超时不释放,导致页面反应很慢,时间一长,报502错误. 上网查了下,502错误是因为服务对于客户的请求没有得到及时的反 ...
- mac idea中 maven项目添加的时候没有java文件
file --other setting --maven 选中第二项即可 apply下
- XCode6.0的iOS免证书真机测试方法（MAC及黑苹果均有效）[转]
目前在XCode上开发的iOS程序只能在模拟器Simulator中运行,如果要放到真机上测试,需要苹果官方认证的开发者账号,购买开发者证书iDP,99美金一年啊!!! 作为刚开始学习iOS编程的菜鸟, ...
- knockout应用开发指南（完整版）
http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html
- wp8开发笔记之开发环境的搭建
开发工具的下载: Windows phone sdk 8.0下载地址: http://www.microsoft.com/ZH-CN/download/details.aspx?id=35471 开发 ...
- 关于freeCAD
FreeCAD界面 FreeCAD的功能目的是成为一个3D CAD 建模工具.她的开发完全遵循 Open Source (GPL & LGPL License)协议. FreeCAD的目标直指 ...
- JAVA抽象类与接口的详细解读与示例
接口存在的原因: JAVA是单继承的,不支持多继承,但是有了接口,JAVA可以实现多个接口: 一个类要是实现某一个接口就必须实现接口内声明的所有方法(强迫执行,即便是空方法,也要实现): 接口特点: ...
- linux下查看进程状态
1.查看进程的启动时间和执行时间 使用 ps 命令 :#ps -A -opid,stime,etime,args $ ps -A -opid,stime,etime,args PID STIME EL ...
- 【Windows】为节省系统资源，停掉不必要的服务
1.windows服务名称(注册表名称)和显示名称对照表如下: < 显示名称 状态 服务名称 Application Management demand AppMgmt ASP.NET Stat ...