尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
001 课程简介
Vue3 已经发布了，还有讲 Vue2 的必要吗？
- 目前是 Vue2 到 Vue3 的过渡阶段，而且 Vue2 是一个相当经典的版本，4 年间一共经历了 70 多次的版本更新，实际开发中 Vue2 依然用的很多。
- 从 Vue2 这个经典版本入门，等熟练掌握之后，再去学习 Vue3
- 有了 Vue 的基础想要直接学习 Vue3 ，可以直接跳到后面 Vue3 的相关内容
课程内容
1、vue基础
2、vue-cli
- vue脚手架，专门用于工程化开发
3、vue-router
- 用于在vue当中实现前端路由
4、vuex
- 当应用足够复杂时，可以借助它保管数据
5、element-ui
- ui组件库
6、vue3
002 Vue简介
Vue是什么？
Vue 官网定义：Vue 是一套用于构建用户界面的渐进式 JavaScript 框架
- 构建用户界面：将数据通过某种办法变成用户可以看见的界面（前端开发工程师的职责：在合适的时候发出合适的请求，最后将数据展示到合适的位置）。Vue 并不关心怎么得到数据（发送请求、模拟数据或者是死数据），Vue 只关心在得到数据之后如何将它变成界面
- 渐进式：所谓的渐进式是指 Vue 可以自底向上逐层应用。如果应用比较简单，那么只需要一个轻量小巧的核心库（压缩完之后只有 100kb 左右）；如果是一个比较复杂的应用，则可以引入各式各样的 Vue 插件。
谁开发的？
尤雨溪（Evan You）
Vue的特点
1、采用组件化模式，提高代码复用率、且让代码更好维护
- 在 Vue 中，一个 .vue 文件就是一个组件，它包含了 html 结构、css 样式以及 js 交互
- 提高代码的复用率：只需要引入 .vue 文件，就能够实现和原先相同的功能
- 代码更好维护：组件化的设计使得对某一组件的修改不会影响到其他组件的正常运行（封装）
2、声明式编码，让编码人员无需直接操作 DOM ，提高开发效率
- 命令式编码：按照指定的步骤执行，缺一不可
- 002_尚硅谷Vue技术_Vue简介 P2 - 07:49
3、使用虚拟 DOM +优秀的 Diff 算法，尽量复用 DOM 节点
原生 JavaScript 实现
Vue 实现
- 虚拟 DOM 就是内存中的数据
- 对于新增的数据，Vue 会将新的虚拟 DOM 和旧的虚拟 DOM 进行比较（ Diff 算法），将相同的部分直接进行复用
学习 Vue 之前需要掌握的 JavaScript 基础知识
ES6 语法规范
- 解构赋值、模板字符串、箭头函数
ES6 模块化
- 默认暴露、分别暴露、统一暴露、import 、export
包管理器
- npm、yarn 或者是 cnpm
原型、原型链（重点）
数组常用方法
- 过滤数组、加工数组、筛选最值
axios
promise
……
003 官网使用指南
Vue 团队为了让 Vue 更好使用，写了一些文档，也维护了一些Vue周边的网站，随后将这些文档和网站进行了合理的分类，就形成了上图（ vue2 文档：https://v2.cn.vuejs.org/）所示的官网导航区，熟悉导航区有利于今后查找所需要的内容
学习
其中教程和 API 是所有导航中最重要，也是在学习的过程中使用的比较多的
1、教程
Vue官方入门文档
2、API（https://v2.cn.vuejs.org/v2/api/）
- Vue 的字典：在编写 Vue 的时候遇到不会的方法可以在 API 中进行查询
- 在写案例和做功能的过程中自然而然就记住了，而不是在学习之初从第一个开始一个个往下背）
- 教程中所有的案例和方法调用都遵循 API 中的规范
3、风格指南
- 如何写出更加优雅的代码
- 一开始可以先不用看风格指南中的内容，要想通读风格指南中的内容，必须保证将 Vue 所有的写法都学会
4、示例
- 官方所提供的例子
5、Cookbook
Vue 编码技巧：
- js 的基本功
- 针对 Vue 设计的一些小技巧
6、视频教程
- 和 Vue 官方有合作的视频教程
生态系统
- 其中，帮助和信息只需要了解即可，工具和核心插件中的内容比较重要，但是在最开始学习的时候很少接触
1、工具
Vue CLI：
- 在最开始学习的时候需要在 html 中引入 vue.js，然后再编写 Vue 相关的代码
- 在实际开发的时候需要使用脚手架
2、核心插件
Vue Router
团队
资源列表
1、赞助商
2、合作伙伴
3、主题
Vue 官方提供的样式和结构
- 国内有更加优秀的替代方案，这个使用的不是很多
4、Awesome Vue
Vue 发展到现在有很强大的生态，这里收纳了官方所整理的比较好用的第三方库
- 有很多成型的第三方库
5、浏览和 Vue 相关的包
和 Awesome Vue 差不多，只不过效果更好一点
005 Hello小案例
Vue 模板：
006 分析 Hello 案例
区分 js 表达式和 js 代码：
为什么要将数据交给 Vue 实例进行保管？
Vue 开发者工具
开发版本的 Vue.js 和生产版本的 Vue.min.js 在实际引入的区别是什么？
为什么使用 new 进行 Vue 实例的调用？
007 模板语法
什么时候用插值语法，什么时候用指令语法？
如果 Vue 实例中有两个同名的属性会发生什么？
008 数据绑定
输入类元素都有什么？
009 el 和 data 的两种写法
使用“$mount”指定容器的灵活性体现在哪里？
为什么叫做 mount？
对于 data 的函数式的写法，data 属性的值是一个函数，这个函数是谁调用的？
010 理解 MVVM 模型
MVVM 模型
011 Object.defineProperty
012 理解数据代理
数据代理的定义
数据代理图示
030 key 作用和原理
key 的作用
遍历列表时 key 的作用（index 作为 key）
遍历列表时 key 的作用（id 作为 key）
041 v-html 指令
cookie 的工作原理
----to be continued----
由于笔记不能分P，不方便查阅，剩余笔记会放到 Vue 专栏中
