vue梳理（2）

-app.vue作为根组件被挂载到index.html文件里，其他的所有组件都是在app.vue组件里做文章。

展示给用户的就是app.vue里的内容，你觉得删的没有内容了但实际还有很多是因为什么呢？因为router-view标签，他显示的是当前路由地址对应的内容（组件），也就是说当前路由对应哪个组件哪个组件显示在router-view这里，被用户看到
如果你给我的是2倍图，那我跟元素字体大小设置为50px，则2倍图上量取的px直接除以100即可。如果你给我1倍图那我设置根元素字体大小100px，如果你给我4倍图那我设置根元素字体大小25px。好处就是量取的px值直接除以100即可转化为rem单位
使用less定义变量

创建一个less文件里面定义一个颜色变量$bgColoer="red"
使用时在某个组件style标签里通过@import ""引入即可使用该变量了

轮播图安装指定版本

npm install [email protected] --save
参数与swiper3一样

swiper代表几个轮播图，循环这个标签会多出几个轮播图
在swiper-slide上面v-for循环，一个swiper-slide标签代表一个轮播图里的一个面一个图片，有几个swiper-slide就有几个img轮播
一个图片也可以是多个icons，就循环吗

轮播图直接这样写，在网速不好时会有抖动感。我们需要给他默认的一个占位来解决
  .wrap{
    width:100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 31.25%;
    /*防止轮播图显示慢页面出现抖动，套一个标签用默认的高度占位。padding-bottom: 31.25%;是根据轮播图高宽比得来的*/
    background: #eee;
  /*  显示慢时，显示默认背景*/
  }
  实现图片的宽高比例自适应
  
  改变轮播图当前图片选中时的分页样式时不生效，是因为全局的类名不在本组件内。如果想让他生效用穿透，如下
  .wrap >>> .swiper-pagination-bullet-active{
    background: #fff;
  }
  

轮播图显示的图片是数据里最后一张图片，是因为swiper的初始化是根据空数组创建的。在swiper标签商加v-if="list.length"即可，当数据存在时创建swiper

因为盒子icons就是防抖动自适应做的，宽度100%，padding-bottom: 50%;相当于往下延伸宽度的50%
- 那里面的子元素width:25%是占父级宽度的25%，padding-bottom: 25%;相当于往下延伸宽度的25%（只看自身即可）正好是个正方形
  - 他里面又有图片和文字图片可以用定位四个方向三个为0，其中一个距离底部预留出距离。用盒子包起来如果图片大可以溢出部分隐藏，水平竖直居中都好做
    - 想让图片距离四个方向点距离我们首先得用box-sizing:border-box将盒子大小固定，再添加padding:0.1rem就不会影响盒子大小了
    - 下面的预留出的内容也要定位
当图标多了可以左右滑动，用轮播图插件包裹。但是高度有问题

.icons >>> .swiper-slide-active{
    height: 0;
    overflow: hidden;
    padding-bottom: 50%;
  }

直接循环数据超出8个的小图标会被隐藏，我们需要借助计算属性计算出一个数组，数组里面有迹象我们相当于图片的页面有几面，第九个在第二个数组，第17个在第三个数组。我们就有三页小图标
缩进，text-indent。flex:1会自动撑开宽度***
加了flex:1后超出宽度的部分没有出现省略号，我们在设置一个min-width:0即可
轮播图组件虽然不能封装成一个组件多次使用，但是可以多次使用他的结构形成多个轮播图也相当于复用了
在页面级组件home页发送axios获取数据，然后把数据分发给下面的组件
在没有后端支持的情况下如何实现数据的模拟呢？在static文件夹下创建mock文件夹，里面创建一个json文件存数据
- 因为整个工程里只有static目录下的内容，可以被外部访问到。例如在地址栏访问localhost:8080/static/mock/index.json即可访问到而我们的数据。其他的文件都访问不了
- 忽略文件中添加这句话static/mock，即可忽略该文件的上传
config下面的index.js文件

proxyTable: {
  "/api":{
    target:"http://localhost:8080",
    pathRewrite:{"^/api":"/static/mock"}
  }
},
//当我们去请求api这个目录的时候希望他帮我们转发到依然是这台服务器的8080端口上，只不过路径做个替换
//一旦你请求的地址是以api开头的，那么我就把他替换成请求/static/mock

轮播图显示的图片是数据里最后一张图片，是因为swiper的初始化是根据空数组创建的。在swiper标签商加v-if="list.length"即可，当数据存在时创建swiper
当你点击城市切换时匹配到的"/city"路由对应的页面会替换之前app.vue页面router-view显示的组件，显示的规律是在最近的router-view显示
元素浮动给父级元素设置溢出隐藏
这个时候你可以上下滚动，是因为你没有设置溢出隐藏，多出的部分会撑出去就可以滚动。这时候我们需要给内容区域最大的盒子定位四个方向都设置为0他会占满整个屏幕区域，如果想预留出部分区域呢比如高度预留出50px，则top:50px即可，overflow:hidden或auto，如果是溢出隐藏则多出的部分看不到只会显示页面区域一点内容。为了让它能够拖动显示所有内容需要使用better-scroll插件

首先要符合使用better-scroll的结构布局，外面有一层(wrap)里面有一层(content)在里面是每个li
第一步，安装插件，引入插件，
第二步，给最外层的wrap盒子增加ref属性为了能在mounted钩子里面拿到该函数
第三步，创建钩子函数，在里面创建滚动的实例并把该实例挂载到组件上，实例接收最外层的ref那个元素
    this.scroll = new BScroll(this.$refs.xxx)

