四十七、Vue路由导航卫视之实例解析

路由导航卫视可以作为所有路由的拦截器,在这里,可以做一些相应的业务处理,比如拦截一些无权限的访问之类! 1.路由导航卫士 /** * 问题:为什么在这里使用“路由导航卫视”? * 原因: * 这个问题的核心就在于“数据请求时机”。 * 可能会有小伙伴说这有何难,登录成功之...

2019-06-06 19:30:20

阅读数 39

评论数 0

四十六、Vue中路由切换时,滚动行为在组件之间相互影响的解决办法

一、问题   当我们在A组件中滚动到页面底部时,再通过路由到B组件,会发现显示的也是B组件的底部,而不是从头部开始显示? 二、原因   组件之间的行为会相互影响。 三、解决办法   在配置路由的地方加上如下代码,例如: router.js import Vue from 'vue' import ...

2019-05-24 23:00:33

阅读数 54

评论数 0

四十五、Vue之递归组件

一、递归组件的实现效果 二、递归组件的实现效果 数据: list: [{ title: '成人票', children: [{ title: '成人三馆联票', ...

2019-05-24 21:55:36

阅读数 34

评论数 0

四十四、Vue中监听滚动事件

// 监听滚动事件 window.addEventListener('scroll', this.handleScroll) //得到距离顶部的滚动距离 const top = document.documentElement.scrollTop

2019-05-24 20:25:45

阅读数 55

评论数 0

四十三、Vue中使用 router-link 导致文字颜色变化的解决方案

案例: <ul> <!-- border-bottom:1像素边框 --> <li class="item border...

2019-05-23 18:07:03

阅读数 211

评论数 0

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

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

2019-05-23 16:36:24

阅读数 31

评论数 0

四十一、Vue中localStorage缓存

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

2019-05-23 15:52:51

阅读数 50

评论数 0

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

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

2019-05-21 20:54:55

阅读数 88

评论数 0

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

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

2019-05-15 22:35:40

阅读数 64

评论数 0

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

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

2019-05-15 21:49:55

阅读数 351

评论数 0

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

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

2019-05-14 20:16:30

阅读数 246

评论数 0

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

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

2019-05-10 20:52:59

阅读数 21

评论数 0

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

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

2019-05-10 20:27:53

阅读数 19

评论数 0

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

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

2019-05-10 20:09:19

阅读数 19

评论数 0

三十三、Vue中JS动画与 Velocity.js 的结合

一、JS动画   JS动画的核心就是在<transition>标签中,利用@before-enter、@enter、@after-enter 和 @before-leave、@leave、@after-leave 实现入场、离场动画! <templat...

2019-05-10 18:54:09

阅读数 16

评论数 0

三十二、在Vue中使用animate.css库

一、CSS3.0方式实现动画 案例:使用css3.0动画实现文字出现、消失时的动画 <template> <div id="slot"> <transition> ...

2019-05-04 22:01:33

阅读数 708

评论数 0

三十一、Vue中CSS动画原理

参见 初识 Vue(22)—(Vue中CSS动画原理)

2019-05-04 21:34:27

阅读数 24

评论数 0

三十、Vue之动态组件与 v-once 指令

一、动态组件 <component :is="type"></component> <script> Vue.component('child-one', { template: '&am...

2019-05-04 20:01:25

阅读数 25

评论数 0

二十九、Vue之插槽

一、适用场景   当子组件需要根据父组件传递的DOM元素来决定显示界面时,待传递的DOM元素就可以放到插槽中传递给子组件。 二、案例演示   下面就是插槽的一种模式:“具名插槽” 父组件: <template> <div id="...

2019-05-04 17:10:53

阅读数 26

评论数 0

二十八、Vue之template占位符

注意:这里的<template>与组件中的<template>不是一个概念,这里的<template>占位符相当于小程序的<block>节点!   当我们需要在遍历循环时,将数据绑定到...

2019-04-29 22:40:33

阅读数 186

评论数 0

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