Organize the document, search out a vue event object, bubbling, and blocking the default behavior, and organize it a little and streamline it to share it.
Event Object
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/" charset="utf-8"></script>
<script type="text/javascript">
= function(){
var vm = new Vue({
el:'#box',
data:{},
methods:{
show:function(ev){
alert();
alert();
}
}
});
}
</script>
</head>
<body>
<div >
<input type="button" name="" value="Button" @click="show($event)">
</div>
</body>
</html>
Event bubbles
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/" charset="utf-8"></script>
<script type="text/javascript">
= function(){
var vm = new Vue({
el:'#box',
data:{},
methods:{
show:function(){
alert(111);
//Native writing // = true;
},
show2:function(){
alert(222);
}
}
});
}
</script>
</head>
<body>
<div >
<div @click="show2()">
<input type="button" name="" value="Button" @="show()">
</div>
</div>
</body>
</html>
Block event default behavior
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.show2{
padding:15px;;
}
</style>
<script src="../js/" charset="utf-8"></script>
<script type="text/javascript">
= function () {
var vm = new Vue({
el: '#box',
data: {},
methods: {
show: function () {
alert(111)
},
show2: function () {
alert(222)
}
}
});
}
</script>
</head>
<body>
<div >
<div class="show2">
<input type="button" name="" value="Button" @="show()">
</div>
</div>
</body>
</html>
I hope this article will be helpful to you. This is all for you to introduce the vue event object, bubbling, and preventing default behavior. I hope everyone will continue to follow our website! If you want to learn vue, you can continue to follow this website.