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)
}
}
}
}
});
