目录
一、事件绑定-事件修饰符
stop 阻止冒泡
<button v-on:click.stop="handle1">点击</button>
prevent 阻止默认行为
<a href="http://www.baidu.com" v-on:click.prevent="handle2">百度一下</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<div v-on:click="handle0">
<!-- <button v-on:click="handle1">点击</button> -->
<!-- 阻止冒泡 -->
<button v-on:click.stop="handle1">点击</button>
</div>
<div>
<!-- <a href="http://www.baidu.com" v-on:click="handle2">百度一下</a> -->
<!-- 阻止默认行为 -->
<a href="http://www.baidu.com" v-on:click.prevent="handle2">百度一下</a>
</div>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" >
/*
事件绑定-事件修饰符
stop 阻止冒泡
<button v-on:click.stop="handle1">点击</button>
prevent 阻止默认行为
<a href="http://www.baidu.com" v-on:click.prevent="handle2">百度一下</a>
*/
var vm = new Vue({
el:'#app',
data:{
num: 0
},
methods:{
handle0: function(){
this.num++
},
handle1: function(event){
//阻止冒泡
//event.stopPropagation();
},
handle2: function(event){
//阻止默认行为
//event.preventDefault();
},
}
})
</script>
</html>
二、事件绑定-按键修饰符
.enter 回车键
<input type="text" v-model="password" v-on:keyup.enter="handleSubmit"/>
.delete 删除键
<input type="text" v-model="username" v-on:keyup.delete="clearContent">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<form action="">
<div>
用户名:
<input type="text" v-model="username" v-on:keyup.delete="clearContent">
</div>
<div>
密码
<input type="text" v-model="password" v-on:keyup.enter="handleSubmit"/>
</div>
<div>
<input type="button" v-on:click="handleSubmit" value="提交" />
</div>
</form>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" >
/*
事件绑定-按键修饰符
.enter 回车键
<input type="text" v-model="password" v-on:keyup.enter="handleSubmit"/>
.delete 删除键
<input type="text" v-model="username" v-on:keyup.delete="clearContent">
*/
var vm = new Vue({
el:'#app',
data: {
username: '',
password: '',
num: 0
},
methods: {
handleSubmit: function(){
console.log(this.username, this.password)
},
clearContent: function(){
this.username = '';
}
}
})
</script>
</html>
三、事件绑定-自定义按键修饰符
规则:自定义按键修饰符名字是自定义的,但是对应的值必须是按键对应event.keyCode值
Vue.config.keyCodes.aaa = 65 aaa(自定义名字)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" v-on:keyup.aaa="handle" v-model="info"/>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" >
/*
事件绑定-自定义按键修饰符
规则:自定义按键修饰符名字是自定义的,但是对应的值必须是按键对应event.keyCode值
Vue.config.keyCodes.aaa = 65 aaa(自定义名字)
*/
Vue.config.keyCodes.aaa = 65
var vm = new Vue({
el:'#app',
data: {
info: '',
},
methods: {
handle: function(event){
console.log(event.keyCode)
}
}
})
</script>
</html>