vue2 详细教程官网

综合案例-成绩案例代码笔记

思路分析：

1.渲染功能 v-for :key v-bind:动态绑定class的样式

2.删除功能 v-on绑定事件，阻止a标签的默认行为

3.v-model的修饰符 .trim、 .number、判断数据是否为空后再添加、添加后清空文本框的数据

4.使用计算属性computed 计算总分和平均分的值

watch侦听器代码笔记

综合案例-购物车代码笔记

实现思路：

1.基本渲染： v-for遍历、:class动态绑定样式

2.删除功能： v-on 绑定事件，获取当前行的id

3.修改个数： v-on绑定事件，获取当前行的id，进行筛选出对应的项然后增加或减少

4.全选反选
1. 必须所有的小选框都选中，全选按钮才选中 → every
2. 如果全选按钮选中，则所有小选框都选中
3. 如果全选取消，则所有小选框都取消选中
声明计算属性，判断数组中的每一个checked属性的值，看是否需要全部选

5.统计选中的总价和总数量：通过计算属性来计算选中的总价和总数量

6.持久化到本地：在数据变化时都要更新下本地存储 watch

生命周期

Vue生命周期钩子代码笔记

案例-小黑记账清单代码笔记

实现思路：

1.基本渲染
- 立刻发送请求获取数据 created
- 拿到数据，存到data的响应式数据中
- 结合数据，进行渲染 v-for
- 消费统计 —> 计算属性
2.添加功能
- 收集表单数据 v-model，使用指令修饰符处理数据
- 给添加按钮注册点击事件，对输入的内容做非空判断，发送请求
- 请求成功后，对文本框内容进行清空
- 重新渲染列表
3.删除功能
- 注册点击事件，获取当前行的id
- 根据id发送删除请求
- 需要重新渲染
4.饼图渲染
- 初始化一个饼图 echarts.init(dom) mounted钩子中渲染
- 根据数据试试更新饼图 echarts.setOptions({...})

组件注册

普通组件的注册使用-局部注册代码笔记

普通组件的注册使用-全部注册代码笔记

综合案例-分析页面，按模块拆分组件，搭架子 (局部或全局注册) 笔记

组件通信

props父子组件之间的通信笔记

父向子通信代码代码子向父通信代码代码
props的类型校验代码笔记

为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误
props&data、单向数据流代码笔记

**1.共同点:**都可以给组件提供数据

2.区别:
- data 的数据是自己的 → 随便改
- prop 的数据是外部的 → 不能直接改，要遵循 单向数据流
- 谁的数据谁负责
综合案例小黑记事本代码笔记

**列表渲染-**思路分析：
1. 提供数据：提供在公共的父组件 App.vue
2. 通过父传子，将数据传递给TodoMain
3. 利用v-for进行渲染
**添加功能-**思路分析：
1. 收集表单数据 v-model
2. 监听时间（回车+点击都要进行添加）
3. 子传父，将任务名称传递给父组件App.vue
4. 父组件接受到数据后进行添加 unshift(自己的数据自己负责)
**删除功能-**思路分析：
1. 监听时间（监听删除的点击）携带id
2. 子传父，将删除的id传递给父组件App.vue
3. 进行删除 filter (自己的数据自己负责)
**底部功能及持久化存储-**思路分析：
1. 底部合计：父组件传递list到底部组件 —>展示合计
2. 清空功能：监听事件 —> 子组件通知父组件 —>父组件清空
3. 持久化存储：watch监听数据变化，持久化到本地

非父子通信事件总线

非父子通信-event bus 事件总线代码笔记

非父子组件之间，进行简易消息传递。(复杂场景→ Vuex)
非父子通信-provide&inject 代码笔记

跨层级共享数据

v-model原理代码笔记

表单类组件封装代码笔记

实现子组件和父组件数据的双向绑定
.sync修饰符代码笔记

可以实现 子组件与父组件数据的双向绑定，简化代码

利用ref 和 $refs 可以用于获取 dom 元素或组件实例代码笔记

编辑标题, 编辑框自动聚焦代码笔记

自定义指令笔记

1.指令介绍

内置指令：v-html、v-if、v-bind、v-on... 这都是Vue给咱们内置的一些指令，可以直接使用
自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为自定义指令

每个指令都有自己各自独立的功能

2.自定义指令

概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能

指令全局注册代码局部注册代码笔记

自定义指令-指令的值代码笔记

自定义指令-v-loading指令的封装代码笔记

插槽-默认插槽代码笔记

插槽-后备内容（默认值）代码笔记

插槽-具名插槽代码笔记

作用域插槽代码笔记

综合案例 - 商品列表-MyTag组件抽离

my-tag 标签组件封装

(1) 双击显示输入框，输入框获取焦点

(2) 失去焦点，隐藏输入框

(3) 回显标签信息

(4) 内容修改，回车 → 修改标签信息

my-table 表格组件封装

(1) 动态传递表格数据渲染

(2) 表头支持用户自定义

(3) 主体支持用户自定义

my-tag组件封装-创建组件代码笔记

MyTag组件控制显示隐藏代码笔记

MyTag组件进行v-model绑定代码笔记

封装MyTable组件-动态渲染数据代码笔记

封装MyTable组件-自定义结构代码笔记

单页应用程序介绍笔记

