项目流程：

多区域轮播
多区域列表循环展示
根据不同城市展示不同景点

城市展示，城市搜索
城市右侧字母与左侧城市联动效果

公用画廊组件
渐隐渐现header组件
递归展示列表组件

axios进行数据获取
vue router多页面路由
vuex各个组件之间的数据共享
异步组件让代码上线，性能更优
stylus编写样式
递归组件 调用自己
插件实现轮播效果
公用组件的拆分

js+es6+webpack+npm
vue的官方文档学习

第二章：

MVVM
组件化，全局组件，局部组件（需注册）
父子组件传值

每个组件就是一个vue实例

第三章：

模板语法：插值表达式 v-text v-html 双引号或者两对{{}}中都是js表达式

计算属性 侦听器 方法
如果某个功能以上三个都能实现，优先选用computed，性能最好，有缓存
计算属性的getter与setter
vue中的样式绑定---对象与数组的表示----style/class表示

vue中的条件渲染--模板标签是否显示
v-if dom结构的存在与消失
v-show display的none

v-if与v-else 要紧密连接 才能使用

v-if 的组件复用 可以设置key 唯一元素 就不会复用标签了 diff算法里的原理

vue中的列表渲染 （item，index）of list
vue中操作数组不可以直接通过数组下标操作数组，这样页面不会有相应，只能通过vue提供的七个数组变异方法来实现响应式的效果
push pop unshift splice sort reverse
或者改变引用
直接替换整个数组（替换为新的数组） 也就是给list赋值为一个新的数组 将list的引用指向新的地址

template 占位符 不会真的被渲染到页面上 可以用来包裹元素 避免再次使用div包裹

（item，key，index） of list

如果给vue里data已经存在的对象修改对象属性的属性值，可以实现响应。但如果给对象添加之前没有的属性，不会实现响应。要像上文一样改变引用。

另一个解决办法：
vue中的set方法
Vue.set(obj,name,value)
可以实现响应
另一个写法
vm.$set(obj,name,value)

总结：1.改变引用2.使用变异方法3.vue的set方法

第四章：

使用is属性防止有些标签不能在另一个标签内嵌使用

自定义组件的data必须是个函数，因为组件复用，防止复用后产生冲突，共用数据。使用函数可以让每个子组件有自己的数据。

操作dom结点

