一、事件修饰符
功能：用于简化代码。
- .stop 阻止事件冒泡
- .prevent 阻止默认事件
- .once
- .enter
两种使用方式：
e.stopPropagation(); //第一种
@click.stop="clickP" //第二种
二、数组变化侦测
分为两类：
1、能够引起UI的自动更新:
- .push()
- .pop()
- .shift()
- .unshift()
- .splice()
- .sort()
- .reverse()
2、值会改变，但是不会引起UI自动更新：
- .filter()
- .concat()
- .slice()
三、计算属性
写一个函数来计算，避免前方代码臃肿： 用computed来实现
<template>
<h3>{{ pangjuzi.name }}</h3>
<p>{{ pangjuzicontent}}</p>
</template>
<script>
export default {
data(){
return {
pangjuzi:{
name:"胖橘子",
content:"前端","pyhton","java"
}
}
},
//计算属性;
computed:{
pangjuzicontent(){
return this.pangjuzi.content.length > 0 ? 'yes' :"no"
}
}
}
</script>
注意：计算属性和methods方法虽然有些类似，但是在调用上有差别。计算属性:计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算方法:方法调用总是会在重渲染发生时再次执行函数。因此使用计算属性会更好。
四、class绑定
绑定对象
<template>
<div :class="{ active: isActive, 'text-danger ' : hasError}">isActive</div>
</template>
<script>
export default {
data(){
return{
isActive : true,
hasError : true
}
}
}
</script>
五、 style绑定
绑定对象
<template>
<div :style="{ color: activecolor，fontsize: fontsize + 'px'}">style绑定</div>
</template>
<script>
export default {
data() {
return {
activecolor: 'red ' ,
fontsize: 30
}
}
}
</script>