【Vue】指令补充+样式绑定+计算属性+侦听器

【指令补充】

【指令修饰符】

指令修饰符可以让指令的 功能更强大，书写更便捷

分类：

1.按键修饰符（侦测当前点击的是哪个按键）

2.事件修饰符（简化程序对于阻止冒泡， 一些标签的默认默认行为的操作）

3.双向绑定指令修饰符（让v-model的功能更强大）

【按键修饰符】

• @keydown.enter：当enter键按下时触发

• @keyup.enter：当enter键抬起时触发

【事件修饰符】

1. @事件名.stop —> 阻止冒泡

2. @事件名.prevent —>阻止默认行为

3. @事件名.stop.prevent —>可以连用， 即阻止事件冒泡也阻止默认行为

【v-model修饰符】

• v-model.trim —> 去除输入框的首尾空格后， 再同步给数据

• v-model.number —> 尝试用parseFloat()把输入框的值转成数字后， 同步给数据， 转不了就不转

• v-model.lazy —> 失去焦点时同步数据，而不是输入时同步数据

【双向绑定指令修饰符】

输⼊框 input:text ——> value

文本域 textarea ——> value

下拉菜单 select ——> value

单选框 input:radio ——> value

复选框 input:checkbox ——> checked / value

<script setup>
import { ref } from 'vue'
// ⾃我介绍
const intro = ref('')
// 收集城市
const city = ref('SH')
// 收集血型
const blood = ref('ab')
// 是否同意用户协议
const isAgree = ref(false)
// 收集爱好
const hobby = ref(['ZQ', 'PB'])
</script>
<template><div><!-- 文本域 --><textarea v-model="intro" cols="30" rows="4"placeholder="请输⼊自我介绍"></textarea><br /><br /><!-- 下拉菜单 --><!-- 哪个option的value放到city的ref中， 哪个就是初始值（默认选项） --><select v-model="city"><option value="BJ">北京</option><option value="SH">上海</option><option value="SZ">深圳</option><option value="HZ">杭州</option></select><br /><br /><!-- 单选框：多个当中只能选择⼀个 ，v-model需要找value， 需要给单选框手动添加 value 属性 --><!-- 由于input没有紧密联系的父标签， 所以需要每个标签都加上v-model --><input type="radio" value="a" v-model="blood" />A<input type="radio" value="b" v-model="blood" />B<input type="radio" value="ab" v-model="blood" />AB<input type="radio" value="o" v-model="blood" />O<br /><br /><!-- 复选框， 如果只有一个复选框， v-model绑定布尔值， 关联复选框的checked属性 --><!-- 如果有多个， v-model绑定数组， 关联复选框的value属性 ，需要手动添加 value 属性 --><input type="checkbox" v-model="isAgree" />是否同意用户协议<br /><br /><input v-model="hobby" type="checkbox" value="LQ" />篮球<input v-model="hobby" type="checkbox" value="ZQ" />足球<input v-model="hobby" type="checkbox" value="YMQ" />⽻⽑球<input v-model="hobby" type="checkbox" value="PPQ" />乒乓球<br /><input v-model="hobby" type="checkbox" value="PB" />跑步<input v-model="hobby" type="checkbox" value="YY" />游戏<input v-model="hobby" type="checkbox" value="PLT" />普拉提<input v-model="hobby" type="checkbox" value="LDW" />拉丁舞</div>
</template>
<style scoped></style>

【总结】

v-model如何收集下拉列表的值？

v-model写在select上, 关联是选中option的`value`

v-model如何收集单选框的值？ 

给单选框添加value属性, v-model收集选中单选框的value

v-model作用在复选框上要注意什么？

一个复选框, v-model绑定布尔值 , 关联 checked 属性

一组复选框, v-model绑定数组, 关联 value 属性, 给复选框手动添加 value

【样式绑定】

为了方便开发者进行样式控制, Vue 扩展了 v-bind 的语法, 可以针对 class 类名 和 style 行内样式 两个属性进行控制, 进而通过数据控制元素的样式

【操作class】

语法  :class = "三元表达式 / 对象"

三元绑定时：  :class = "条件 ？类名1 : 类名2"

对象绑定时：  :class = "{ 类名1:布尔值1  ,  类名2:布尔值2  .....}" (布尔为true时， 添加类名， 否则移除)

【操作style】

 语法 <div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

【计算属性】

基于现有的数据， 通过计算得到的新数据， 当现有的数据变化时，会自动重新计算。

语法： 使用 computed 函数，计算得到⼀个新数据进行展示（需要按需导入 computed 函数）

礼物总数会随着所有礼物的数量变动而发生实时变动

js中获取计算属性： 计算属性.value 

模板中使用计算属性：{{ 计算属性 }} 或 配合指令

【计算属性相比于普通函数的优势】

计算属性的方法无论调用多少次， 都只会执行一次， 这是因为在首次执行时， 它已经把结果缓存到内存中， 二次继续执行时， 发现依赖（即用于计算属性的参数）没有变化， 因此不会去继续缓存，而是直接读取缓存

这可以节省开销， 提高效率

【计算属性的完整写法】

上述中展示的是计算属性的默认简易写法， 它是只读的， 不能直接改， 只能通过修改依赖的方式进行修改

可以使用完整写法来让其可以被直接改

如：

【侦听器】

监视响应式数据的变化, 当数据变了。 就可以执行DOM操作或异步操作

比如监视搜索框打字后弹出的一系列关键字的变化， 变了后就可以用最新的关键字发送对应的请求

语法： 使用 watch函数（需要按需导入 watch函数）