一、指令修饰符
1、简介
指令修饰符就是通过 "." 增加一些指令的后缀，让这个指令有不同的作用
常用：
①按键修饰符 @keyup.enter -> 键盘回车监听
②v-model修饰符
v-model.trmi -> 去除首尾空格
v-model.number -> 转数字
③事件修饰符
@事件名.stop -> 组织冒泡
@事件名.prevent -> 转数字
@事件名.stop.prevent -> 可以连用 即组织事件冒泡也组织默认行为
二、v-model在其他表单元素的使用
常见的表单元素都可以用v-model绑定关联 -> 快速获取或设置表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
输入框 input:text value
文本域 textarea value
复选框 input:checkbox checked
单选框 input:radio checked
下拉菜单 select value
<div id="app">
<h3>信息网</h3>
姓名：
<input type="text" v-model="user.username">
<br><br>
是否单身：
<input type="checkbox" v-model="user.isSingle">
<br><br>
<!--
前置理解：
1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥
2. value: 给单选框加上 value 属性，用于提交给后台的数据
结合 Vue 使用 → v-model
-->
性别：
<input type="radio" name="gender" value="1" v-model="user.gender">男
<input type="radio" name="gender" value="2" v-model="user.gender">女
<br><br>
<!--
前置理解：
1. option 需要设置 value 值，提交给后台
2. select 的 value 值，关联了选中的 option 的 value 值
结合 Vue 使用 → v-model
-->
性别：
<select v-model="user.cityId">
<option value="101">北京</option>
<option value="102">上海</option>
<option value="103">成都</option>
<option value="104">成都</option>
</select>
<br><br>
自我描述：
<textarea v-model="user.desc"></textarea>
<button @click="getuser">立即注册</button>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
user:{
username:"111",
isSingle:true,
gender:"2",
cityId:"102",
desc:"1122"
}
},
methods:{
getuser(){
console.log(this.user)
}
}
})
</script>
三、v-bind对样式控制
Vue扩展了v-bind的语法，可以针对class类名和style行内样式进行控制
①操作class类名 语法 :class = "对象/数组"
②操作style行内样式 语法 :style = "样式对象"
四、操作class类名
操作class类名 语法 :class = "对象/数组"
①对象形式
<div class = "box" :class="{类名1: 布尔值, ...}"></div>
②数组形式
<div class = "box" :class="{pink: true}">深圳大学</div>
<body>
<div id="app">
<div>
<div class="box" :class="{pink:ispink,big:isbig}" >深圳大学</div>
<div class="box" :class="classList">深圳大学</div>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
ispink:true,
isbig:true,
classList:['pink','big']
}
})
</script>
</body>
五、操作style样式
<div style="width:400px;height:400px;" ></div>
语法 :style = "样式对象"
<div class = "box" :style="{CSS属性名1: css属性值, CSS属性名2: css属性值}"></div>
<div class = "box" :style="{width:'400px', height: '400px', backgroundColor: 'green'}"></div>
六、computed计算属性 VS methods方法
computed计算属性具有**【缓存】特性**，执行性能比methods方法要高
methods方法，每次调用都会重新计算一次后再返回结果，性能较computed计算属性要低一些
七、computed计算属性
概念：依赖现有的数据，计算出来的新属性。当依赖的数据变化时，自动重新计算。
语法：【简写版】
① 声明在 computed 配置项中，一个计算属性对应一个函数
② 使用起来和普通属性一样使用 {{ 计算属性名 }}
注意:
1、computed配置项和data配置项是同级的
2、computed中的计算属性虽然是函数的写法，但他依然是个属性
3、computed中的计算属性不能和data中的属性同名
4、使用computed中的计算属性和使用data中的属性是一样的用法
5、computed中计算属性内部的this依然指向的是Vue实例
八、计算属性完整写法
九、watch侦听器（监视器）
作用：监视数据变化，执行一些业务逻辑或异步操作
1、简单写法
watch: {// watch 完整写法
数据属性名(newValue,oldValue){
console.log(newValue,oldValue)
}
}
2、完整写法
watch: {// watch 完整写法
数据属性名: {
deep: true, // 深度监视(针对复杂类型)
immediate: true, // 是否立刻执行一次handler
handler (newValue) {
console.log(newValue)
}
}
}
