vue.js v-on事件使用，vue.js event事件绑定
================================
©Copyright 蕃薯耀 2018年12月04日
http://fanshuyao.iteye.com/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue 事件绑定</title>
</head>
<body>
<div id="vue-div">
使用v-on:click
<img :src="imgUrl" style="width: 50px;height: 50px;display: block;" v-on:click="imgClick"/>
使用 @click
<img :src="imgUrl" style="width: 50px;height: 50px;display: block;" @click="imgClick2"/>
使用 @click，带参数
<img :src="imgUrl" style="width: 50px;height: 50px;display: block;" @click="imgClick3('张三')"/>
使用 @click，带Vue变量值
<img :src="imgUrl" style="width: 50px;height: 50px;display: block;" @click="imgClick3(msg)"/>
使用 @click，默认带event
<button @click="click4">测试按钮</button>
使用 @click，带event
<button @click="click5($event)">测试按钮$event</button>
<div style="margin-top : 30px;">
<div>事件冒泡：点击内层div，内层会提示，外层也会提示，即提示2次</div>
<div @click="outerClick" style="width:300px;height: 300px;background-color: red;">
<div @click="innerClick" style="width:100px;height: 100px;background-color: blue;"></div>
</div>
</div>
<div style="margin-top : 30px;">
<div>阻止事件冒泡：点击内层div，只提示一次（@click.stop）</div>
<div @click="outerClick2" style="width:300px;height: 300px;background-color: red;">
<div @click.stop="innerClick2" style="width:100px;height: 100px;background-color: blue;"></div>
</div>
</div>
<div style="margin-top : 30px;">
<div>阻止事件，即点击链接不跳转</div>
<a href="www.baidu.com" @click.prevent="preventGo">我要去百度</a>
</div>
<div style="margin-top : 30px;">
<div>keyup 回车事件</div>
第一种写法（@keyup.enter）：
<input type="text" @keyup.enter="enter"/>
第二种写法（@keyup.13）：
<input type="text" @keyup.13="enter"/>
</div>
</div>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript">
var app = new Vue({
el: "#vue-div",
data: {
msg : "aabbdDD-Hello-World",
imgUrl : "https://cn.vuejs.org/images/logo.png"
},
methods : {
imgClick(){
alert("imgClick()");
},
imgClick2(){
alert("22()");
},
imgClick3(params){
alert("参数："+params);
},
click4(event){
alert("参数："+event.target.innerHTML);
},
click5(event){
alert("参数："+event.target.innerHTML);
},
outerClick(event){
alert("outerClick");
},
innerClick(event){
alert("innerClick");
},
outerClick2(event){
alert("outerClick-22222222222222");
},
innerClick2(event){
alert("innerClick-222222222222222");
},
preventGo(){
alert("preventGo");
},
enter(event){
alert(event.target.value);
}
}
});
</script>
</body>
</html>
================================
©Copyright 蕃薯耀 2018年12月04日
http://fanshuyao.iteye.com/