Vue3 index

https://vuejs.org/
https://v3.vuejs.org/guide/introduction.html
https://github.com/vuejs/vue
https://github.com/vuejs/docs-next-zh-cn

Vue2
https://github.com/miostudio/vue_learn
http://vue.biomooc.com/

ES5 ES6 简介

1. 000/01.html let作用域不同
2. 000/02.html let 作用域外报错 Uncaught ReferenceError
vue 示例 https://v3.vuejs.org/examples/markdown.html
3. 000/e01.html 查看github提交: 原生ajax
4. 000/e02.html TodoMVC: todos： 使用本地存储
5. 000/e03.html markdown editor
ajax
6. 000/ajax1.html 原生ajax
7. 000/ajax2.html axios.js post
8. 000/import/index.html import 测试

001 Vue 入门

1. 001/01.html demo1: counter
2. 001/02.html v-bind:title="para1" 动态绑定数值
3. 001/03.html v-on:click="fnName" 绑定事件处理输入值（字符串翻转）
4. 001/04.html v-model 双向绑定 表单和app状态
5. 001/05.html v-if
6. 001/06.html v-for
7. 001/11.html Composing with Components

002 Vue 基础: DOM 模板中的 kebab-case

1. 002/01.html 根组件也是一个普通组件
2. 002/02.html 生命周期钩子 Lifecycle Hooks / Lifecycle Diagram

https://v3.vuejs.org/guide/template-syntax.html#interpolations

3. 002/03.html Template Syntax: v-once; v-html; Attributes <div v-bind:id="dynamicId"; js表达式
4. 002/04.html Directives 指令，动态参数不行(用的不多)；缩写 v-bind :, v-on @
5. 002/05.html Data Property 和方法，避免使用$和_开头的变量，这是系统内置顶级变量。防抖和节流 lodash.js//todo
6. 002/06.html 计算属性
7. 002/06-2.html 侦听器Watchers, 不要滥用watch，很多时候computed更简洁。
8. 002/07.html Class and Style Bindings 类和样式绑定

在组件上使用 类和样式绑定//todo

9. 002/08.html Conditional Rendering 条件渲染: v-if, v-show
10. 002/09.html List Rendering 列表渲染 //todo 组件中的v-for
11. 002/10.html Event Handling 事件处理
12. 002/11.html Form Input Bindings 表单输入绑定 //todo 值绑定、修饰符、组件上使用v-model
13. 002/12.html Components Basics 组件基础: 父子组件的通信：父->子 props, 子->父 $emit("eventName")
14. 002/13.html 在组件上使用 v-model //todo: props, 自定义事件, slots, 动态组件 is, 解析 DOM 模板时的注意事项 v-is

003 Vue 深入组件（前置知识: 组件基础）

1. 003/src/index.html模块示例
2. 003/01.html 组件注册
3. 003/02.html Prop类型: 父传子 一个数字/布尔值/数组/对象/ 传入一个对象的所有property
4. 003/02-2.html Prop类型: 父传子 单向流动，怎么改变传入组件内的变量？ //todo Prop 类型验证
5. 003/03.html 非 Prop 的 Attribute
6. 003/04.html Custom Events 自定义事件 //todo 验证抛出的事件
7. 003/04-2.html v-model 参数
8. 003/04-3.html 多个 v-model 绑定
9. 003/04-4.html Handling v-model modifiers (处理 v-model 修饰符)
10. 003/05.html Slots 插槽
11. 003/05-2.html Slots 具名插槽, 动态名字，
12. 003/05-3.html 作用域插槽: 子组件通过slot v-bind 传值给 父组件，父组件根据数据渲染模板后，返回给slot占位符。
13. 003/05-4.html 解构插槽 Prop: 源于ES2015新特性，结构数组和对象
14. 003/06.html Provide / inject: 依赖注入看作是“long range props”， 但是父子互不知晓对方。
15. 003/07.html Dynamic Components 动态组件： keep-alive
16. 003/07-2.html Async Components 异步组件： //toto 不懂怎么用； 与 Suspense 一起使用也不懂；
17. 003/08.htmlTemplate refs 模板引用： 通过 ref 还可以引用页面上的元素或组件。
18. 003/09.html Handling Edge Cases 处理边界情况: $forceUpdate, v-once

004 过渡 & 动画

1. 004/01.html 概述
2. 004/01-2.html 过渡与 Style 绑定: Timing, Easing: //todo 贝塞尔曲线 | GreenSock 现代动画效果: SVG, canvas, webGL,css | 动画曲线示例 | 碰撞检测怎么做的？ | animate.css |
3. 004/02.html Enter & Leave Transitions 进入过渡 & 离开过渡
4. 004/02-2.html GreenSock.com 动画示例
5. 004/02-3.html 纯css3动画: //todo 初始渲染的过渡 appear; 多个元素的过渡 v-if;
6. 004/02-4.html
7. 004/02-5.html 多个组件之间过渡： 元素之间的过渡： mode="out-in" 模式更好
8. 004/03.html List Transitions 列表过渡: transition-group 组件: js 触发特效。
9. 004/03-2.html 列表的移动过渡 (lodash.js)
10. 004/03-3.html 列表的移动过渡 完整版 (lodash.js)
11. 004/03-4.html 列表的交错过渡 ( gsap.js )
12. 004/03-5.html 可复用的过渡 //todo
13. 004/03-6.html 动态过渡 (velocity.js)
14. 004/04.html State Transitions 状态过渡 //todo bug
15. 004/04-2.html 动态状态过渡
16. 004/04-3.html 把过渡放到组件里
17. 004/04-4.html 赋予设计以生命

