关于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 ...
随机推荐
- 0-1背包问题python解决
def f(i,j): while i>=0: if i==0 and j>=l[i][0]: return l[i][1] elif i==0 and j<l[i][0]: ret ...
- CFD计算
47 求解器为flunet5/6在设置边界条件时,specify boundary types下的types中有三项关于interior,interface,internal设置,在什么情况下设置相应 ...
- 会游走的TextView
//自定义的TextView package com.bwie.androidtest; import android.content.Context; import android.graphics ...
- Java泛型学习笔记 - (二)泛型类
1. 我们先写一个没有泛型的类Box: public class Box { private Object obj; public Box() {} public Object getObj() { ...
- Cordova+ionic 开发hybird App --- 开发环境搭建
Cordova 开发hybird App 开发环境搭建 一．一些基础概念: Ant : 简单说来可以这么理解,如果你用记事本写JAVA程序,然后在cmd里输入javac命令编译它,但是有一天你发现每次 ...
- [WinForm] VS2010发布、打包安装程序
最近用到了VS2010WinForm的程序打包功能,网上发现一篇好帖,在此记录以供日后他人之需. 原文链接地址:http://www.mamicode.com/info-detail-2453.htm ...
- kendo ui之grid列表
1.test_grid.jsp <html><head> <%@ include file="/WEB-INF/jsp/common/top.jsp" ...
- JavaScript Module Pattern: In-Depth
2010-03-12 JavaScript Module Pattern: In-Depth The module pattern is a common JavaScript coding patt ...
- RTL-SDR + GnuRadio+RFcat 分析、重放无线遥控信号
0×00 前言 前段时间在<永不消逝的电波(二)HackRF入门:家用无线门铃信号重放> 一文中通过HackRF录制.重放了无线遥控信号,不过一直没来得及对信号进行分析,刚好在国外网站看到 ...
- 上传文件swfUploadConfig.js
/*/* * Unobstrusive swf upload widget using jQuery. *example : $(':file.uo_widget_form_input_file_sw ...