一、指令修饰符
通过 " . " 指明一些指令后缀，不同后缀封装了不同的处理操作 ，目的是为了简化代码。
1、按键修饰符
@keyup.enter 键盘回车监听，一旦回车就对文本框里的数据进行处理。
2、v-model 修饰符
v-model.trim 去除首尾空格
v-model.number 转为数字
3、事件修饰符
@事件名.stop 阻止冒泡（冒泡是从子级到父级；捕获是从父级到子级）
@事件名.present 阻止默认行为（例如<a>标签，点击会跳转到新页面，加了这个，就可以阻止跳转）
二、v-bind 对样式控制的增强
1、操作class
语法： :class="对象/数组"
（1）对象
对象就是键值对格式的，键就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类。
使用场景：来回切换效果，导航栏这种
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>（2）数组
数组中的类都会被添加到盒子里，本质上就是一个class列表。
使用场景：批量添加或删除类
<div class="box" :class="[类名1, 类名2, 类名3]"></div>2、操作style
语法： :style="样式对象"
使用场景：某个具体属性的动态设置
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值,}"></div>三、v-model 应用于其他表单元素
常见的表单元素都可以用v-model绑定关联，用来快速获取或设置表单元素的值，会根据空间类型自动选取正确的方法来更新元素
输入框： input:text
文本域：textarea，和文本绑定方式一样，只要设置v-model
复选框：input:checkbox，只需要设置v-model用来实现绑定选定的值
单选框：input:radio ， v-model和name，value结合起来使用，用来实现绑定选定的值
下拉菜单：select，option要设置value值，select的value，关联选中的option的值，结合v-model用来实现绑定选中的值。
姓名：
<input type="text" v-model="username">
<br><br>
是否单身：
<input type="checkbox" v-model="isSingle">
<br><br>
<!-- name用来控制只勾选一个， value关联勾选的值 -->
性别:
<input v-model="gender" type="radio" name="gender" value="0">男
<input v-model="gender" type="radio" name="gender" value="1">女
<br><br>
所在城市:
<select v-model="cityId">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="成都">成都</option>
<option value="南京">南京</option>
</select>
<br><br>
自我描述：
<textarea v-model="desc"></textarea>四、计算属性
基于现有的数据，计算出一个新属性。依赖的数据改变，自动重新计算。比如淘宝购物车的结算页面，会有商品数量和商品总价格。
1、只涉及读取，不涉及修改
语法：
声明在computed配置项中，一个计算属性对应一个函数；使用起来和普通属性一样{{ 计算属性名 }}
computed:{
计算属性名(){
// 基于现有的数据，编写出求值的逻辑
return 结果
}
}示例：
<script>
const app = new Vue({
el: '#app',
data: {
list: [
{ id: 1, subject: '语文', score: 20 },
{ id: 7, subject: '数学', score: 99 },
{ id: 12, subject: '英语', score: 70 },
],
subject: '',
score: ''
},
computed:{
total(){
// 返回score的总和
return this.list.reduce((sum, item)=> sum+item.score, 0)
}
}
})
</script>2、涉及修改
计算属性默认的简写，只能读取访问，不能"修改"；如果要修改，需要写计算属性的完整写法。
computed:{
计算属性名: {
get(){
// 一段代码逻辑
return 结果
},
set(修改的值){
// 一段代码逻辑
return 结果
}
}
}3、computed计算属性 vs methods方法
computed计算属性：写在computed配置项中；作为属性直接使用，this.计算属性。
methods方法：写在methods配置项中；作为方法需要调用，this.方法名()
五、watch监听器
作用：用来监视数据变化，执行一些业务逻辑或者异步操作。最常见的就是实时翻译，左边输入，右边就进行翻译。
1、简单写法
简单类型数据，直接监听。
watch: {
// 该方法会在数据变化时调用执行
// newValue新值, oldValue老值（一般不用）
数据属性名 (newValue) {
console.log('变化了', newValue)
},
'对象.属性名' (newValue) {
console.log('变化了', newValue)
}
}2、完整写法
添加额外配置项
（1）deep:true 对复杂数据进行深度监视
（2）immediate:true 初始化立刻执行一次handler方法
watch: {
数据属性名: {
deep: true, // 深度监视
immediate: true, // 立刻执行，一进入页面handler就立刻执行一次
handler (newValue) {
console.log(newValue)
}
}
}