路由介绍笔记

路由的基本使用笔记

组件的存放目录问题笔记

路由的基本使用步骤(5+2) 代码笔记

路由模块拆分代码笔记

router-link导航链接高亮代码笔记

精确匹配和模糊匹配代码笔记

自定义高亮类名代码笔记

导航链接传参1-查询参数传参代码笔记

导航链接传参2-动态路由传参代码笔记

动态路由参数-可选符代码笔记

路由重定向代码笔记

路由404 代码笔记

路由-模式设置代码笔记

编程式导航-两种跳转语法代码笔记

编程式导航-跳转传参演示代码笔记

0.1路由介绍笔记

路由的基本使用代码笔记

几个注意点
1. 路由组件通常存放在pages|views文件夹，一般组件通常存放在components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个 router，可以通过组件的$router属性获取到。

多级路由代码笔记

路由的 query 参数代码笔记

命名路由代码笔记

路由的 params 参数代码笔记

路由的 props 配置代码笔记

<router-link>的 replace 属性
1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
3. 如何开启replace模式：<router-link replace .......>News</router-link>

编程式路由导航代码笔记

缓存路由组件代码笔记

路由生命周期钩子代码笔记
1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
2. 具体名字：
  1. activated路由组件被激活时触发。
  2. deactivated路由组件失活时触发。
路由守卫笔记

作用：对路由进行权限控制

全局守卫笔记、独享守卫笔记、组件内守卫笔记
路由器的两种工作模式
1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
3. hash模式：
  1. 地址中永远带着#号，不美观。
  2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
  3. 兼容性较好。
4. history模式：
  1. 地址干净，美观。
  2. 兼容性和hash模式相比略差。
  3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
  注意: 可以使用connect-history-api-fallback 解决问题

vuex 笔记

Vuex 是一个 Vue 的状态管理工具，状态就是数据。

大白话：Vuex 是一个插件，可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如：购物车数据个人信息数

2.使用场景

某个状态在很多个组件来使用 (个人信息)
多个组件共同维护一份数据 (购物车)

3.优势

共同维护一份数据，数据集中化管理
响应式变化
操作简洁 (vuex提供了一些辅助函数)

4.注意：官方原文：

不是所有的场景都适用于vuex，只有在必要的时候才使用vuex
使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度（数据的操作更便捷，数据的流动更清晰）

Vuex就像《近视眼镜》, 你自然会知道什么时候需要用它~

vuex 的使用 - 创建仓库笔记

多组件共享数据代码笔记

核心概念 - state 状态代码笔记

提供数据笔记

访问Vuex中的数据笔记
通过辅助函数 - mapState获取 state中的数据笔记

mapState是辅助函数，帮助我们把store中的数据映射到组件的计算属性中, 它属于一种方便的用法
开启严格模式及Vuex的单项数据流笔记

明确 vuex 同样遵循单向数据流，组件中不能直接修改仓库的数据
核心概念-mutations 笔记

mutations是一个对象，对象中存放修改state的方法
- 带参数的 mutations 笔记
  
  掌握 mutations 传参语法
- Vuex中的值和组件中的input双向绑定笔记
  
  实时输入，实时更新，巩固 mutations 传参语法
- 辅助函数- mapMutations 笔记
  
  mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入
核心概念 - actions 则负责进行异步操作笔记

state是存放数据的，mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化)，actions则负责进行异步操作
辅助函数 -mapActions 笔记

mapActions 是把位于 actions中的方法提取了出来，映射到组件methods中
核心概念 - getters 笔记

除了state之外，有时我们还需要从state中筛选出符合条件的一些数据，这些数据是依赖state的，此时会用到getters
核心概念 - module文件夹代码笔记

掌握核心概念 module 模块的创建
- 获取模块内的state数据代码笔记
  
  掌握核心概念 module 模块的创建
- 获取模块内的getters数据代码笔记
  
  掌握模块中 getters 的访问语
- 获取模块内的mutations方法代码笔记
  
  掌握模块中 mutation 的调用语法
- 获取模块内的actions方法代码笔记
  
  掌握模块中 action 的调用语法 (同理 - 直接类比 mutation 即可)
- Vuex模块化的使用小结笔记
  
  1.直接使用
  1. state --> $store.state.模块名.数据项名
  2. getters --> $store.getters['模块名/属性名']
  3. mutations --> $store.commit('模块名/方法名', 其他参数)
  4. actions --> $store.dispatch('模块名/方法名', 其他参数)
  2.借助辅助方法使用
  
  1.import { mapXxxx, mapXxx } from 'vuex'
  
  computed、methods: {
  
  // ...mapState、...mapGetters放computed中；
  
  // ...mapMutations、...mapActions放methods中；
  
  ...mapXxxx('模块名', ['数据项|方法']),
  
  ...mapXxxx('模块名', { 新的名字: 原来的名字 }),
  
  }
  
  2.组件中直接使用属性 {{ age }} 或方法 @click="updateAge(2)"
综合案例 代码笔记
1. 发请求动态渲染购物车，数据存vuex （存cart模块，将来还会有user模块，article模块...）
2. 数字框可以修改数据
3. 动态计算总价和总数量

jackTang11/vue2-biji

vue2 详细教程官网

模板语法

Class 与 Style 绑定

计算属性和侦听器