v-on指令
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>v-on指令</title>
<style type="text/css">
p {
width: 100px;
height: 100px;
background-color: orange
}
</style>
</head>
<body>
<div id="app">
<!-- v-on: 指令 -->
<!-- 简写: @ -->
<!-- 绑定的是事件,操作的是事件对应的方法名 -->
<p @click="fn1"></p>
<!-- 直接绑定方法名,不会携带自定义参数,但回调时能取到事件参数ev -->
<p @click="fn2"></p>
<!-- 带()的方法绑定,只传自定义参数,回调时只能取到自定义参数,事件参数ev丢失 -->
<p @click="fn3(10)"></p>
<!-- 带()的方法绑定,传入自定义参数同时,显式传入事件$event,回调时可以取到自定义参数及事件参数ev -->
<p @click="fn4($event, 10, 20)"></p>
<p @click="fn5(10, $event, 20)"></p>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
methods: {
fn1: function () {
console.log("click event");
},
fn2 (ev) {
console.log(ev);
},
fn3 (num) {
console.log(num);
},
fn4 (ev, n1, n2) {
console.log(ev);
console.log(n1);
console.log(n2);
},
fn5 (n1, ev, n2) {
console.log(ev);
}
}
})
</script>
</html>
