关于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 ...
随机推荐
- Java之使用NetworkInterface类获得网络接口信息
转:http://www.xuebuyuan.com/1037327.html
- VS.net中快捷键收缩和展开代码段 (转)
i. Ctrl-M-O 折叠所有方法 ii. Ctrl-M-P 展开所有方法并停止大纲显示(不可以再折叠了) iii. Ctrl-M-M 折叠或展开当前方法 iv. Ctrl-M-L展开所 ...
- eclipse中添加python开发环境
由于自己一直使用的是eclipse这个IDE,在写spark,java等都是用它,主要是用它比较顺手,也并不是觉得它有什么特别好的之处.下面主要介绍一下,在window系统下,eclipse中搭建py ...
- 使用JPype实现Python调用JAVA程序
''' Created on 2016年6月1日 @author: cero ''' import jpype jvmPath = jpype.getDefaultJVMPath() ext_clas ...
- 2016 2 - 23 arc中的所有权修饰符（_strong修饰符与_weak修饰符）
一 _strong修饰符 1._strong修饰符是id类型和对象类型默认的所有权修饰符.如下: id obj = [[NSObject alloc] init];//在没用明确变量所有权修饰符时,会 ...
- 4 多表代替密码之Hill 密码 2实现
该解密方法的KEY 不是一个数或者一段字符串,而是一个矩阵, 比如有个3*3的KEY: 那么如果我们要加密一个长度为N的字符串, 那么把N除以3,分成M个3个字母组成的小段, 对每个小段尽心加密: 1 ...
- UCanCode发布升级E-Form++可视化源码组件库2015全新版 (V23.01)！
2015年4月. 成都 UCanCode发布升级E-Form++可视化源码组件库2015全新版 (V23.01)! --- 全面性能提升,UCanCode有史以来最强大的版本发布! E-Form++可 ...
- npm(cnpm)介绍
1.npm(node package manager) nodejs的包管理器,用于node插件管理(安装.卸载.更新.管理依赖等); 2.使用npm安装安装插件: 1).命令提示符执行 npm in ...
- Appweb写法
web.xml v2.3 <?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE web- ...
- 在ubuntu14.04 64位虚拟机中安装mysql
因为在win10 系统上手贱的将mysql卸载掉了之后有个插件一直无法正常删除导致只能将mysql装到ubuntu虚拟机上, 宝宝心里都是累啊,所以记录下来自己的安装过程2333 命令行操作: &qu ...