<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on事件系统</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id='app'>
<!--v-on第一种方式-->
<form action="1.html" v-on:submit="func">
<button>Submit</button>
</form>
<!--v-on第二种方式-->
<form action="1.html" @submit="func2">
<button>sb</button>
</form>
</div>
<script>
new Vue({
el:'#app',
methods:{
func : function(e) {
alert("sdf");
//e.preventDefault();
},
func2:function(){
alert("ss");
}
}
})
</script>
<hr/>
<!--preventDefault的使用-->
<div id="app2">
<form action="1.html" @submit.prevent="func3">
<button>sss1</button>
</form>
<form action="1.html" @submit="func4">
<button>sss2</button>
</form>
<form action="1.html" @submit="da+=1"><!--这个只能进行简单操作,而且不用this-->
<button>sss3</button>
</form>
</div>
<script>
var p = new Vue({
el:"#app2",
methods:{
func3: function(){
alert("这个是@submit.prevent");
},
func4:function(e){
alert("这个是e.preventDefault();");
e.preventDefault();
}
},
data:{
da:0
}
})
</script>
<hr/>
<button id="but" @click="cp">点击{{count}}</button>
<script>
var p=new Vue({
el:"#but",
data:{
count:0,
str:"ssssss"
},
methods:{
cp: function(){
this.count+=1;
console.log(this.str);
}
}
});
</script>
</body>
</html>