🚩🚩🚩vue专栏：Vue全家桶

---

👍👍👍 希望各位博主多多支持！！！💖

---

#### 1.8 计算属性 > * 定义：要用的属性不存在，要通过已有属性计算得来 > * 原理：底层借助了Objcet.defineProperty方法提供的getter和setter **get函数什么时候执行？** (1).初次读取时会执行一次 (2).当依赖的数据发生改变时会被再次调用 **注：** * 计算属性最终会出现在vm上，直接读取使用即可 * 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变 ```html 计算属性完整版写法 ``` #### 1.9 键盘事件 `键盘事件语法：@keydown，@keyup` 1. Vue中常用的按键别名： | | | |--|--| |回车|enter| | 删除 | delete (捕获“删除”和“退格”键) | | 退出 | esc | | 换行 | tab (特殊，必须配合keydown去使用) | | 空格 | space | | 上 | up | | 下 | down | | 左 | left | | 右 | right | 2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名） 3. 系统修饰键（用法特殊）：`ctrl、alt、shift、meta` - 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。 - 配合keydown使用：正常触发事件。 4. 也可以使用keyCode去指定具体的按键（不推荐） 5. `Vue.config.keyCodes.自定义键名 = 键码`，可以去定制按键别名 #### 1.10 监视属性 监视属性watch： * 当被监视的属性变化时, 回调函数自动调用 * 监视的属性必须存在，才能进行监视 * 监视的两种写法： * (1).new Vue时传入watch配置 * (2).通过vm.$watch监视 ```html ``` **深度监视：** (1).Vue中的watch默认不监测对象内部值的改变（一层） (2).配置deep:true可以监测对象内部值改变（多层） > 备注： > > 🌞Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以 > >✨ 使用watch时根据数据的具体结构，决定是否采用深度监视 ```html ``` **💥💥💥computed和watch之间的区别：** * computed能完成的功能，watch都可以完成 * watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作 > 👍两个重要的小原则： >

---

> 1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象 > > 2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象 #### 1.11 绑定样式 ##### class样式 写法：:class="xxx" xxx可以是字符串、对象、数。 所以分为三种写法，`字符串写法，数组写法，对象写法` - (1)字符串写法 字符串写法适用于：`类名不确定，要动态获取。` ```html ``` - (2)数组写法 数组写法适用于：`要绑定多个样式，个数不确定，名字也不确定。` ```html ``` - (3)对象写法 对象写法适用于：`要绑定多个样式，个数确定，名字也确定，但不确定用不用。` ```html ``` ##### style样式 有两种写法，对象写法，数组写法 - (1)对象写法 ```html ``` - (3)数组写法 ```html ``` #### 1.12 条件渲染 ##### v-if * (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" * 适用于：切换频率较低的场景 * 特点：`不展示的DOM元素直接被移除` * 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断” ##### v-show * 写法：v-show="表达式" * 适用于：`切换频率较高的场景` * 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉(display:none) > 备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到 > > v-if 是实打实地改变dom元素，v-show 是隐藏或显示dom元素 ```html ``` #### 1.13 列表渲染 ##### v-for指令 * 用于展示列表数据 * 语法：v-for="(item, index) in xxx" :key="yyy" * 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少） ```html ``` #### 1.14 vue 监测data 中的 数据 ```html ``` **Vue.set 的使用** > Vue.set(target，propertyName/index，value) 或 >

---

> > vm.$set(target，propertyName/index，value) **用法**： 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响 应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 `vm.myObject.newProperty = 'hi'`) ```html //代码 ``` > 所以我们通过 vm._data.student.hobby[0] = 'aaa' // 不起作用 > > vue 监测在数组那没有 getter 和 setter，所以监测不到数据的更改，也不会引起页面的更新 vue对数组的监测是通过 包装数组上常用的用于修改数组的方法来实现的。 #### 1.15 收集表单数据 (1) 若：`输入框为文本框`，则v-model收集的是value值，用户输入的就是value值。 (2) 若：`输入框为单选框`，则v-model收集的是value值，且要给标签配置value值。 (3) 若：`输入框为复选框`，则 * 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值） * 配置input的value属性: * v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值） * v-model的初始值是数组，那么收集的的就是value组成的数组 **注：** `v-model的三个修饰符：` - lazy：失去焦点再收集数据 - number：输入字符串转为有效的数字 - trim：输入首尾空格过滤