VUE指令-事件繫結v-on
可以用 v-on指令監聽 DOM
事件，並在觸發時執行一些 JavaScript 程式碼。
v-on:event
|
<!-- 格式v-on:keycode="方法(引數)" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v3.v-on:keycode="方法(引數)"</div> <hr /> <div> <div> <input v-on:keyup.up="commit" style="font-size: 20px;">KeyCode</input> </div> </div> </div> <!-- 格式v-on:click="方法(引數)" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v2.v-on:click="方法(引數)"</div> <hr /> <div> <div> <button v-on:click="mod('v-on事件',$event)" style="font-size: 20px;">onClick</button> </div> </div> </div> <!-- 格式v-on:click="方法" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v1.格式v-on:click="方法"</div> <hr /> <div> <div> <button v-on:click="add" style="font-size: 20px;">onClick</button> </div> </div> </div> <!-- 格式v-on:click="表示式" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div style="font-size: 20px;"> v0.v-on:click="表示式"</div> <hr /> <div> <div> <button v-on:click="count ++" style="font-size: 20px;">onClick</button> <p>{{count}}</p> </div> </div> </div> |
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script>
<title>v-on</title>
</head>
<body style="height: 100%;">
<style>
.style0{
font-size: 25px;
color: green;
}
.style1{
background: gold;
}
</style>
<!--
VUE指令v-on事件繫結指令
REF:
http://www.runoob.com/vue2/vue-events.html
https://cn.vuejs.org/v2/guide/events.html
-->
<div id="appVue">
<!-- 格式v-on:keycode="方法(引數)" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v3.v-on:keycode="方法(引數)"</div>
<hr />
<div>
<div>
<input v-on:keyup.up="commit" style="font-size: 20px;">KeyCode</input>
</div>
</div>
</div>
<!-- 格式v-on:click="方法(引數)" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v2.v-on:click="方法(引數)"</div>
<hr />
<div>
<div>
<button v-on:click="mod('v-on事件',$event)" style="font-size: 20px;">onClick</button>
</div>
</div>
</div>
<!-- 格式v-on:click="方法" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v1.格式v-on:click="方法"</div>
<hr />
<div>
<div>
<button v-on:click="add" style="font-size: 20px;">onClick</button>
</div>
</div>
</div>
<!-- 格式v-on:click="表示式" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v0.v-on:click="表示式"</div>
<hr />
<div>
<div>
<button v-on:click="count ++" style="font-size: 20px;">onClick</button>
<p>{{count}}</p>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: "#appVue",
data: {
count:999
},
methods:{
add:function(){
console.log("onClick")
},
mod:function(var0,var1){
console.log(var0);
console.log(var1);
},
commit:function(){
console.log("commit");
}
}
}
)
</script>
</body>
</html>REF: