2024-04-24 vue2知识点小结

Vue 实例的创建和基本使用方法：

• 使用 new Vue() 创建一个 Vue 实例。
• 传入一个包含选项的对象，如 data、methods、computed、watch 等。
• 使用 el 选项来指定 Vue 实例挂载的元素。

数据绑定：

• 双向数据绑定：使用 v-model 指令实现表单元素与数据的双向绑定。
• 单向数据绑定：使用 v-bind 或简写语法 : 将属性绑定到 Vue 实例的数据。

指令：

• v-if、v-else-if、v-else：条件渲染。
• v-for：循环渲染列表。
• v-on、@：绑定事件监听器。
• v-show：根据条件显示元素。
• v-bind、:：动态地绑定一个或多个属性。

计算属性（Computed Properties）：

• 基于 Vue 实例的响应式依赖进行缓存。
• 在模板中以普通属性的方式使用。
• 适合处理复杂的逻辑或需要缓存的计算结果。

监听属性（Watchers）：

• 监听 Vue 实例中的数据变化。
• 当数据变化时执行特定的函数。

组件：

• 使用 Vue.component() 全局注册组件。
• 在 Vue 实例的 components 选项中注册局部组件。
• 组件之间可以相互通信。

生命周期钩子函数：

• created、mounted、updated、destroyed 等生命周期函数。
• 可以在不同的生命周期阶段执行相应的操作，如数据初始化、DOM 渲染、销毁等。

模板语法：

• 使用双大括号插值表达式 {{ }} 显示数据。
• 使用指令（Directives）操作 DOM。
• 使用事件处理器绑定事件。

过渡动画：

• 使用 transition、transition-group 包裹元素来实现过渡效果。
• 使用 CSS 过渡类名或 JavaScript 钩子函数来控制动画效果。

Vue Router：

• Vue.js 官方的路由管理器。
• 使用路由配置来定义路由规则。
• 使用 router-link 和 router-view 组件来导航和渲染视图。

Vuex：

• Vue.js 官方的状态管理库。
• 包含状态（State）、突变（Mutation）、动作（Action）、模块（Module）等概念。
• 用于管理应用的全局状态。

服务端渲染：

• 使用 Vue SSR 来实现服务端渲染。
• 通过服务器生成 HTML，在客户端进行激活，提高首次加载性能和 SEO。

插件：

• Vue 插件是一个具有 install 方法的 JavaScript 对象。
• 可以扩展 Vue 的功能。

mixin：

• 允许在多个组件之间共享代码。
• 将一组选项合并到组件中。

过滤器（Filters）：

• 用于数据格式化。
• 通过管道符 | 将数据传递给过滤器。

自定义指令：

• 允许开发者注册全局或局部的自定义指令。
• 可以用于操作 DOM。

事件修饰符（Event Modifiers）：

• 用于简化事件处理程序的操作。
• 包括 .stop、.prevent、.capture、.self 等修饰符。

表单输入绑定：

• 使用 v-model 实现表单元素与数据的双向绑定。

组件通信：

• 父子组件通信：通过 props 和事件来实现。
• 兄弟组件通信：通过共享状态或使用事件总线等方式。
• 跨级组件通信：使用 provide/inject 或 Vuex。

动态组件：

• 根据当前组件的状态动态地切换显示不同的组件。

异步组件：

• 使用 import() 或 require.ensure() 动态地加载组件。
• 用于优化应用的性能，延迟加载组件。

插槽（Slots）：

• 用于在组件中扩展内容的机制。
• 具有具名插槽和作用域插槽等不同类型。

动态组件和静态组件：

• 静态组件：在模板中直接引用的组件。
• 动态组件：通过动态绑定组件名来实现动态渲染。

路由导航守卫：

• beforeEach、beforeResolve、afterEach 等导航守卫钩子。
• 用于在路由跳转前、跳转解析完毕后、跳转完成后执行特定逻辑。

事件总线：

• 用于跨组件通信的简单实现方式。
• 创建一个空的 Vue 实例作为事件中心，通过 $emit 和 $on 来发送和监听事件。

混入（Mixins）：

• Vue.js 中一种非常强大的功能，用于在组件之间共享可重用的功能。它允许你将一个对象的所有属性混合到另一个对象中去。
• 定义 Mixin：在 Vue 中，可以通过创建一个普通的 JavaScript 对象来定义 Mixin。这个对象可以包含各种选项，如数据、计算属性、方法等。
• 全局 Mixin：通过 Vue.mixin() 方法全局注册一个 Mixin，它将影响每个 Vue 实例。
• 局部 Mixin：在组件的选项中使用 mixins 属性来指定要混合的 Mixin。这使得 Mixin 可以针对特