vue2.5 去哪网慕课网从入门到实战

第一章 课程介绍

1. 课程简介 （mvvm什么意思下面有解释）
   基于vue 的框架，nuxt 可以来编写服务器端，weex 可以编写原生的组件
   
   

第二章  vue起步

1. 课程学习方法
   看官方的文档，结合视频教程最好最快的方式
2. hello word
   如果没有el的话，那么在页面上都是显示{{content}}，必须要接管范围，表示接管标签里面的dom
   
   2s 种之后改变内容 下图是以前的写法，还得关心dom层，下下图是vue的操作，我们只需要把精力放在数据之上.。这就是mvvm
   
   
   上图中实例的 外边写的时候就是app.$data.content    如果在实例里面写的话就是this.content 
3. 开发todolist
   
4. mvvm 模式（是m层，v层，VM层） vm 就是下图 中viewModel 层，vue帮我们都处理好了，不用管。
   mvc  之前我们写的代码就是mvc，比如html就是v，v就是ajax从后台 获取的数据层，c就是js频繁的操作dom
   
   
   
5. 前端组件化
   组件就是页面的区域
6. 使用组件改造todolist
   全局组件的使用
   
   局部的组件使用，一定要记得注册
   
7. 简单的组件之间传值
   父向子元素传递用porps
   
   子向父传递用$emit('事件名称'，参数)，   让后父组件的事件和子组件的事件进行关联
   
8. 本章小结

第三章 vue精讲

1. vue实例
   不管是全局组件还是局部组件，其实都会在内部转化为一个实例
   
   
   凡是以$开头的都是vue实例的属性或者是方法
   
   例如属性$data
   例如方法$destroy()   吹毁掉这个实例以后，再去改实例里面的data的内容，页面是不会发生变化的，因为实例已经不再了。
2. vue生命周期（一共11个在api，但是常用8个，在教程vue实例查看）
   https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
   
   8个 分别是：creat ，mount，update，destroy  然后在分别加before 就可以了。
   
   
3. vue 的模板语法
   {{}}  v-text  v-html              里面都是可以写js表达式的
   
4. 计算属性，方法与监听器
5.          计算属性（顾明思怡：属性是计算出来的，一个重要的概念是计算属性是有缓存的，只有计算的内容发生变化时才会执行）

   
   方法：（但是没有缓存的功能，性能不好）
   
   监听器（也有缓存的功能，也就是说当监听属性发生变化的时候才会执行，但是代码太多，推荐计算属性）
   

6. 计算属性的getter和setter
   下图中的value 是这是实例的fullname 属性的时候，设置的值。
   
7. 样式绑定
   对象
   
   数组的方式（里面的是data里面的变量）
   
   style 的方式也是两种对象和数组
   对象
   
   数组
   
8. 条件渲染
   v-if  （操作节点）   v-show （display）  频繁的显示隐藏的话v-show 的性能是更好的。
   
   key 值  
   为什么要加（因为虚拟dom，会有dom diff 的算法，在重新加载dom的时候会尽量渲染页面已经存在的元素，这一个就可能有问题，下图就是当变为了密码但是用户名的内容还在输入框里面，所以加key就是表明是唯一的值）
   
9. 列表渲染
   index 就是 key
   
   注意：通过修改数组的下标并不能使页面发生变化，只能通过下图的7个数组的方法。或者是改变引用（其实就是重新赋值）或者是用set（第一个参数是改变的属性的名称，2是下标，3是值）
   
   
   数组中的某一个元素的修改
   
   
    添加删除排序会对原数组造。成影响 
   
   template 模板占位符相当于angular中的ng-container  循环的时候特别好用，不会作为节点出现在页面中。
   
   也可以对对象进行循环           注意对象在赋值的时候，只能重新全部赋值 ，要改变对象的引用。或者使用set方法（Vue的set() 或者是 实例的$set()）
   
   第一个对象是要改变的对象，二个是对象里面要增加的key，三个是要增加的value
   
   
    
10. set 方法
    可以改变对象或者数组的某个值，不需要重新赋值或者对于数组来说不需要那指定的7个方法，见8set有两种写法
    总的来说  数组3中方法改变某个值，对象2个方法来改变某个值。
     

第四章 深入理解vue组件

 

1. 使用组件的细节点
   
   一、页面显示和dom 的问题   tr 在table 外边
   
   
   起个别名（还有ul,ol，select 等，有父子的标签）
   
   二、子组件在注册使用的时候，data 只能是一个函数，不能使一个对象（因为子组件是多次调用 ，可以让每个子组件都有一个独立函数，而不是公用一个对象）
   
   三、ref 获取组件或者是dom元素的引用
   
2. 父子组件之间的数据传递  
   
   父向子：（单项传递，保存副本）
   1、设置props 注意如果是  :count（就是v-bind：conut）后面""里面是js表达式渲染出来的是数字类型，如果直接count就是字符串类型。
   
   
   注意：在子组件中不要随意的去更改父组件的属性，如下图，虽然页面上实现了，但是控制台发出了警告（因为vue官方不推荐这么写，因为父组件有可能在多个地方使用，默认单项传递，性能也好）解决方法：如下下图
   
   解决方法：给子组件定义一个属性来存储父组件传递过来的属性。
   
   子向父
   
   
   
