Vue学习周总结：深入理解数据监测与事件处理

资源摘要信息:"前端vue本周个人学习成果" 1. **事件修饰**： 在Vue中，事件修饰符是处理DOM事件时常用的一种语法糖，它可以让我们在不写过多JavaScript代码的情况下，直接在模板中处理一些事件的细节。Vue提供了`.stop`, `.prevent`, `.capture`, `.self`, `.once`, `.passive`等多种事件修饰符。比如`.stop`可以阻止事件冒泡，`.prevent`可以阻止事件默认行为，`.once`可以确保事件监听器只被触发一次。 2. **绑定样式**： 在Vue模板中绑定CSS样式可以通过`v-bind:style`或者它的简写形式`:`来完成。它允许我们动态地将样式对象绑定到元素上，也可以将样式字符串直接绑定。此外，还可以绑定多个样式对象以及动态切换它们。样式绑定通常用于实现条件性样式渲染，如响应媒体查询变化或用户交互。 3. **总结vue数据监测**： Vue使用了一种叫做“依赖收集”的方法来监测数据的变化。当Vue实例创建时，它会遍历`data`对象的所有属性，并使用`Object.defineProperty`方法将它们转换为getter/setter。这样，每个属性在被访问和修改时都会通知Vue实例。依赖收集是Vue响应式系统的核心，它记录了哪些依赖在使用这个属性，当属性发生变化时，依赖会被自动更新。 4. **收集表单数据**： 在Vue中，收集表单数据通常依赖于`v-model`指令，它提供了一种表单输入和应用状态之间的双向绑定。`v-model`在不同表单元素中会根据类型进行不同的处理。例如，在`<input>`、`<textarea>`及`<select>`元素中创建双向数据绑定，使得数据处理变得简洁。`v-model`同样支持修饰符，如`.lazy`, `.number`, `.trim`等，来满足不同场景下的需求。 5. **列表过滤**： 在处理列表数据时，Vue允许我们通过计算属性（computed properties）和方法（methods）来实现列表的过滤功能。计算属性是基于它们的依赖进行缓存的，只有在相关依赖改变时才会重新求值。这使得它们非常适合用于执行过滤或排序操作，因为它们会缓存结果，不需要每次组件重新渲染时都执行。 6. **el和data两种写法**： 在Vue实例化时，可以使用`el`选项来挂载Vue实例到一个已存在的DOM元素，也可以在创建实例之前先定义一个`template`选项，将模板内容写在其中。另一方面，`data`选项可以是一个函数或一个对象，当它是一个函数时，每个实例可以维护一份被返回对象的独立拷贝。这样做可以避免数据状态在多个实例之间共享。 7. **天气案例_深度监视**： 在Vue中，深度监视（deep watch）允许我们监听对象内部值的变化。当监视的属性值是对象或数组这样的复杂数据结构时，就需要使用深度监视。通常通过将监视表达式设置为字符串形式，并在前面加上`deep`标志，或者使用`watch`选项的`deep`属性设置为`true`来启用深度监视。 8. **过滤器**： Vue允许开发者定义一些可复用的文本格式化功能，称为过滤器（filters）。过滤器可以在两个地方使用：双花括号插值和`v-bind`表达式中。过滤器可以串联，也可以接受参数。过滤器虽然有助于模板的文本处理，但官方推荐更多使用计算属性或方法，因为它们的组合功能更强大。 9. **vue监测数据改变的原理_数组**： Vue对数组的响应式处理不像对象那样简单。Vue采用了一些方法来拦截数组的一些方法，比如`push`, `pop`, `shift`, `unshift`, `splice`, `sort`, `reverse`，使得这些方法能够触发视图更新。对于数组索引的直接赋值，Vue无法检测到变化，因此提供了`Vue.set`或`this.$set`方法来强制更新视图。 10. **天气案例_监视简写形式**： Vue中的`watch`选项用于监视数据变化，提供了执行异步操作或者昂贵操作的时机。监视的简写形式即直接写一个方法名，而完整形式则需要一个对象，其中可以包含`handler`方法和一些其他选项。简写形式提供了一种更简洁的语法来监视数据属性，使得代码更加直观易懂。