2024-04-24 vue2知识点小结

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

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

2. 数据绑定：

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

3. 指令：

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

4. 计算属性（Computed Properties）：

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

5. 监听属性（Watchers）：

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

6. 组件：

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

7. 生命周期钩子函数：

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

8. 模板语法：

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

9. 过渡动画：

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

10. Vue Router：

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

11. Vuex：

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

12. 服务端渲染：

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

13. 插件：

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

14. mixin：

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

15. 过滤器（Filters）：

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

16. 自定义指令：

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

17. 事件修饰符（Event Modifiers）：

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

18. 表单输入绑定：

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

19. 组件通信：

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

20. 动态组件：

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

21. 异步组件：

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

22. 插槽（Slots）：

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

23. 动态组件和静态组件：

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

24. 路由导航守卫：

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

25. 事件总线：

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

26. 混入（Mixins）：

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