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中事件处理器的练习的更多相关文章

  1. Vue.js：事件处理器

    ylbtech-Vue.js:事件处理器 1.返回顶部 1. Vue.js 事件处理器 事件监听可以使用 v-on 指令: v-on <div id="app"> &l ...

  2. vue.js中，input和textarea上的v-model指令到底做了什么？

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  3. 详解Vue 方法与事件处理器

      本篇文章主要介绍了详解Vue 方法与事件处理器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件 ...

  4. vue.js 中双向绑定的实现---初级

    1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <h ...

  5. vue.js 中 data, prop, computed, method，watch 介绍

    vue.js 中 data, prop, computed, method,watch 介绍 data, prop, computed, method 的区别 类型 加载顺序 加载时间 写法 作用 备 ...

  6. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  7. 实例分析Vue.js中 computed和methods不同机制

    在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 comput ...

  8. Vue.js中使用select选择下拉框

    在Vue.js中使用select选择下拉框有两种方法: 第一种: Add.html: <select v-model="sysNotice.noticeType" id=&q ...

  9. [js]js中事件的3要素

    js中事件的3要素 事件源 事件 事件处理程序 <!DOCTYPE html> <html> <head lang="en"> <meta ...

随机推荐

  1. 【转】查看java类是从哪个包加载

    Java的类装载器使用的是优先策略,加载类的时候先找到哪个就加载哪个.有时候我们做一个系统,当类库非常庞大的时候,类可能会出现冲突,也就是类路径中存在不同版本的两个相同的类,这往往给调试带来非常大的麻 ...

  2. String Date Calendar之间的转换

    1.Calendar 转化 String Calendar calendat = Calendar.getInstance(); SimpleDateFormat sdf = new SimpleDa ...

  3. MFC绘制图片闪烁详解

    用MFC如何高效地绘图             显示图形如何避免闪烁,如何提高显示效率是问得比较多的问题.     而且多数人认为MFC的绘图函数效率很低,总是想寻求其它的解决方案.     MFC的 ...

  4. protobuf简介和使用

    1.Protocol Buffers简介 Protocol Buffers (ProtocolBuffer/ protobuf )是Google公司开发的一种数据描述语言,类似于XML能够将结构化数据 ...

  5. Selenium简介(二)--基于CORE/IDE的简单应用

    参考  http://blog.csdn.net/iamqa/article/details/4398240 Selenium简介(一)--总体介绍  http://blog.csdn.net/iam ...

  6. storm 源码笔记

    (reify DistributedRPC$Iface (^String execute  [this ^String function ^String args]  (log-debug " ...

  7. 开源一个silverlight上的文本编辑器：SlEditor

    控件设置三个状态:编辑.设计.查看. 控件的内容可以打包保存为zip格式,内容可以包含图片等元素(解决了silverlight RichTextBox控件xaml属性无法获取InlineUIConta ...

  8. LingQ 的Distinct使用方法

    需要将对象继承 IEqualityComparer<对象类名> 接口 然后实现下面两个方法 public bool Equals(对象 x, 对象y) { return x.ID == y ...

  9. SQL注入的分类

    基于从服务器接收到的响应    基于错误的SQL注入    联合查询的类型    堆查询注射    SQL盲注        基于布尔SQL盲注        基于时间的SQL盲注        基于 ...

  10. business knowledge

    Finance knowledge Trading---At the core of our business model is Trading, which involves the buying ...