005 可复用 & 组合 （前置知识：vue-cli 基本的 .vue文件的使用，webpack包的基本使用）

1. 005/hello-vue/ Single File Components 单文件组件: .vue文件模块化实例，一个组件一个文件。

.vue文件的运行
(1). 直接预览
在项目目录 hello-vue/ 文件夹下 $ npm run serve
浏览器访问 http://localhost:8080/

(2). 构建后预览
在项目目录 hello-vue/ 文件夹下 $ npm run build
然后进入新生成的 dist/ 目录下，【win10要使用cmd】 $ http-server -p 12345
浏览器访问 http://localhost:12345/

2. 005/todolist2/ my-book.vue， my-blog.vue 中简介 组合式 API，响应性基础等。
3. 005/01.html 什么是组合式 API？： setup 返回的所有内容都将暴露给组件的其余部分
4. 005/02.html mixin: 更灵活的是 组合式 API，以及插件。
5. 005/03.html 自定义指令: v-focus 钩子函数，动态指令参数，函数简写，对象字面量，在组件中使用
6. 005/04.html Teleport:
7. 005/04-2.html Teleport: 与组件一起使用, 组件内容注入到app之外的dom元素内，实现modal框。
8. 005/05.html 渲染函数: render() 返回的h()函数接收3个参数: tagName, prpps, children; v-on，事件修饰符
9. 005/06.html 插件: use() 方法将插件添加到你的应用程序
10. 005/07.html 响应性计算和侦听：副作用watchEffect() 与清除 stop(); watch;
11. 005/08.html 渲染机制与优化: 虚拟 DOM，低层渲染逻辑。无代码。

如果需要更新列表项，我们可以借助前面提到的响应性在 JavaScript 中进行。我们将更改应用至 JavaScript 副本、虚拟 DOM 中，然后在它们和实际 DOM 之间执行 diff。只有这样，我们才能对已更改的内容进行更新。虚拟 DOM 允许我们对 UI 进行高效的更新！

006 工具

1. 006/01.html 单文件组件, 测试
2. 006/02.html TypeScript 支持

规模化: 路由 vue-router

1. 006/r01.html 简单路由1: 我的理解，有些问题 //todo
2. 006/r02.html 简单路由2: 改编官网例子，单网页可运行。
3. 006/r03.html 官方 路由 模块 vue-router: router-link, router-view,
4. 006/r04.html 官方 路由 模块 vue-router: 带参数的路由，路由name
5. 006/r05.html 官方 路由 模块 vue-router: 命名视图

https://next.router.vuejs.org/zh/guide/essentials/named-views.html //todo
https://next.router.vuejs.org/guide/essentials/named-views.html

6. 006/simple_router using vue-router 插件:

官方路由
https://next.router.vuejs.org/
https://github.com/vuejs/vue-router
https://next.router.vuejs.org/zh/introduction.html

$ npm install vue-router@4

$ vue create simple_router //选择第三项，手工配置；
1) 空格是选择，选择 Router, 回车;
2) 版本选择3.0；
3) Use history mode for router? No.(选yes则server需要做配置)
	Yes,则使用正常的url: xx.com/user/id/3 需要服务器做好配置。
	No, 则使用 hash模式: xx.com#user/id/3 不需要服务器配置就可以使用。
4) 格式: ESLint with error prevention only
5) 什么时候执行 Lint? on save.
6) 配置文件放哪？单独放。
7) 保存该设置吗？是
然后经过1min，项目 simple_router框架就好了。
$ cd simple_router
$ npm run serve
浏览器查看新页面 http://localhost:8080/
多了一个about页面。

7. 006/my-blog/ Vue router 小项目，测试官方的路由

规模化: 状态管理 Vuex

https://next.vuex.vuejs.org/zh/guide/state.html
1. 006/s01.html 状态管理: 类 Flux 状态管理的官方实现
2. 006/s02.html 状态管理: 使用 store 概念( https://facebook.github.io/flux/ )
接下来要用，抓紧学习ES2015语法。

3. 006/s03.html 状态管理 Vuex: 改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
4. 006/s04.html 状态管理 Vuex: getter, 可以认为是 store 的计算属性, Getter 接受 state 作为其第一个参数

Getter 会暴露为 store.getters 对象。//todo 通过方法访问，没看懂

5. 006/s05.html 状态管理 Vuex: getter 辅助函数 mapGetters
https://next.vuex.vuejs.org/zh/guide/mutations.html

6. 006/a01.html服务器端渲染: Nuxt.js