前端（vue）学习笔记（CLASS 2）：进阶
指令修饰符：通过“.”指明一些指令的后缀，不同后缀封装了不同的处理操作->简化代码
1、按键修饰符
@keyup.enter 键盘回车监听
2、v-model修饰符
v-model.trim 去除首尾空格
v-model.number 转数字
3、事件修饰符
事件名.stop 阻止冒泡
事件名.prevent 阻止默认行为
4、v-bind对于样式控制的增强
为了方便开发者进行样式控制，Vue扩展了v-bind的语法，可以针对class类名和style行内样式进行控制
操纵class
语法：:class="对象/数组"
对象的写法：
<div class="box" :class="{pink:true,black:false}"></div>使用场景：一个类名，来回切换
数组就是数组的形式
使用场景：批量添加或删除类
* 案例-京东秒杀tab导航高亮
基本样式：
.all_gps {
display: flex;
flex-direction: row;
}
.gps {
width: 150px;
height: 50px;
margin-left: 10px;
background-color: white;
text-align: center;
line-height: 50px;
list-style: none;
font-size: 20px;
font-weight: bold;
color: black;
cursor: pointer;
}
.gps_ck {
color: white;
background-color: red;
}
hr {
color: red;
}html部分：
<div id="app">
<ul class="all_gps">
<li @click="clickIndex=index" v-for="(item,index) in list":key="item.id" :class="{gps_ck: clickIndex===index}" class="gps">{{item.name}}</li>
</ul>
</div>
<hr>js部分：
const app=new Vue({
el:'#app',
data:{
clickIndex: 0,
list:[
{id:1,name:'京东秒杀'},
{id:2,name:'每日特价'},
{id:3,name:'品类秒杀'}
]
}
})效果：
点击哪个，哪个就会高亮
操作style
语法： :style="样式对象"
<div class="box" :style="{CSS属性名1:CSS属性值,CSS属性名2:CSS属性值}"></div>5、v-model应用于其他表单元素
常见的表单元素都可以用v-model绑定关联->快速获取或设置表单元素的值
它会根据控件类型自动选取正确的方法来更新元素
部分的表单控件需要绑定一个value值，传入data中，可以事项选或不选
6、计算属性
概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算
语法：
1、声明在computed配置项中，一个计算属性对应一个函数
2、使用起来和普通属性一起使用{{计算属性名}}
computed计算属性：
作用：封装了一段对于数据的处理，求得一个结果
method方法：
作用：给实例提供一个方法，调用以处理业务逻辑
语法：
1、写在methods配置项中
2、作为方法，需要调用-> this.方法名() {{方法名() }} @事件名=“方法名”
缓存特性（提升性能）：
计算属性会计算出来的结果缓存，再次使用直接读取缓存，
依赖项变化了，会自动重新计算->并再次缓存
* 计算属性完整写法
计算属性默认的简写，只能读取访问，不能修改
computed: {
计算属性名: {
get() {
一段代码逻辑（计算逻辑）
return 结果
},
set(修改的值) {
一段代码逻辑（修改逻辑）
}
}
}7、watch侦听器
作用：监视数据变化，执行一些业务逻辑或异步操作
语法：
简单写法：简单类型数据，直接监视
完整写法：添加额外配置项
简单写法：
data: {
words:'苹果',
obj: {
words:'苹果'
}
},
watch: {
数据属性名(newValue,oldValue) {
一些业务逻辑或异步操作
},
'对象.属性名'(newValue,oldValue) {
一些业务逻辑或异步操作
}
}完整写法-添加额外配置项
1、deep:true对复杂类型深度监视
2、immediate:true初始化立刻执行一次handler方法
data: {
obj: {
words:'苹果',
lang:'italy'
}
},
watch: {
数据属性名: {
deep:true,
handler(newValue) {
console.log(newValue)
}
}
}