本PDF文档全面总结了Vue框架中的常用方法和技巧，旨在帮助开发者快速掌握并高效运用Vue进行前端开发。
### Vue常用方法总结
#### 第一章：Vue核心知识讲解
1. **引包、留坑、实例化及插值表达式**：
- 引入Vue库。
- 在HTML中使用`
`等标签作为模板，为后续的DOM操作做准备（“留坑”）。
- 使用`new Vue({el: #app, data: {}})`创建Vue实例并将其绑定到特定的元素上。
- 利用双大括号插值表达式如`{{ message }}`在HTML中显示数据。
2. **熟悉及使用常用指令**：
- 指令是带有前缀“v-”的特殊属性，用于操作DOM或控制Vue实例的行为。
- 常见的有：`v-if`, `v-for`, `v-on`, 和`v-model`等。
3. **单向数据流及事件绑定**：
- 单向数据流通过`v-bind:attr=value`（简写为`:attr=value`）实现属性值绑定。
- 双向数据流使用`v-model`指令，适用于带有value属性的元素如输入框和选择框等。
- 事件绑定采用`v-on:eventName=expression | function()`(可以简化为 `@eventName=expression | function()`)。
4. **过滤器**：
- 过滤器分为全局过滤器与组件内局部过滤器，使用方法是`{{ message | filterName }}`。
- Vue中的`this`对象用于访问Vue实例的属性和方法，并非普通JavaScript中的上下文环境变量。
5. **数据监听watch及计算属性computed**：
- `watch`: 监听单个或多个响应式值的变化，适用于复杂的逻辑处理场景；
- `computed`: 适用于需要依赖其他数据源进行复杂运算的情况。总结：`watch`用于单一变化的监控而`computed`适合于多变量之间的关联计算。
#### 第二章：组件化开发知识介绍
1. **创建和使用Vue组件**：
- 组件可以通过局部声明的方式定义，也可以通过全局注册的方法。
- 组件类型包括声明、注册及使用的三个步骤（三步曲）。
2. **slot插槽与ref/$parent**：
- 插槽用于在父级模板中指定子组件的内容插入点。
- 使用`ref`属性可以获取到子组件的实例，通过`$parent`则可访问父组件的数据和方法等信息。
3. **父子组件通信核心机制**：
- 父向子传递数据：利用props将父级变量传给子组件；
- 子向父传递消息：使用事件（如 `$emit(eventName, data)`) 通知父级并携带相关参数以触发特定的逻辑。
4. **非父子组件间通信机制**：
- 使用Bus总线模式实现不同层级或无关联的Vue实例之间的数据交换；
- 回调函数方法是另一种有效的方式，适用于简单且直接的数据传递场景。
5. **生命周期钩子详解**：
- 了解各个阶段的作用及应用场景：创建、挂载和销毁组件等。
#### 第三章：路由模块讲解
1. **单页应用的路由模式与哈希模式原理**
2. **Vue Router安装使用指南**
3. **页面跳转方式及其区别**
4. **路由参数传递（查询参/路径参）**，以及解决js跳转时传参不刷新的问题
5. 嵌套路由配置及导航守卫应用
#### 第四章：构建项目利器—vue-cli3
1. 安装与创建Vue项目。
2. 配置文件`vue.config.js`自定义设置。
#### 第五章：状态管理核心知识详解
- Vuex基础用法（State、Mutations、Actions等）和高级特性如计算属性Getters及模块化概念Modules。
5星
