<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件处理</title>
<style>
.style1{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
.style2{
width: 100px;
height: 100px;
background-color: #FF0000;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--事件绑定: v-on:事件名称 或者 @事件名称 -->
<div>
<button type="button" @click="count++">{
{count}}</button>
</div>
<div>
<button type="button" @click="fun()">调用无参方法</button>
</div>
<div>
<button type="button" @click="fun2(10)">调用有参方法</button>
</div>
<div>
密码:<input :type="ltype" /><img :src="lsrc" @click="changePic()" />
</div>
<div :class="[flag?class1:class2]" @mouseover="changeclass()" @mouseout="changeclass()"></div><!--鼠标悬停为样式2,拿走变回样式1,默认样式1-->
<div @click="alert1()"><!--事件冒泡 .stop阻止事件冒泡-->
1111
<div @click.stop="alert2()">
2222
<div @click.stop="alert3()">
3333
</div>
</div>
</div>
<div>
<form action="demo02.html" @submit.prevent="sub()"><!-- .prevent阻止默认事件-->
<button type="submit">提交</button>
</form>
</div>
<div @click.once = "addInfo()"><!-- .once只触发一次事件-->
Hello{
{message}}
</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
count:0,
ltype:'password',
lsrc:'img/closeeye.png',
flag:true,
class1:'style1',
class2:'style2',
message:'vue.js'
},
methods:{//vue实例中的方法在此声明
fun(){
console.log("无参方法");
},
fun2(i){
console.log(i);
},
changePic(){
if(this.ltype=='password'){//想用vue实例data中的属性就得加this,指向vue实例
this.ltype='text';
this.lsrc='img/openeye.png';
}else{
this.ltype='password';
this.lsrc='img/closeeye.png';
}
},
changeclass(){//实现鼠标悬停样式的切换
this.flag=!this.flag;
},
alert1(){
alert(1);
},
alert2(){
alert(2);
},
alert3(){
alert(3);
},
sub(){
console.log("阻止默认事件");
},
addInfo(){
this.message = this.message+"!";
}
}
});
</script>
</body>
</html>
