- 博客(14)
- 收藏
- 关注
原创 vue动态绑定class的几种方式
一.对象方法①最简单的绑定(这里的active加不加单引号也一样都能渲染):class="{ 'active': isActive }" //isActive为布尔值②判断是否绑定一个active:class="{'active':isActive==index}" //与变量或者常量比较均可或者,用三目判断:class="{isActive==index ? 'active' ...
2020-04-10 21:01:44
779
原创 Vue-router小知识点
1. <router-link to=" "></router-link>标签当点击路由的时候,被点击选中的路由标签, 会生成 class= "router-link-exact-active router-link-active "(它是路由path指向当前组件时系统自动生成的)如果用标签跳转时,想改变导航栏按钮的样式, 可以设置 router-link-act...
2020-04-10 17:37:07
315
原创 Vue路由切换后, 页面滚动位置不变BUG处理
问题描述: 在路由a的时候,滚动页面到x的位置,此时直接跳转路由b,会发现b页面竟然页停留在x的位置!图示如下:解决方案①:监听路由直接在app.vue监测路由变化, 让body的滚动距离scrollTop=0/ scrollTo(0,0)export default { watch: { $route: function(to, from) { window.sc...
2020-04-09 17:57:21
1406
2
原创 canvas验证码
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl...
2020-04-09 15:39:03
145
原创 Vue-router路由守卫
实现效果: 查看某个页面时, 要求必须是已登录状态才允许查看如视频 :对武汉页面进行守卫 路由守卫小demo 解决:通过Vue-router路由守卫vue中路由守卫一共有三种: 全局路由守卫,组件内路由守卫,router独享守卫1.路由独享守卫路由独享守卫是在路由配置页...
2020-03-25 21:16:41
387
原创 多个异步任务,顺序执行
项目要求: 服务端需要利用多个sql语句, 查询出多个结果, 要求多个结果一次性返回呐呐呐~ 于是某个傻白甜就开干了…以为, 将 res,send()只写在最后一个 pool.query(..);里, 将数据一起返回给前端即可只能说 ,很傻很天真 ╮(╯▽╰)╭最直观结果就是, 页面刷新, 发现每次不是这里一块空白, 就是那里一块空白,有时干脆啥也没有…反省中… ε=(´ο`*)))...
2020-03-25 16:15:32
1443
原创 单行、多行文本溢出显示省略号
一、单行文本用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。css 代码:p{ width:100px; overflow: hidden; /*超出部分隐藏*/ white-space: nowrap; /*禁止换行*/ text-overflow: ellipsis; /*省略号*/}二、多行文本(1) CSS方...
2020-03-19 16:53:14
1374
原创 vue-router嵌套路由(子路由)
实现效果: 一个页面的一部分根据子路由选择不同而变化, 其他部分保持不变如视频 :视频等待上传解决:通过子路由,也叫路由嵌套实现.具体步骤:一、路由字典(router/index.js)中:引入根组件和子组件, 引入方式完全相同注册根组件, 在根组件中添加children属性 , children:[...], 数组保存多个子路由配置配置子路由:相同: 同根组件一样,需要配置 p...
2020-03-18 22:51:34
1827
原创 Vue之图片路径绑定问题
Vue之图片路径绑定问题问题1:服务端返回的2种路径图片路径区别①服务端返回: /static/images/beian.png (不带域名)②服务端返回:http://sosout.com/static/images/beian.png (全路径,带域名)第一种: /static/images/beian.png优点:1、给他人引用带来了一定的难度,因为他们要手动添加域名。2、...
2020-03-18 13:15:36
1425
原创 防抖与节流
防抖与节流1.防抖需求实现 : 首次操作后, 200s内用户不再操作,则发送请求; 若200s内重复操作,则重新等待200s才发送请求 var timer;//全局变量,初始值undefined //鼠标滚动事件 window.onscroll=function(){ //timer不是空,说明前面有个等待的请求,还未发送,就停止前面的等待 if(timer!==u...
2020-03-02 20:53:37
872
原创 正则之零宽断言
1.什么是零宽断言:零宽断言正如它的名字一样,是一种 零宽度的匹配. 它匹配到的内容不会保存到匹配结果中去, 最终匹配结果只是一个 位置 而已.2.何时使用零宽断言:在使用正则表示式时, 有时, 我们需要捕获的内容前后必须是特定内容, 但又不捕获这些特定内容的时候, 零宽断言就起到作用了3.如何使用零宽断言:零宽断言的作用是 给指定位置添加一个限定条件, 用来规定此位置之前或者之后的字符...
2020-02-29 20:25:29
542
原创 vue 项目刷新页面, 保留当前页面状态
问题 : 在vue项目中,刷新页面之后,之前的登录信息, 打开的所有菜单,都消失, 如何实现刷新之后页面仍然是刷新之前的状态解决 : 使用vuex状态管理, 搭配 , webstorage本地存储. 将vuex里面的数据同步更新到 localStorage/sessionStorage里存储以登录信息为例:每次登录成功, 将用户名存进webstorage(根据具体需求去选择localSt...
2020-02-27 20:24:03
8884
2
原创 localStorage, sessionStorage, cookie简介
1.cookiecookie是由服务器端生成,发送给浏览器,浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器。例如: 首次登陆淘宝网站时, 淘宝web服务器在把网页发给你的同时, 会在我们的电脑里生成一个cookie文件 , cookie会记录我们的 登录信息( eg:有效期内再次登录淘宝,不需要重新输入登录信息 ), 个...
2020-02-27 16:21:26
161
1
原创 Vue组件间传参
Vue组件间传参:3种示例: 组件图示结构如下:一、父给子方法一:props:[…]如何 : 属性下行, 父组件将自己的模型变量保存在自定义属性中绑定给子组件。适用于: 父组件传递的数据,在子组件中,也需要操作时(需要反复使用,计算等)具体步骤:2步1.在父组件中: template里的子组件开始标签中, 添加自定义属性, 让父组件将自己的模型变量保存在, 子组件的自定义属性中...
2020-02-21 16:54:37
249
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人