Vue（四）事件和属性
1. 事件
1.1 事件简写
- v-on:click=""
- 简写方式 @click=""
<button v-on:click="show">点我</button><button @click="show">点我</button>
1.2 事件对象$event
- 包含事件相关信息，如事件源、事件类型、偏移量
- target、type、offsetx
//js methods:{}
print(e){// console.log(e);console.log(e.target.innerHTML); //DOM对象
console.log(this);
}
<button @click="print($event)">Click Me</button>
1.3 事件冒泡
- 阻止事件冒泡：
- a)原生js方式，依赖于事件对象
- b)vue方式，不依赖于事件对象
- @click.stop
1.4 事件默认行为
- 阻止默认行为：
- a)原生js方式，依赖于事件对象
<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>
-----------------------------------------------------------------------------------------
<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>
1.5 键盘事件
- 回车：@keydown.13 或@keydown.enter
- 上：@keydown.38 或@keydown.up
- 默认没有@keydown.a/b/c...事件，可以自定义键盘事件，也称为自定义键码或自定义键位别名
<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>
-------------------------------------------------------------------------------------------------------<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>
1.6 事件修饰符
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
2. 属性
2.1 属性绑定和属性的简写
- v-bind 用于属性绑定， v-bind:属性=""
- 属性的简写：
- v-bind:src="" 简写为 :src=""
<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>
----------------------------------------------------------------------
<div id="itany"><!-- <img src="{{url}}"> -->
<!-- 可以直接访问vue中的数据，不需要使用{{}} -->
<!-- <img v-bind:src="url"> -->
<img :src="url" :width="w" :height="h">
</div>
2.2 class和style属性
- 绑定class和style属性时语法比较复杂：
<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>
---------------------------------------------------------------------------------<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>
以上是 Vue（四）事件和属性 的全部内容， 来源链接： utcz.com/z/378246.html
