四十二、Vue中使用keep-alive优化网页性能

问题一:   如上图所示,当我们在使用路由在首页和城市列表页之间进行切换时,它会反复访问 index.json(首页数据) 和 city.json(城市列表页数据),而大多数时候,这里的数据都是一样的,不需要反复请求。 解决办法:   使用<keep-alive>将请求...

2019-05-23 16:36:24

阅读数 0

评论数 0

四十一、Vue中localStorage缓存

存: // 防止有的浏览器不支持 try { localStorage.city = city } catch (error) { } 取: try { if (localStorage.city) { defa...

2019-05-23 15:52:51

阅读数 0

评论数 0

四十、Vue中使用定时任务进行节流

一、问题   当用户在与设备进行交互时(比如点击、下滑。。。),同一个方法可能会反复触发,但并不是每次触发都是有意义的,这样只会导致损耗性能,降低用户体验。 二、解决办法   使用定时任务,将当前任务延迟一段时间执行。在此期间若有新的任务,则清除老任务,新任务进入定时器。案例如下: &lt...

2019-05-21 20:54:55

阅读数 30

评论数 0

三十九、Vue中监听器 watch 的使用

一、使用场景   当我们需要监听某个属性时在变化时触发一系列的逻辑,那么就可以利用监听器实现。 二、案例   当父组件接收到子组件传递过来的值时,顺次加1 1.父组件传递数值给子组件 <template> <div> ..... ...

2019-05-15 22:35:40

阅读数 61

评论数 0

三十八、Vue中使用 v-for 遍历 对象(类似于Java的Map)

对象数据如下: "cities": { "A": [{ "id": 56, "spell": "aba", "name": "阿坝&qu...

2019-05-15 21:49:55

阅读数 99

评论数 0

五、Vue中使用滚动插件:better-scroll

1.安装插件 cnpm install better-scroll --save 2.使用 (1)是元素符合规范   要想使用 better-scroll 这个插件,必须保证元素符合下列规则: <div class="wrapper"> &am...

2019-05-15 20:59:55

阅读数 56

评论数 0

七、设置1像素边框的显示颜色

1.引入1像素边框的css文件 border.css @charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, ...

2019-05-15 20:22:34

阅读数 56

评论数 0

六、盒模型:box-sizing

主要用来解决项目布局使用的是自适应的布局方式,div给出的宽度是百分比的形式,即框占窗口宽度的50%,但边界和内边距是用像素来表示的怎么办的问题! 参见 从box-sizing:border-box属性入手,来了解盒模型 ...

2019-05-15 20:06:22

阅读数 53

评论数 0

三十七、Vue中更改vue.config.js配置文件,一定要重启!!

Vue中更改vue.config.js配置文件,一定要重启!!或者配置项更改并不会生效!!!

2019-05-14 20:16:30

阅读数 46

评论数 0

五、当文字过多时,显示省略号

overflow: hidden white-space: nowrap text-overflow: ellipsis

2019-05-13 21:33:29

阅读数 44

评论数 0

四、CSS样式案例集合

·1.两排图标 <template> <div class="icons"> <div class="icon"> &...

2019-05-13 20:48:25

阅读数 28

评论数 0

三、创建宽高比为2:1的区域

// 创建一个宽高比为2:1的区域 .icons { overflow: hidden; height: 0; padding-bottom: 50%; background: green; } 核心就是利用 height: 0; 和 padding-bottom...

2019-05-13 19:55:06

阅读数 28

评论数 0

五、Vue中使用轮播图插件:vue-awesome-swiper

1.安装vue-awesome-swiper2.6.7插件 cnpm install vue-awesome-swiper@2.6.7 --save 2.在main.js中引入 main.js // 引入轮播插件:vue-awesome-swiper import VueAwesomeSwipe...

2019-05-12 22:42:49

阅读数 13

评论数 0

四、Vue中使用 stylus 抽取 CSS 公共变量,并使用

对于 CSS 中一些公共变量,可以处理如下:   第一步:在src/assets/styles目录下新建 variable.styl 文件,这里放置一些公共CSS变量,比如背景颜色:$bgColor = #00bcd4   第二步:引入variable.styl: @import '~styles...

2019-05-12 21:25:59

阅读数 12

评论数 0

三、Vue中设置路径别名

一:问题   在 CSS 或者 JS 中,有时候需要引入其他相关文件,若目录层级比较多,那么路径会相当长,而且重复书写,比较麻烦。为了解决这个问题,我们可以采用为路径设置别名的方式,来简化路径书写。 二:设置别名步骤 下例是使用 vue-cli3.0构建项目,步骤如下: 1.新建 vue.conf...

2019-05-12 21:23:41

阅读数 9

评论数 0

二、Vue中安装使用stylus(写css使用)

1.安装 stylus(写css使用)插件 cnpm install stylus --save cnpm install stylus-loader --save 2.使用案例 使用 stylus 注意事项: 这里我们使用的长度单位是 rem,参照的基准是在上一篇文章中 reset.css...

2019-05-12 21:12:36

阅读数 78

评论数 0

一、Vue移动端项目前准备

1.更改 index.html 的<meta>属性 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scal...

2019-05-12 19:04:06

阅读数 17

评论数 0

三十六、Vue中使用插槽实现动画封装

  在做一个项目过程中,可能会出现多个重复动画,这样反复的使用 <transition> 包裹 DOM 元素实现动画显然是不合理的。为了解决这个问题,我们可以利用 插槽 <slot>传递DOM元素的特点实现动画的封装,多处复用的效果! 1.动...

2019-05-10 20:52:59

阅读数 10

评论数 0

三十五、Vue中的列表过渡动画

<template> <div id="root"> <!-- 关键就是 <transition-group>,这样列表动画就出现了 --> ...

2019-05-10 20:27:53

阅读数 8

评论数 0

三十四、Vue中多个元素或组件的过渡动画

一、Vue中多个元素的过渡 关键点如下: 为每个元素添加 key 属性,避免Vue的复用导致不出现动画 为 <transition> 添加 mode 属性: 3. in-out:先出现元素,再隐藏元素 4. out-in:先隐藏元素,再出现元素 <te...

2019-05-10 20:09:19

阅读数 12

评论数 0

提示
确定要删除当前文章?
取消 删除
关闭
关闭