一、事件和属性
1、事件
1.1 事件简写
v-on:click=“”
简写方式@click
1.2 事件对象$event
包含事件相关信息、如事件源、事件类型、偏移量
target、type、offset
1.3 事件冒泡
阻止事件冒泡:
方式一:原生js方式,依赖于事件对象(e.stopPropagation())
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">事件冒泡</h1>
</header>
<div class="mui-content" id="content">
<div @click="printf()">
<div @click="print()">
<div @click="show($event)">click me</div>
</div>
</div>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#content",
data:{
},methods:{
printf:function(){
console.log("printf")
},
print:function(){
console.log("print")
},
show:function(e){
console.log("show");
console.log(e.target.innerHTML);//DOM对象
e.stopPropagation();//阻止事件冒泡(原生js方式)
}
}
})
mui.init()
</script>
</body>
</html>
方式二:Vue方式,不依赖于事件对象
使用 @click.stop
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">事件冒泡</h1>
</header>
<div class="mui-content" id="content">
<div @click="printf()">
<div @click="print()">
<div @click.stop="show()">click me</div>
</div>
</div>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#content",
data:{
},methods:{
printf:function(){
console.log("printf")
},
print:function(){
console.log("print")
},
show:function(){
console.log("show")
}
}
})
mui.init()
</script>
</body>
</html>
1.4 事件默认行为
a) 原生js方式(e.preventDefault())
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">阻止默认事件</h1>
</header>
<div class="mui-content" id="content">
<a href="#" @click="lianjie($event)">我是一个链接,点我</a>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#content",
data:{
},methods:{
lianjie:function(e){
console.log("lianjie");
e.preventDefault();//阻止默认事件(原生js方式)
}
}
})
mui.init()
</script>
</body>
</html>
b) Vue方式
@click.prevent
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">阻止默认事件</h1>
</header>
<div class="mui-content" id="content">
<a href="#" @click.prevent="lianjie()">我是一个链接,点我</a>
</div>
<script type="text/javascript" src="../js/vue.js">
</script>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#content",
data:{
},methods:{
lianjie:function(e){
console.log("lianjie");
}
}
})
mui.init()
</script>
</body>
</html>
1.5 键盘事件
- 回车:@keydown.13 或 @keydown.enter
- 上:@keydown.38 或 @keydown.up
1.6 事件修饰符
- .stop
- .prevent
- .capture
- .self
- .once
- .passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>