右边的字母用组件，定位到右侧，右边为0，上边留出头的距离，下边0，left不管即可，给个宽度就定位好了
希望点击右侧的字母滚动区域自动滚动到对应的字母区中
- 给右侧组件绑定点击事件(在循环的li上绑定点击事件就给每个li绑定点击事件了)，点击右侧组件的某个字母时可以在方法里接收到该字母(通过事件源来接收，e.target.innerhtml)
- 然后把该字母传递给能滚动的list组件，兄弟组件传值通过父组件中转即可，list组件拿到传递过来的数据后，通过watch函数监听传递过来的这个数据的变化，只要数据变化就会执行该函数，在该函数路面我们要做一件事
- 插件提供给我们一个方法this.scroll.scrollToElement(this.$refs[this.list][0])可以让滚动区域自动滚到某个区域上，参数是兄弟组件传递过来的某个元素，给list组件里的一个盒子动态绑定ref属性，属性值是key(key就是26个字母)。
- 加入传递过来的是s元素，将s元素放到方法里。该元素对应的list组件里的某个元素，就可以跳到对应元素上面了
- 如果ref写在循环的元素拿到的是数组，写在普通元素上拿到的是元素
数组循环和对象循环有点区别，数组循环
- (item,index) in ary “item是索引”
- (item,key) in obj “key是当前项的属性名”
在右侧字母表组件上做上下拖拽的时候list也会跟着跳动到对应字母
希望搜索名字或拼音的时候能把搜索的结果显示在下面。在搜索组件下面加HTML结构，定位在头和搜索组件的下面在最上层全屏显示，覆盖住热门城市，当前城市等部分。也是一出部分影藏且用滑动插件
让input的搜索词与数据做双向绑定，目的是让我们容易拿到input的值。并watch监听input里的数据
- 这里需要做节流，因为只要input值发生变化就执行该函数太耗费性能，用一个定时器将将逻辑包裹起来，100毫秒执行
让该组件拿到所有的数据，当监听到input值有变化时100毫秒值后在所有数据中找到与input值有关系的内容，放到一个数组里，让该数组循环展示到页面上即使我们查找的数据
如果input值为空，直接让数组为空return掉
当输入的值没有匹配数据时，提示没有信息数据
显示搜索内容部分是否显示取决于input有没有值，如果一直显示就把热门城市，当前城市遮住了。所以呢搜索时让它显示，不搜索就不让这部分显示。
点击城市，首页的城市会跟着改变。需要将城市选择页面的城市数据传递给首页，但是两个组件没有共同的父级就不能靠父级来中转，这时候想要他们能通信只能用vuex来解决
多个组件之间需要传值很困难时，如果我们能把这些数据放到一个公共的存储空间去，某一个组件改变了空间里的数据其他的组件就能感知到

vuex

安装，单独创建vuex的文件引入，use，导出。然后再main.js里引入-注册到根组件上
想要使用vuex的数据只要在需要数据的组件内通过this.$store.state.city即可拿到数据，所有组件内都可以拿到vuex的数据。想要修改呢，需要在组件内通过dispatch调用action里的方法，action在调用mutations或者直接通过commit直接调用mutations里的方法改变state的数据都可以
- 这样的话刷新记不住城市，我们在获取state时默认从localstorage里获取城市没有在使用默认的，城市改变了将数据重新存储到localstorage里这样即使刷新也能记住是哪个城市了。
文字长短影响，min-width而不是width
每一次切换组件的时候，组件都会被重新渲染钩子函数都会走发送多次axios。我们想要路由被加载过一次之后就被缓存起来，以后再展示这个组件时用的是缓存
当切换城市时重新发送请求获取对应城市的数据，当用keep-alive时组件里面会多出一组生命周期函数activated当页面重新被显示时执行。我们可以判断之前是哪个城市，现在是哪个城市。如果有变化重新发送axios请求，没有切换城市就不管。mounted函数里保存一下之前是哪个城市，当页面重现被显示时判断城市是否有变化在决定是否发送请求
画廊组件，定位在外层且全屏覆盖。实际上是和详情页一起展示的，只不过画廊定位浮起来占了全屏
想让轮播图的分页器在轮播图下面显示通过调节定位bottom，但是轮播图自带的溢出隐藏部分会让你看不到分液器。设置为overflow:inherit
默认画廊是隐藏的v-if，点击时让其绑定的值变为真显示画廊
画廊轮播图滚动有问题，由隐藏到显示会导致swiper计算宽度出问题，导致轮播图无法正常滚动
- 需要配置两个选项observer:true;observeParents:true,解决swiper宽度计算的问题
- 点击画廊是改变数据隐藏，通过触发父级的自定义方法
页面足够长才能够滚动，添加一个元素设置高度
渐隐渐现效果，定义一个数据默认是true，放滑动超过距离时变为false。v-if通过绑定布尔值决定头部组件的显示与否document.documentElement.scrollTop获取滚动条的垂直偏移距离
因为用了keep-alive组件，只要显示组件都会执行activated函数，给全局window添加scroll事件
元素可以动态绑定样式:希望在某个区间内透明度由0变为1，假设我希望scrollTop越大透明度越接近1，当达到200时透明度为1，在大透明度还是1
给全局的window绑定滑动时间，不管在哪个组件都会触发该事件。所以需要搭配deactivated来使用，该钩子函数当组件即将被替换或隐藏时触发该事件，在这里解绑全局的滚动事件即可。当你在加载该组件又会绑定上。。。
与routes同级添加一项scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } }
- 让页面切换的时候始终回到页面的顶部
一个是自己通过axios设置axios.default.baseurl=""一个是在proxyTable里面做服务器代理，一样的效果

vuex

猜你喜欢