<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>处理事件</title>
</head>
<body>
<div id="box">
<button v-on:click="greet">Greet</button>
</div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
name:'caicai',
},
methods:{
greet:function(event){
alert('Hello:'+this.name+'!')
alert(event.target.tagName) //target 事件属性可返回事件的目标节点（触发该事件的节点）
}
}
})
</script>
</html> -->
<!--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>直接写表达处理式</title>
</head>
<body>
<div id="box">
<button v-on:click="counter+=1">add 1</button>
<p>啦啦啦啊{{counter}}啦啦啦</p>
</div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
counter:0
}
})
</script>
</html>
<-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>传参数的事件方法</title>
</head>
<body>
<div id="box">
<button v-on:click="say('hi')">say hi</button>
<button v-on:click="say('what')">say what</button>
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
</div>
<!-- 阻止点击事件的冒泡行为 -->
<a v-on:click.stop="doThis"></a>
<!-- 阻止默认的表单提交 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 事件修饰器可以连用 -->
<a v-on:click.stop.prevent="doThat">
<!-- 只需要修饰器，而无需处理方法 -->
<form v-on:submit.prevent></form>
<!-- 使用 capture 模式-->
<div v-on:click.capture="doThis">...</div>
<!-- 仅当event.target是自身的时候才执行 -->
<!-- 比如，这样写了之后点击子元素就不会执行后续逻辑 -->
<div v-on:click.self="doThat">...</div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
},
methods:{
say:function(message){
alert(message)
},
warn: function (message, event) {
// 这样我们就可以获得js原生的事件了
//event.stopPropagation() 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。
alert(message)
}
}
})
</script>
</html>
</-->
浙公网安备 33010602011771号