vue-2
2019-08-22 本文已影响0人
聪明的小一休
事件修饰符
once 只触发一次
prevent 阻止默认事件
stop组织冒泡
once只执行一次
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<style>
#div1{
width: 300px;
height: 300px;
border:1px solid #000000;
}
.bgred{
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<button @click="count=count+1">{{count}}</button>
<button @click="cl">调用无参的方法{{message}}</button>
<button @click="say('hi')">调用有参的方法{{test}}</button>
<div id="div1" :class="{bgred:flag}" @mouseover="changebg" @mouseout="changebg"></div>
<input :type="stype"/><i class="fa" :class="[eyestyle]" aria-hidden="true"@click="togglepassword"></i>
<!-- <i class="fa fa-eye" aria-hidden="true"></i> -->
<div class="">
<button type="button" @click.once="c2">事件修饰符once{{message2}}</button>
</div>
</div>
<script>
let vm=new Vue({
el:"#app",
data:{
count:0,
message:"hello",
test:'',
flag:false,
stype:"password",
eyestyle:"fa-eye-slash",
message2:"hello"
},
methods:{
cl(){
//this=vm
this.message=this.message+" vue!";
},
say(msg){
this.test=msg;
},
changebg(){
this.flag=!this.flag;
},togglepassword(){
if(this.stype == "password"){
this.stype="text";
this.eyestyle="fa-eye";
}else{
this.stype="password";
this.eyestyle="fa-eye-slash";
}
},c2(){
this.message2=this.message2+" vue!";
}
}
});
</script>
</body>
</html>
阻止事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
<style>
#div1{
width: 300px;
height: 300px;
border:1px solid #000000;
}
.bgred{
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<button @click="count=count+1">{{count}}</button>
<button @click="cl">调用无参的方法{{message}}</button>
<button @click="say('hi')">调用有参的方法{{test}}</button>
<div id="div1" :class="{bgred:flag}" @mouseover="changebg" @mouseout="changebg"></div>
<input :type="stype" /><i class="fa" :class="[eyestyle]" aria-hidden="true" @click="togglepassword"></i>
<!-- <i class="fa fa-eye" aria-hidden="true"></i> -->
<div class="">
<button type="button" @click.once="c2">事件修饰符once{{message2}}</button>
</div>
<!-- <div onclick="alert(2)">
div2
<div onclick="alert(1)">
div1
<div onclick="alert(0);event.stopPropagation()">测试事件冒泡</div>
</div>
</div> -->
<div @click.stop="alert2">
div2
<div @click.stop="alert1">
div1
<div @click.stop="alert0">测试事件冒泡</div>
</div>
</div>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
count: 0,
message: "hello",
test: '',
flag: false,
stype: "password",
eyestyle: "fa-eye-slash",
message2: "hello"
},
methods: {
cl() {
//this=vm
this.message = this.message + " vue!";
},
say(msg) {
this.test = msg;
},
changebg() {
this.flag = !this.flag;
},
togglepassword() {
if (this.stype == "password") {
this.stype = "text";
this.eyestyle = "fa-eye";
} else {
this.stype = "password";
this.eyestyle = "fa-eye-slash";
}
},
c2() {
this.message2 = this.message2 + " vue!";
},alert0(){
alert(0);
},alert1(){
alert(1);
},alert2(){
alert(2);
}
}
});
</script>
</body>
</html>
组织浏览器默认行为
<!-- <form onsubmit="alert(0);event.preventDefault()"><!-- 组织浏览器默认行为，刷新 -->
<!--<input type="text" />
<button type="submit">提交</button>
</form> -->
<form @submit.prevent="alert0">
<input type="text" />
<button type="submit">提交</button>
</form>
键盘修饰符（监听键盘事件时，添加关键修饰符）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="css/font-awesome.css" />
<style>
#div1{
width: 300px;
height: 300px;
border:1px solid #000000;
}
.bgred{
background-color: red;
}
</style>
</head>
<body >
<div id="app" @keyup.enter="alert0">
<button @click="count=count+1">{{count}}</button>
<button @click="cl">调用无参的方法{{message}}</button>
<button @click="say('hi')">调用有参的方法{{test}}</button>
<div id="div1" :class="{bgred:flag}" @mouseover="changebg" @mouseout="changebg"></div>
<input :type="stype" /><i class="fa" :class="[eyestyle]" aria-hidden="true" @click="togglepassword"></i>
<!-- <i class="fa fa-eye" aria-hidden="true"></i> -->
<div class="">
<button type="button" @click.once="c2">事件修饰符once{{message2}}</button>
</div>
<!-- <div onclick="alert(2)">
div2
<div onclick="alert(1)">
div1
<div onclick="alert(0);event.stopPropagation()">测试事件冒泡</div>
</div>
</div> -->
<div @click.stop="alert2">
div2
<div @click.stop="alert1">
div1
<div @click.stop="alert0">测试事件冒泡</div>
</div>
</div>
<!-- <form onsubmit="alert(0);event.preventDefault()"><!-- 组织浏览器默认行为，刷新 -->
<!--<input type="text" />
<button type="submit">提交</button>
</form> -->
<form @submit.prevent="alert0">
<input type="text" autofocus="autofocus"/>
<button type="submit">提交</button>
</form>
<!-- 键盘修饰符 -->
<div>
<button type="button" >测试enter按键</button>
<button type="button" @keyup="show()"></button>
</div>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
count: 0,
message: "hello",
test: '',
flag: false,
stype: "password",
eyestyle: "fa-eye-slash",
message2: "hello"
},
methods: {
cl() {
//this=vm
this.message = this.message + " vue!";
},
say(msg) {
this.test = msg;
},
changebg() {
this.flag = !this.flag;
},
togglepassword() {
if (this.stype == "password") {
this.stype = "text";
this.eyestyle = "fa-eye";
} else {
this.stype = "password";
this.eyestyle = "fa-eye-slash";
}
},
c2() {
this.message2 = this.message2 + " vue!";
},alert0(){
alert(0);
},alert1(){
alert(1);
},alert2(){
alert(2);
},show(){
//在vue方法中,可以使用event事件
alert(event.keyCode);
}
}
});
</script>
</body>
</html>
