五、 事件和属性
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方式，依赖于事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡和默认行为</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
methods:{
show(){
console.log(111);
// e.stopPropagation();
},
print(){
console.log(222);
},
write(){
console.log(333);
},
study(){
console.log(444);
// e.preventDefault();
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<div @click="write">
<p @click="print">
<!-- <button @click="show($event)">点我</button> -->
<button @click.stop="show">点我</button>
</p>
</div>
<hr>
<!-- <a href="#" @click="study($event)">俺是链接</a> -->
<a href="#" @click.prevent="study">俺是链接</a>
</div>
</body>
</html>
1.5 键盘事件
回车：@keydown.13 或@keydown.enter
上：@keydown.38 或@keydown.up
默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<script src="js/vue.js"></script>
<script>
/**
* 自定义键位别名
*/
Vue.config.keyCodes={
a:65,
f1:112
}
window.onload=function(){
let vm=new Vue({
el:'#itany',
methods:{
show(e){
console.log(e.keyCode);
if(e.keyCode==13){
console.log('您按了回车');
}
},
print(){
// console.log('您按了回车');
// console.log('您按了方向键上');
console.log('11111');
}
}
});
}
</script>
</head>
<body>
<div id="itany">
<!-- 键盘事件：@keydown、@keypress、@keyup -->
<!-- 用户名：<input type="text" @keydown="show($event)"> -->
<!-- 简化按键的判断 -->
<!-- 用户名：<input type="text" @keydown="show($event)"> -->
<!-- 用户名：<input type="text" @keydown.13="print"> -->
<!-- 用户名：<input type="text" @keydown.enter="print"> -->
<!-- 用户名：<input type="text" @keydown.up="print"> -->
用户名：<input type="text" @keydown.f1="print">
<!-- 事件修饰符 -->
<button @click.once="print">只触发一次</button>
</div>
</body>
</html>
1.6 事件修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性绑定和属性的简写</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
data:{
url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',
w:'200px',
h:'100px'
}
});
}
</script>
</head>
<body>
<div id="itany">
<!-- <img src="{{url}}"> -->
<!-- 可以直接访问vue中的数据，不需要使用{{}} -->
<!-- <img v-bind:src="url"> -->
<img :src="url" :width="w" :height="h">
</div>
</body>
</html>
2. 属性
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 src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
data:{
bb:'aa',
dd:'cc',
flag:true,
num:-2,
hello:{aa:true,cc:true},
xx:{color:'blue',fontSize:'30px'},
yy:{backgroundColor:'#ff7300'}
}
});
}
</script>
<style>
.aa{
color:red;
font-size:20px;
}
.cc{
background-color:#ccc;
}
</style>
</head>
<body>
<div id="itany">
<!--
class属性
-->
<!-- <p class="aa">南京</p> --> <!-- 可以访问，普通css方式 -->
<!-- <p :class="aa">南京</p> --> <!-- 不可以，Vue的属性绑定时不能直接css样式 -->
<!-- 方式1:变量形式 -->
<!-- <p :class="bb">南京</p> -->
<!-- 方式2：数组形式，同时引用多个 -->
<!-- <p :class="[bb,dd]">南京</p> -->
<!-- 方式3：json形式，常用！！！ -->
<!-- <p :class="{aa:true,cc:flag}">南京</p> -->
<!-- <p :class="{aa:num>0}">南京</p> -->
<!-- 方式4：变量引用json形式 -->
<!-- <p :class="hello">南京</p> -->
<!--
style属性
-->
<p :style="[xx,yy]">itany</p>
</div>
</body>
</html>
