五、事件和属性
1.事件
1.1 事件简写
v-on:click=""
简写方式 @click=""
1.2事件对象$event
包含事件相关信息、如事件源、事件类型、偏移量
target 、type、offsetx
1.3事件冒泡
阻止事件冒泡：
a)原生js方式、依赖事件对象
b)vue方式、不依赖事件对象
@click.stop
1.4 事件默认行为
阻止默认行为：
a)原生js方式，依赖于事件对象
1.5键盘事件
回车：@keydown.13或@kedown.enter
上：@keydown.38 或 @keydown,up
默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义建码别名。
1.6 事件修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
属性
2.1属性的绑定和属性的简写
v-bind 用户属性的绑定，v-bind:属性=“”
属性的简写：
v-bind:src="" 简写 :src=""
2.2 class 和 style 属性
绑定class 和 style 属性时比较特殊 语法上比较复杂
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class和style属性</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
window.onload=function(){
let vm = new Vue({
el:'#itany',
data:{
bb:'aa',
dd:'cc',
flag:true,
num:3,
hello:{aa:true,cc:true},
xx:{color:'blue',fontSize:'40px'},
yy:{backgroundColor:'green'}
}
})
}
</script>
<style type="text/css" media="screen">
.aa{
color: red;
font-size:20px;
}
.cc{
background:pink;
}
</style>
</head>
<body>
<div id="itany">
<!-- <p :class="aa">南昌</p> -->
<!-- 不可以，Vue的属性绑定时不能直接用css样式 -->
<!-- 方式1 通过变量的形式-->
<p :class="bb">南昌</p>
<!-- 第二种方式 通过数组的形式、同时引用多个-->
<p :class="[bb,dd]">南昌1</p>
<!-- 方式3 json形式 -->
<!-- <p :class='{aa:true,cc:flag}'>北京</p> -->
<p :class='{aa:num>0}'>北京1</p>
<!-- 方式4 :变量引用json形式 -->
<p :class="hello">北京2</p>
<!-- style属性 -->
<p :style="xx">itany</p>
<p :style="[xx,yy]">itany</p>
</div>
</body>
</html>
网友评论