相对代码知识点，可以对比每次 git 的提交的注释。搭建了一个中小型 vue 项目的基本框架。传送门： https://github.com/carrotlsp/vue-initialize
第一章
1.vue.js是一套构建用户界面 的渐进式JavaScript框架 。
2.文档对象模型（DOM）将 web 页面与到脚本或编程语言连接起来。
第二章
1.面向DOM编程，变成了面向数据编程
2.代码习惯：事件处理命名方式 handleBtnClicked 用handle来命名事件方法
3.v-model：可以实现数据的双向绑定，常用于 input 框内。
4.MVP编程模式，也就是之前jQuery的编程方式M（模型层）V（视图层）P（控制层）；M ⇋ P ⇋ V；这种编程模式，大部分代码都是在 js 里面，而且 js 70%~80% 又是在操作 DOM。
5.mvvm是vue 采用的设计模式：M（模型层）V（视图层） VM（data 绑定和 DOM 监听：主要由 vue 这个框架实现），这种设计模式，让开发着能更专注于业务的编写大大简化繁琐的 DOM 操作。
6.父组件向子组件传值通过:content="item"/> 子组件通过props:["content"]来接收。
7.子组件向父组件传值通过@delete="handleItemDelete"/> 子组件this.$emit('delete');
8.JavaScript 中快速删除数组中指定下表的元素this.list.splice(index, 1)
第三章
1.生命周期函数：就是在 vue 的生命周期中的某个时间点会自动执行的函数。
2.计算属性（写法简单，有缓存机制）优于 监听器（可做缓存机制，写法复杂） 优于 方法（没有缓存机制）
3.计算属性强大好用：掌握计算属性的get和set方法。
4.vue 中的样式绑定主要掌握两种：:class=“{class-one:isActived}” 方式二：:class=“[class-one, class-two]”
5.js 中的等于‘==’ 抽象相等计算符（可能会进行类型转换后再比较）‘===’严格相等计算符（会先比较类型，后比较值）。尽量使用严格相等来判断，减少模糊性。
6.vue 中v-for=“(item, index) in array” 可以取得 index 值。
7.vue 中要实现 data 里面的数组内容变化了，页面也跟着变化的效果。首先，直接改变 list[4]=“aa” 数组下标这种方式是无效的，需要使用数组操作方法来改变数组，有七个变异方法可以让数据和页面同步 push pop splice shift unshift reverse sort。或者直接改变引用。或者用 Vue.set()方法。
8.Vue.set()方法，可以实现 data 里面无论数组还是对象的改变，都和页面产生联动。对于数组 Vue.set(this.list, index, value)对于对象Vue.set(this.obj, key,value)。
9.是一个 Vue 占位标签，可以写代码逻辑，而且不会被渲染到页面上。
第四章
1.为什么 子组件的 data 要是一个 function 呢？因为子组件会被多次调用，而子组件不希望多次调用使用的是同一个 data 的数据，所以用一个 function 来 return 保证各自独立数据存储。而根组件可以 data 是一个对象，因为根组件只会被调用一次。
2.Vue 中有一个单向数据流的概念，父组件向子组件传递的 props ，子组件不允许去直接修改。（假设能直接修改，那么子组件改掉了父组件的值，那就容易造成代码混乱。如果同时向多个子组件传一个值呢？）
3.如何给自定义组绑定原生事件呢？
4.Vue.property.bug = new Vue(); （总线，发布订阅模式，观察者模式）
5.Vue 中的插槽slot（无名插槽只能一个，具名插槽可以多个）。
6.Vue 中的作用域插槽父组件的写法 {{props.item}}子组件的写法 这种模式用于子组件的数据展示模式由父组件决定的情况。
7.Vue 中的动态组件 “type”的值决定了这个组件是啥组件。
8.Vue 中通过 v-once 可以提升一些静态内容来回切换的展示效率。
第五章
1.Vue 中的 css 动画（也叫做过渡动画） transation 会依次给 child 添加 css 样式。第一帧 fade-enter fade-enter-active 第二帧fade-enterfade-enter-to 最后一帧fade-enter-active fade-enter-to 里面的关键原理就是使用css transation 来实现的。
2.掌握用@keyframes写css动画。
3.掌握应用animation.css库来展示动画。
4.动画组合duration type appear-active-class，在5-3详细讲解了这些动画如何组合，有需要重复观看。
5.Vue中的js动画以及velocity.js动画库的使用。
6.Vue中多个元素或者组件的过渡动画怎么实现？注意设置 key
第六章
1.什么是路由？就是根据网址的不同，返回给用户不同的内容。
2.什么是单页面应用？就是首次加载 html 和 比较多的js，接下来由 js 来擦除和渲染其他子页面，不请求 html 页面了。 优点是切换流程， 缺点是首次加载慢 SEO 识别度差。
3.什么是多页面应用？就是每个页面都从服务端请求 html 页面。优点是 SEO 识别度高 并且 首次加载快。缺点是切换页面可能出现卡顿效果。
4.项目初始化要引入的东西？reset.css（用于保证项目在每个浏览器运行效果相同）border.css（用于保证一些二倍三倍屏幕里面1px 能显示真实的1px）fastclick（用于解决一些项目中 click 事件会延迟300ms 的问题。）在 index.html里面让整个程序不能用手势进行缩放。
第七章
1.移动端项目最好使用 rem 作为单位。html{font-size:1px} body{font-size:14rem},这样日后调整整体字的大小非常方便
2.import ‘@/assets/images/xxx.png’ @表示什么，为什么可以这样简写呢？这是因为在webpack.base.conf.js中默认resolve配置了‘@’: resolve(’src’).我们也可以在里面定义自己的快捷目录，来简化代码。但是在css里面@import要变成@import(‘~@/assets/css/xxx.css’)。
3.第三方库 vue-awesome-swiper 一个好用的轮播库，试下怎么样用，还可以做 icons 滑动板块。
4.父组件的有 scoped 控制样式如何穿透控制子组件的样式呢？这在改变第三方库组局的时候十分好用。 .wrapper >>> .swiper-pagination-bullet-active 这样就可以控制.wrapper下所有指定样式都生效。.wrap /deep/ .child-css
5.在哪个函数中进行网络数据请求呢？在 mouted(){} 生命周期方法里面进行。
第八章
1.导航栏高度，导航栏标题色，主题色，等等，这些常用变量，如何统一控制？这时候就是 stylus 的好处了，可以存一个 variable ，然后各个 css 里面去获取。日后改的时候，非常方便。
2.用 betterScroll 制作一个城市选择列表页面，第一了解 betterScroll 的使用，第二了解Vue 中通过this.refs[key] 获取 dom 元素并进行操作的流程 第三 了解@touchStart @touchMove @touchEnd 的使用 https://www.youtube.com/watch?v=xjrfQT2orvM&t=12s
3.update(){}这个生命周期函数会在数据更新以及页面完成渲染之后调用。
4.因为 @touchMove 的执行频率非常高，所以需要进行函数节流 节流使用 this.timer = setTimeout(()=>{执行代码}, 16) 这样能控制代码最快只能16毫秒执行一次。（始终不太理解）
5.学会使用 indexof 来判断字符串里面是否存在 key。在做城市搜索的时候非常好用。
6.-> state -> component -> action -> mutation -> 这是一个循环。如果没有复杂异步逻辑操作，可以直接跳过 action 使用是没问题。
7.使用localStorage的时候要使用 try{ localStorage }catch(e){}
1.vuex的使用要学会拆分 index.js state.js mutation.js action.js getter.js
1.vuex学会使用computed:{ …mapState …mapGetter } method: { …mapMutation …mapAction }来极大简化 state 的操作代码。
8.
9.如上面所述，那是否存在一个问题？我需要刷新数据的咋整呢？这个时候会多出来一个生命周期函数 activated(){} ，懂了吧？
第九章
1.防止图片加载之前没高度和加载完成之后有高度会抖动的好办法，巧妙的设置图片的 class {over-flow:hidden; padding-bottom:100px; height:0px;}
2.如何给内容背景加一个渐变色？background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
3.window.addEventListener(‘scroll’, this.handleScroll)会造成全局污染一般写在 actived(){} ;那怎么办呢？在 deactived 方法中window.removeEventListener(‘scroll’, thie.handleScroll) 进行解绑。
4.递归组件的使用 。 递归展示数据。
5.动态路由的获取办法 this.$route.params.id（详情页开发比较好用）
6.keep-alive 也可以让指定页面不缓存 exclude=“Detail”
7.有时候多个页面都存在滚动的时候，会相互影响，这时候要在 router 里面加 scrollBehavior(){}控制
8.尝试封装一个 fade 渐渐隐藏和显示的动画组件，去包裹其他需要动画的组件。
第十章
1.在 terminal 终端中输入 ifconfig 查看本机在局域网的 ip 地址。
2.webpack 默认不支持从 ip 地址里面去访问其他地址。如果需要的话，在 package.json 的 dev 项里面加入 “webpack-dev-server —host 0.0.0.0” 既可以真机调试了
3.在真机调试里面 AZIndex 手指去滚动会滚动整个页面，功能就出问题了。这时候要 @touchstart.prevent =“”加一个 prevent 修饰词。
4.android 手机可能出现白屏的情况之一 安装 babel-polyfill 这个库
5.异步加载，当我们项目非常大的时候，考虑异步加载组局，不一次性加载结束。 () => import(‘./components/Swiper’)
6.封装 axios 就是把网络层独立出来，统一处理错误代码https://www.mmxiaowu.com/article/589af8cde9be1c5b21ef8e9c
7.两个好用的函数 @click.native 使用原生点击，有时候一些组件添加@click无效的时候。 @touchStart.prevent 阻止事件向父组件传递，截断事件。
想学习该 vue 教程的同学，我留下传送门，码子不易，如果文章对你有帮忙，点个赞呗。