<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>on</title>
</head>
<body>
<div id="on">
<span>这个按钮被点击了 {{ counter }} 次。</span><br>
<button v-on:click="counter += 1">增加 1</button>
<br><br>
<button v-on:click="say('hi')">Say hi</button>
<br><br>
<button v-on:click="greet">Greet</button>
<!--事件修饰符-->
<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> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.once="doThis"></div> <!--单击事件只触发一次-->
<!--按键修饰符-->
<input v-on:keyup.13="submit" value="submit">
<input v-on:keyup.enter="submit" value="submit"> <!-- 只有在 keyCode 是 13 时,也就是“enter”时调用 vm.submit() -->
<!--enter + Click -->
<!--全部的按键别名：-->
<!--.enter-->
<!--.tab-->
<!--.delete (捕获 “删除” 和 “退格” 键)-->
<!--.esc-->
<!--.space-->
<!--.up-->
<!--.down-->
<!--.left-->
<!--.right-->
<!--.ctrl-->
<!--.alt-->
<!--.shift-->
<!--.meta-->
<input @keyup.alt.67="clear" value="2"> <!-- Alt + C + Click-->
</div>
<script src="js/vue.js"></script>
<script>
// 通过全局config.keyCodes 对象自定义按键修饰符别名：可以使用 v-on:keyup.f1
// Vue.config.keyCodes.f1 = 112
var vm = new Vue({
el:"#on",
data: {
counter: 0,
name:"vue.js"
},
methods:{
say: function (message) {
alert(message);
},
greet:function(event){
alert('Hello ' + this.name + '!');
// `event` 是原生 DOM 事件
alert(event.target.tagName);
},
submit:function(){
alert("submit");
},
clear:function(){
alert("clear");
}
}
});
</script>
</body>
</html>