this.refs.ref(属性名）是拿到单个节点。可以使用dom的API

如果是在父组件里的模板（子组件。自定义组件）里使用ref属性，在vue的根实例中通过this.$refs.ref(属性名）访问，访问的不是dom节点，而是子组件对象的引用，借此可以访问子组件中data的数据。

总结：直接在html标签上使用ref ，获取的是dom节点。在组件标签上使用ref，获取的是组件实例对象的引用。借此访问子组件的属性。

父子组件属性传递：
父组件向子组件传递数据：
父组件通过属性传递数据 子组件通过props接收数据
子组件向父组件传递数据：
子组件通过emit('父组件模板监听事件名字',携带可选参数)；

组件参数校验与非Props特性

自定义校验器

给组件绑定原生事件

①父组件模板中为自定义事件
②子组件中定义的为原生事件

①的自定义事件需要子组件通过$emit()去触发才会响应

监听----触发

方法二：增加修饰符，表明该事件为原生事件而不是自定义事件，这样就不需要层层传递

非父子组件之间的传值
例如，1-3传值 3-3传值

①vuex
②BUS/总线/发布订阅/观察者模式

匿名函数导致this作用域发生变化，this指向全局作用域，所以事先应该保存this指向。

如何在vue中使用插槽

vue中的作用域插槽
当子组件中循环一组数据，但是如何展示，由父组件来决定。

父组件中使用模板时 最外层使用template包裹 子组件中要传递给父组件的数据通过v-bind：item=“item"
父组件通过slot-scope=”自定义命名“来接收子组件传递过来的数据

动态组件与v-once指令

组件第一次被渲染后，如果使用v-once指令，该组件就会被放入内存里。下次切换的时候直接从内存里拿组件，不用再重新创建。

第五章

vue中的动画原理
使用transition标签包裹元素

给元素增加的样式

在vue中使用amimate.css库
amimate.css是对keyframe的封装
官网下载css库，用link引入
1.必须使用自定义属性名来引用
2.属性中必须包含animated的具体类

在vue中如何同时使用过渡和动画
定义总时长
vue不知道到底是以keyframe时长为准还是以过渡时长为准 需要指定 也可以自定义时长

vue中的js动画与Velocity.js结合
Velocity.js官网下载库
引入js

Velocity.js简化语法

vue中多个元素或组件的过渡
1.通过v-if/v-else mode指定过渡的动画效果 ，先出现，另外一个再隐藏

2.component的is属性切换

vue中的列表过渡

使用transition-group标签包裹

vue动画的封装

第六章 项目开发准备
1.安装node.js 会自动安装npm包管理工具
打开cmd 输入node -v npm -v 检测是否已经安装成功

注册码云（一个云仓库） 代码的版本控制 码云里创建一个项目

2.本地安装git 上官网 安装后 cmd输入git --version 检测是否安装成功
码云里线上git和线下git关联

（windows系统使用git bash 相当于进了linux小型操作系统）

码云里用ssh公钥关联

将码云的代码下载到本地，注意！要选择SSH的来复制路径
cmd切换到要克隆的路径

下一步该在此文件夹中创建vue项目

安装vue-cli，已经安装后就不用再安装，直接init创建新项目

记得看一下webpack（最流行的打包编译工具）的相关内容（私下去补）
记得私下去看git相关内容

切换到要初始化项目的路径
webpack后面接要创建的项目的文件夹

按照指示运行

浏览器中运行

说明项目的整体环境已经配好啦
此时需要将初始化文件和线上同步

先将本地文件增加到git的缓冲区

单文件组件与vue中的路由

运行项目

单页应用以及多页应用

vue是一个单页应用 路由是由前端而不是后端来做。由js感知url改变
搜索引擎只认识html里的内容，不识别js里的
知识点：https://www.jianshu.com/p/4c9c29967dd6

项目代码初始化

通过该设置让用户通过手指操作屏幕放大缩小是无效的。比例始终是1：1
2.reset.css
可以上网搜索该文件，保证在所有浏览器上显示出来的效果是一致的。

3.解决像素边框问题，1像素边框的解决方案
多倍屏
引入border.css文件

引入该库

补充：
git add .将代码保存到缓冲区
git commit -m ‘mesage’把本地缓冲区的代码提交到本地的仓库。-m是留一条信息的意思
此时线上代码没有任何改变
git push 把本地代码推到线上去

第七章 项目开始

私下去了解styless less sass
终端打开项目所在文件夹
安装css的管理包到项目的依赖里

重新启动项目 npm run start

scoped 只对当前组件有效，不会对其他组件产生影响

iconfont的使用和代码优化

私下了解iconfont

将解压后的这四个文件拖入项目的styles中，拖入自建的iconfont文件夹，并把iconfont.css也拖入。

在main.js中引入

如果某个变量项目中会经常引用到，比如背景色很多地方都是相同的，那么就可以创建一个文件，将该变量写入，其他地方要引用的时候直接引用该变量，以后要修改只用修改一处就可以了，维护方便

上面那种写法太麻烦，@表示src路径，另一种写法（前面要加上~）：

修改了webpack配置项后，要重启服务器，否则会报错

首页轮播图

企业级开发中，每开发一个新功能，要创建一个git分支，开发完成后，要合并到master主分支上。
创建一个分支

把线上分支拉到本地

启动项目 npm run start
github上下载 ，创建轮播图

标签中绑定了变量，需要在data中自行声明。以及删除一些不要的标签。

知识点的补充：
(如果是在PC端好办，容器的宽高都写死是多少px，这样即使图片加载不出来容器都不会变型。但是在移动端，由于各机型分辨率相差太大，写死px是绝对不可能的，终究还得靠百分比来实现的)

在css里面，padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度。
比如：父元素宽度是100px, 子元素padding-top:50%，那么padding-top的实际值就是100*50%=50px
这个小小的知识点，其实有很大的用处，应用也很广泛，就是进行提前占位，避免资源加载时候的闪烁，还可以让高度自适应。

一般来说，想要自适应屏幕大小，我们设置元素的宽度自适应是完全没有问题的，比如希望一行显示5个元素，那么我们设置每个元素width:20%就可以了（box-sizing需要为border-box）。
但是高度就比较尴尬了，因为高度都是被内容撑开的，一般不定，那么通过百分比来设置高度，就变得不是很实用。
而且，对于图片等资源来说，加载是需要时间的，即便网页加载速度已经很快了，由于高度被图片撑开的过程，不可避免会出现闪烁，这时候我们的padding-top等就发挥大用处啦。

使用vw ,即当前视口的总宽度window.innerWidth

轮播图对应页码小圆点显示：

传递了参数
填写配置项，传入pagination

样式穿透，wrapper里的该属性可修饰，不受scoped限制。

图标布局

创建分支

略。。。

让图标实现之前轮播的效果

将之前组件的代码拷贝过来
发现组件轮播图可拖拽范围（高度）与只有一个图标高度那么高，

鼠标在靠下方的空白区域时无法拖动。
改变组件高度样式使拖拽范围与整个图标区域高度相同

将一维数组拆分成二维数组

推荐组件开发部分

创建新分支 index-recommend
如何实现底下有一个像素的边框
因为之前已经引入了border.css
所以直接引用里面的css属性即可

问题：flex布局下文字超出省略号代替不起作用
原因：在移动端在flex元素中的内容进行省略文字的操作，则flex失效，flex之外的内容宽度不受控制，图片宽度无法撑起
解决办法：给设置了flex:1;弹性宽度的div设置最小宽度为0可以解决此问题。

周末游组件

模仿上面

ajax获取数据

安装axios

提升性能：在主页上发送ajax请求，将返回的数据传给每个子组件，供子组件使用

页面一挂载就执行该方法
私下去补充axios的知识
axios.get返回一个promise对象

首页父子组件数据传递

在data中先声明要传递的数据，然后在then的回调方法中获取到该数据，并对data中声明的数据赋值。

通过v-bind传递给子组件。

原因：在还没有获取到ajax的数据的时候，轮播图默认渲染的是父组件传递过来的空数组

第八章

城市选择页面路由配置

创建分支city-router

搜索框布局

创建分支city-search
略

列表布局

创建分支 city-list
设置上下边框 直接引用border.css样式

better-scroll的使用以及字母表布局

github上搜索better-scroll，终端在项目路径里安装

需要符合这样的dom结构

城市列表页面的动态数据渲染

遍历对象时 （item，key）注意 是key不是index 数组才是index

兄弟组件间联动

字母表和左侧列表是兄弟组件
希望点击右侧字母表左侧列表随着滚动

可以通过事件对象获取目标对象的文本值
兄弟组件传值 其中一个子组件传给父组件 再由父组件传给另一个子组件

父组件将文本值转发给另一个子组件，通过属性的形式传递

子组件 通过props声明来接收

借助侦听器知道letter的变化
执行某些事情

由于是循环得到的，获取的是一个数组，需要加上索引（这是 vue 的特性, 自动把 v-for 里面的 ref 展开成数组的形式. 假设你的 ref 不是动态的, 而是静态的 ref="a", 那么不管你执行多少次循环, 最后 ref 只会有一个值, 所以 vue 为了处理这种情况会把 v-for 里 ref 转为 数组形式, 为了能捕捉所有的 ref 值.）

需要一个标识位，表示是否处于点击状态

难点 如何知道点击字母表的时候点击的是哪个字母

如果想要根据下标找到对应字母，那么就需要一个数组来存储数组列表

offsetop：obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。

列表切换性能优化

A字母的offsetop的值是固定的，然而每次触发这个方法都会计算一次这个值，

1.在data中声明该变量。
并在update的生命周期钩子里计算该变量值。

当鼠标在字母表上来回移动的时候，touchmove执行的频率非常高，可以通过防抖来限制函数执行的频率。若一段时间内连续触发，只会执行最后一次。

城市搜索功能实现

显示搜索结果内容

通过绝对定位

对cities中spell和name进行匹配

如果没有匹配项

使用vuex实现数据共享

点击该页面城市

首页这里的城市也会相应变化

把公用的数据放到公用的存储空间去存储
如果某个组件改变了某个数据，其他使用到该数据的组件能够感知到。

引入store

在网页中实现页面跳转有两种方式
1.a标签
2.（js形式）window.location.href
在vue中 也是两种方式
1.router-link
2.（js形式）router.push

改变城市后，跳转到首页

vuex的高级使用以及localStorage

之前使用的vuex是有些问题的。如果原先state里存储的是上海，点击切换为三亚后，再刷新下页面，又会变成原来的上海。
这就需要使用localstorge来解决了。localstorage可以实现类似cookies的功能。实现本地存储。

注意，使用localstorage，有些用户可能会关闭了浏览器的localstorage功能，所以代码可能会抛出异常。最好是用trycatch包裹。

简便写法，省去了写this.$store.state.city。mapState作用是将state里的数据映射到computed的属性里。可以映射数组，也可以映射对象。

意思是将state里的city属性映射到computed的currentCity属性。

映射到该组件方法。

module 模块拆分 不同功能模块划分

使用keep-alive优化网页性能

每次路由切换的时候，ajax都会重新被请求发送

将city放入ajax的请求参数里面。
但由于之前配置了keep-alive
ajax只会在第一次加载页面时请求。
当使用了keep-alive是，会多一个生命周期函数activated。
该函数是当页面重新被显示的时候执行。

第九章

详情页动态路由以及banner布局

希望点击故宫的时候可以进入详情页

router-link vue默认会把这个标签变成a标签 字体颜色又默认是蓝色，需要去修改样式，比较麻烦
另一种写法，把li标签直接变成router-link，通过tag属性声明此为li标签

通过冒号表示可以接收一个参数，参数放在id中，路径前面必须是/detail/

公用图片画廊组件拆分

点击后出现可滑动图片，且下面标有页码

考虑到项目中以后很多地方都可能用到这种效果，所以倾向于把他变成一个公用的组件，新建一个common文件夹

为了有滚动效果，还需要使用之前的swiper插件
把之前的代码copy，修改

如何实现分页效果，图片下方有分页提示
去swiper官网查阅API

出现了分页提示，但是位置不太对

图片资源由外部传入
default（默认资源） 必须是一个函数

！！！问题：但此时轮播图滚动显示有问题

实现Header渐隐渐现效果

上下拖动的时候有个过渡效果。
想要页面可以滚动，页面必须足够长，加一个div撑开高度

让滚动高度在大于60小于140的时候开始逐渐显示。当达到1最大值的时候，就一直为1。给data里的style重新赋值。

之前设置了keep-alive ，所以每当页面重新显示都有这个钩子。

对全局事件的解绑

如果只是在标签上注册事件，则只是作用于该标签。但如果是绑定到了全局对象window上面，则对项目中所有组件页面都会有影响。

问题：上节中注册的全局事件在首页中依然在监听，在执行。
在使用keep-alive后，还有另一个钩子函数，在页面关闭/切换时，会执行。可以在这个钩子函数中进行全局事件的解绑。

使用递归组件实现详情页列表，多级标题

父组件传递list给子组件

组件名字的其中一个用处就是进行递归操作

使用Ajax获取动态数据

之前已经定义，将参数存入id这个变量里，所以可以从route里获取id，但是拼接字符串写起来比较麻烦

另一种写法：

由于使用了keep-alive做了缓存。所以mounted只会执行一次。
导致点击其他的图片显示详情时，只有点击第一次会请求ajax数据，之后不会再次请求。之前是使用了actived的钩子。这次使用另外一个方法解决该问题。

滚动问题：
当首页面滚动到下面，然后切换到另一个页面，此时新的页面停留位置是之前的滚动位置，而不是头部位置。
解决方法：

在项目中加入基础动画

在common文件夹中再新建一个文件fade

以插槽形式增加动画

common-gallery会作为插槽形式替代slot
这样画廊显示和隐藏的就会有动画效果了

第十章 项目的联调，测试上线

vue项目的接口联调

当项目进展到前端的布局已经编写完毕，后端的接口也已经写好后，就需要把前端模拟的假数据变成后端返回的真数据，进行调试。称为前后端联调。
之前的配置8080写的是前端的端口：

而后台端口在80端口上。

vue项目的真机测试

windows系统cmd运行ipconfig获得内网地址
在浏览器中输入

显示拒绝连接请求，说明8080端口无法被外界访问。
原因是前端的项目是通过webpack 的 dev server启动的，默认不支持通过ip的形式进行页面的访问。所以需要更改配置项

这样可以通过手机直接通过内网来访问这个网页了
只要让手机和电脑在同一个局域网内就可以了。

vue的打包上线

项目进行接口联调和真机测试后，就开始打包上线
首先在命令行里打开我们的项目目录

这时候vue的脚手架工具会帮助我们把src下的代码进行打包编译，生成一个能被浏览器运行的代码，这个代码是经过压缩后的代码

页面无法正常显示，路径有错误，此时需要打开前端代码修改。
配置默认是：此为bulid 打包配置项

完成后，项目里又会重新生成一个dist目录，将dist目录改名为project，放到后端服务器根目录中，这时再在浏览器中运行，就可以运行成功了

image.png

vue中异步组件的使用

合理使用异步组件，可以提升vue项目的性能

app.js 项目各个页面的逻辑代码
mainfest.js webpack打包生程的配置文件，不用关心
vendor.js 是各个组件的公用代码
在浏览器中通过后端服务器访问首页时，这三个js都会加载

此时如果再切换其他页面，不会再发送请求，因为之前加载首页是已经一次性加载完了。
如果对此性能优化，改成按需加载，
之前代码：import都是写在最前面，先全部导入

课程总结与后续学习指南

把vue官网进阶部分看完
vue-router的文档看完
vuex文档看完
服务器端渲染 ssr seo搜索引擎
vue官网推荐插件深入研究
vue源码研究
babel webpack es6