3. 组件的参数校验和非props 特性
   参数校验
   
   
   
   非props 属性
   props 属性不会出现在dom中，父传子必须得接才可以使用
   非props属性出现在dom中，了解即可。
4. 给组件绑定原生的事件
   必备知识，组件一般都是绑定自定义事件的，如果下图那样是不会执行的
   
   传统解决方法：
   
   最简单的方法：
   
5. 非父子组件之间的传值 
   父子组件指的是爸爸和孩子，其他的都是非父子组件传值
   
   解决方法两种：
   1、vux  在实战中会讲解到
   2、总线机制因为有发射和订阅所以说也叫观察者模式
   父组件
   
   
   子组件
   
6. 在vue 中使用插槽（slot）
7.         插槽的使用非常重要，在很多第三方的插件当中都使用到了，一定要掌握，其实很简单相当于angular中的投影（ng-content），slot节点 和template 一样是不会出现在页面上的。

   
   插槽还可以定义默认值 （当没有插得内容的时候默认内容才会出来）
   
   多个插槽使用（记名插槽）
   

8. 作用域插槽
   圆圈处都是固定写法，slot 里面的item保存在props这个自定义的属性上。slot-scope 卡槽作用域。
   
9. 动态组件与v-once 指令
   动态组件就是conponent ，例如做一个toggle的切换功能，加了once 组件只会渲染一次
   
   

第五章 Vue 中的动画特效

1. Vue动画 - Vue中CSS动画原理
   其原理就是利用不同的类实现不同的效果
   在外围加一个transition ，所以也叫过渡动画，如果不写name类默认就是v-enter
   下图是进入的样式
   
   离开的样式
   
   
2. 在Vue中使用 animate.css 库
   animate.css一个封装好的css库，省的自己写，但是类名是固定的，开头都是animated，所以需要对vue默认的类名进行变化。
   1、引入animate.css
   2、变换默认的类名
   
3. 在Vue中同时使用过渡和动画
   1、初始化的页面动画加apper
   2、同时使用加类就可以了
   3、过渡和动画的时间不一样，以哪个为准可以定义type（以长的为准，或者是定义duration）
   官方文档https://cn.vuejs.org/v2/api/#transition
   
4.  Vue中的 Js 动画与 Velocity.js 的结合
   和animate.css  我们可以自己去手写，但是手写比较麻烦，没有人家写的好，可以引入velocity.js  然后在js 里面进行使用，根据不同的事件的周期来处理不同的函数（无非就是一个节点的插入和移除）
   
   
5. Vue中多个元素或组件的过渡
   多个元素的过渡（一定要加key，除了自己定义样式外，transitoin也有mode来控制）
   
   多个组件
   
   
6. Vue中的列表过渡
   transition-grop    其原理就是把循环的每一个div的外围加了一个transition
   
7. Vue中动画效果的封装。
   推荐如下的封装方式，样式全部都写在了封装的组件里面。其原理就是利用插槽。
   
8. 本章小结
   还有一些复杂的不是常用的，比如说动态动画，或者是状态过渡，自行看文档。

第6章 Vue 项目预热

1.  Vue项目预热 - 环境配置
   1.安装node
   2.npm 安装vue脚手架
   3. 注册码云，下载git，或者是tousetgit
   4.利用脚手架初始化项目
   一般是create ，但是推荐永inite webpack  项目名   我用的vue-cli 3 ，init 没有webpack 这个功能，可以按照下面方式进行安装。
   
   5.提交到码云
2. Vue项目预热 - 项目代码介绍
3. Vue项目预热 - 单文件组件与Vue中的路由
   注意事项：如果对象的key和value的值一样的话，直接写一个可以就可以了。@的话指的是src目录。
   其实是借鉴了angular中路由的概念，router-view 相当于angular中的路由插座。
   配置好之后然后在根实例里面定义。
   
4.  Vue项目预热 - 单页应用VS多页应用
   vue 也是一个单页面应用。如何区分是单页应用，在doc 里面如果切换不同的路由没有新的加载的话就是一个单页面应用。
   
   
   搜索引擎是可以识别html中的内容的，多页应用返回的是html文档，单页页面返回的是js（由前端来感知路由的变化进而来显示不同的页面。），所以不利于seo优化，但是有了服务器端渲染的技术，所以采用单页应用的技术。
   
   
5. Vue项目预热 - 项目代码初始化（开发移动端项目）
   1.meta 的设置（用户不能放大或者缩小）
   
   2、引入rest.css (对不同尺寸的手机进行同样的样式显示)
   3、引入border.css(在移动端1px 边框的问题，比如设置1px 的border 但是在2倍分辨女就是2px)来解决这个问题。
   4、npm 安装fastclick并且引入  来解决300毫秒点击延迟的问题（在移动端，在某些机型上click会有延迟的效果）
   

