关于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 指示器 tablatyout
<android.support.design.widget.TabLayout/>android 材料设计中新出的控件 package com.weavey.loadinglayout; ...
- Bootstrap 模态框在用户点击背景空白处时会自动关闭
问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...
- python 类、对象、方法、属性
在python中,一个对象的特征也称为属性(attribute).它所具有的行为也称为方法(method) 结论:对象=属性+方法 在python中,把具有相同属性和方法的对象归为一个类(class) ...
- net之工作流工程展示及代码分享(记录)
http://www.cnblogs.com/thanks/p/4183235.html
- SQL获取汉字首字母
)) ) as begin ) ) collate Chinese_PRC_CI_AS,letter )) insert into @t(chr,letter) select '吖','A' unio ...
- 谈谈对hibernate的理解
它是ORM思想的一个实现,对JDBC进行了很好的封装,它通过配置使JavaBean对象和数据库表之间进行映射,并提供对增.删.改.查便利的操作方法,同时支持事务处理,它对数据库记录还提供了缓存机制,提 ...
- mysql 新建用户、授权、远程访问
新建用户 insert into mysql.user(Host,User,Password) values("localhost","u",password( ...
- 通过a++来理解闭包改变作用域的问题
纯属个人理解,如果有误请指出! 让我们先看一段代码 function dog(){ var a=100; a++; return a; } alert(dog()); alert(dog()); 我们 ...
- 图片压缩工具optipng/jpegoptim安装
[1]还未实践 #yum install optipng -y [2]已成功 #yum install -y libjpeg libjpeg-devel #wget http://freecode.c ...
- Excel常用操作
[对Excel工作表,按某一列数据进行排序] 选中这些数据,在菜单栏上点"数据 - 排序",在弹出的窗口中的主要关键字里选择这一列,按升序或降序,那么其它的数据也会跟着它一一对应变 ...