vue.js v-on事件使用，vue.js event事件繫結
阿新 • • 發佈：2018-12-04
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/