第7章 项目实战 - 旅游网站首页开发

1. Vue项目首页 - header区域开发
   1.npm 安装 stylus 和 stulus-loader 
   2.采用rem布局，reset.css 里面设置的html 的样式是50rem，一般都是采用的ipone 的双倍分辨率的图片，直接除以100就好了。
   如果不设置作用域的话，对所有的组件都管用。
   
2. Vue项目首页 - iconfont 的使用和代码优化
   1. 在iconfont 下载到本地
   2. 在asset建立iconfont 字体文件夹
   3. 把4个字体文件放到里面
   
   4.再把iconfont.css 文件放到asset文件目录中
   5.改变iconfont.css里面字体图片的目录。
   6.在根vue里面引用
   7.使用
   
   下图的styles 是新加的。下图中的扩展就是我们不写后缀后依次去找的文件类型。
   
   在css 中导入css 用@import ，必须加~，styles 是上图定义好的别名。
   
3. Vue项目首页 - 首页轮播图
   
   rem  因为现在的手机的分辨率比较多，同样的样式，在不同分辨女手机上显示的大小就不一样，说以有了rem
   vm   https://www.jianshu.com/p/35e81bb5c997   屏幕的宽度
   
   
   开发一个新的功能，创建一个新的分支来开发
   在码云上创建一个新的分支，然后在本地pull，就会把这个分支拉下来。然后切换到这份分支。
   安装 
   出现的问题：在轮播图下面在写一个文字的话，如果在轮播图没有出现的请款下（网络比较慢可以设置network online 为3g 模拟比较慢的网速）就会出现当图片加载出来的时候文字往下跑的情况(俗称抖动)，解决方法如下：
   轮播图片的宽高比例是100:31.25 ，下下图的写法也是可以的，但是会有兼容性的问题。
   
   
   
   
   
   第三方组件样式无法修改（因为样式的作用域在本组件）的解决方法：类似angular ng-deep
   
4.  Vue项目首页 - 图标区域页面布局
   作者用的浮动，其实也可以考虑用flexbox布局的方式。
5. Vue项目首页 - 图标区域逻辑实现
   9 个小图标还可以跟轮播图一样进行左右滑动
   其原理是利用计算属性变成一个二维数组 ，然后循环两次拿到
   
   
   可以下载一个vue.js devtools 在谷歌的插件里面来帮助我们进行开发
   
   注意：所有的文本都要考虑到长度，写一个公共的，然后引用
   
   
6.  Vue项目首页 - 热销推荐组件开发
   1px 的使用直接是加类名border-bottom
   如果省略号没有出现，可以加父元素一个min-width：0
7. Vue项目首页 - 开发周末游组件
8.          插槽用的最多的还是在轮播里面 
9. Vue项目首页 - 使用 axios 发送 ajax 请求
   1. 安装
   
   2. static 文件夹是非常重要的，因为我们在浏览器中输入项目的地址+static 是可以访问到static 里面的内容，其他的文件夹就不行，比如src，所以我们自己写的假数据放在static里面。利用axios 来进行访问。
   
   
   3. 不要让自己模拟的假的数据提交到远程仓库。
   4. 配置开发环境的请求地址（如果在正式发布之前手动去改，不推荐）
   
   
10. Vue项目首页 - 首页父子组组件间传值
    轮播默认是最后一个，可以加一个计算属性，如果有length才显示（因为默认的是空数据组，空数组就是最好一个）

第8章 项目实战 - 旅游网站城市列表页面开发

1. Vue项目城市选择页 - 路由配置
2. Vue项目城市选择页 - 搜索框布局
3. Vue项目城市选择页 - 列表布局
   before 在元素之前插入东西
   
4. Vue项目城市选择页 - BetterScroll 的使用和字母表布局
5. Vue项目城市选择页 - 页面的动态数据渲染
6. Vue项目城市选择页 - 兄弟组件数据传递
7. Vue项目城市选择页 - 列表性能优化
8. Vue项目城市选择页 - 搜索逻辑实现
9.  Vue项目城市选择页 - Vuex实现数据共享
10. Vue项目城市选择页 - Vuex的高级使用及localStorage
11. Vue项目城市选择页 - 使用keep-alive优化网页性能

第9章 项目实战 - 旅游网站详情页面开发

1. Vue项目详情页 - 动态路由和banner布局
2. Vue项目详情页 - 公用图片画廊组件拆分
3.  Vue项目详情页 - 实现Header渐隐渐显效果
4.  Vue项目详情页 - 对全局事件的解绑
5. Vue项目详情页 - 使用递归组件实现详情页列表
6. Vue项目详情页 - 动态获取详情页面数据
7. Vue项目详情页 - 在项目中加入基础动画

第10章 实战项目 - 项目的联调，测试与发布上线

1. Vue项目的联调测试上线 - 项目前后端联调
2. Vue项目的联调测试上线 - 真机测试
3.  Vue项目的联调测试上线 - 打包上线
4.  Vue项目的联调测试上线 - 打包上线
5. Vue项目的联调测试上线 - 课程总结与后续学习指南