- 博客(58)
- 问答 (17)
- 收藏
- 关注
RSS订阅原创 vue路由守卫+cookie实现登录时间和鉴权
vue路由守卫+cookie实现页面跳转时验证用户是否登录----（一）cookie篇vue路由守卫+cookie实现页面跳转时验证用户是否登录----（二）设置路由守卫
2021-11-29 14:29:05
814
原创 ts的特性
两个最重要的特性，类型系统、适用于任何规模类型系统分为静态类型和动态类型动态类型是指运行时才会进行类型检查，这种类型检查会在运行时导致报错let foo = 1;foo.split(' ');// Uncaught TypeError: foo.split is not a function// 运行时会报错（foo.split 不是一个函数），造成线上 bug静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误会导致语法错误。ts在运行前需要先编译为js，而编译阶段就会类型检
2021-10-27 10:56:55
1602
原创 v-slot插槽
v-slot的出现是为了代替原有的slot和slot-scope简化了一些复杂的语法。v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。基本用法import Vue from 'vue'// 定义组件componentOne const compoentOne = { template: ` <div :style="style1"> <slot></slot> // 定义插槽 .
2021-08-11 17:02:25
2066
原创 实现倒计时两小时
<view class="count-time"> <view>考试剩余时间：</view> <view><i class="el-icon-time"></i> {{ `${h}: ${m}: ${s}` }}</view></view><view type="primary" @click="countTime">开始答题</view>timer: null,count:
2021-06-24 11:54:01
522
原创 vue获取当前时间
获取当前的时间 //获取当前年月日 addDate(){ const newDate = new Date(); const date = { yy: newDate.getFullYear()<10 ? '0'+new Date().getFullYear() : new Date().getFullYear(), mm: newDate.getMonth() + 1, dd: newDate.getDate()<10 ? '0'+new Date().get.
2021-06-19 12:35:53
117
原创 uniapp点击返回顶部
uniapp点击返回顶部<template> <view class="box"> <!-- 置顶按钮 --> <image src="图片" class="back_yuan" mode="" v-if="back" @tap="backtop"></image> </view></template><script>export default { data() { return .
2021-05-18 11:03:38
665
1
原创 uni-app获取屏幕高度和宽度
uniapp获取屏幕的高度和宽度uni.getSystemInfo({ success:res=>{ console.log(res) }})
2021-05-18 10:42:28
4894
原创 TypeScript
TypesctiptTypeScript 与面向对象面向对象是一种对现实世界理解和抽象的方法。TypeScript 是一种面向对象的编程语言。面向对象主要有两个概念：对象和类。对象：对象是类的一个实例（对象不是找个女朋友），有状态和行为。例如，一条狗是一个对象，它的.状态有：颜色、名字、品种；行为有：摇尾巴、叫、吃等。类：类是一个模板，它描述一类对象的行为和状态。方法：方法是类的操作的实现步骤。...
2021-05-17 18:44:34
61
原创 uni-app的tabbar之间跳转传参
通过一个getApp().globalData来进行tabbar页面之间的传参-------->点击跳转的一方go(item){ let data=JSON.stringify(item) getApp().globalData.data = item; uni.switchTab({ url:'/pages/relationship/relationship' })}-------->接收数据的一方onShow(options) { let a=getApp()..
2021-05-13 18:13:50
634
原创 js给数组添加一个新属性
给数组添加一个对象通过Object.assign()实现let array=[]this.list.forEach((item,index)=>{ array.push( Object.assign({},item,{'show':false}) )})
2021-05-13 17:34:27
710
原创 Git Flow使用方式
Git Flow 的正确使用姿势Git Flow 的概念在使用Git的过程中如果没有清晰流程和规划，否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护。Git版本管理同样需要一个清晰的流程和规范。Vincent Driessen 为了解决这个问题提出了 A Successful Git Branching Model以下是基于Vincent Driessen提出的Git Flow 流程图Git Flow 的常用分支Production 分支也就是我们经常使用的
2021-05-13 13:33:15
267
转载 uni-app的pages中常用的一些配置
pages.json常用的一些页面配置项"pages": [ //pages数组中第一项表示应用启动页 "path" : "pages/mine/mine", "style" : { "app-plus":{ //顶部导航栏消失 "titleNView":false } } }, { "path" : "pages/class/class", "style" : { "ap.
2021-05-13 12:10:03
3099
1
原创 uni-app上拉加载，下拉刷新，真实有效
uniapp实现上拉加载，此代码不需要请求地址即可使用，但愿可以帮到点进来的你第一步：开启加载首先在page.json配置文件中开启{ "path":"pages/collect/Collect", "style": { "navigationBarTitleText": "项目收藏", "enablePullDownRefresh": true //开启加载 }},第二步：定义上拉组件可以在components下的uni-load-more目录中定义一个uni-load
2021-05-12 16:32:41
1975
原创 uni-app组件之间传对象
uni-app组件之间跳转传对象的方法传----- data = JSON.stringify(data) wx.navigateTo({ url: '/pages/subscribe/subscribe?data=' + data, })收----- onLoad: function(data) { data = data.data.replace(/""/g, "");.
2021-05-11 17:54:02
423
原创 uni-app卡片式轮播
uni-app卡片式轮播<template> <uni-swiper-dot :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content"> <swiper class="swiper-box" @change="change" :autoplay="true" :interval="1000"> <swiper-item v-for="(i
2021-05-07 09:51:22
1060
原创 uni-app跨域解决方案
uni-app中的跨域解决方案之一"h5": { "devServer": { "port": 8000, //端口 "disableHostCheck": true, "proxy": { //使用代理 "/api": { "target": "http://地址", //目标地址 "changeOrigin": true, "secure": false, // 设置地址重定向，把程序中/api开头的路径替换成:http.
2021-04-15 11:46:29
311
原创 app实现图片分享
app中图片分享功能图片分享没思路，下面代码带你直接搞定，需要自己修改图片路径哦视图代码部分：<template> <view id="uni-share"> <view class="post"> <view class="wrapper"> <canvas style="width: 100%;height:100%;" canvas-id="firstCanvas"></canvas> <
2021-04-14 14:53:04
393
原创 vue打包前优化
打包优化项目开始时webpack配置 vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。一、 配置 proxy 跨域使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题：module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060,
2021-03-10 19:54:57
321
原创 数组中常用的方法
数组中常用的方法在数组中的最常用到的方法有：push() 可以添加一个或多个参数到数组的尾部，添加之后原来的数组会发生改变，返回的是添加后的数组的长度pop() 从数组尾部删除一个元素，原数组会发生改变，返回数组中被删除的元素unshift() 可以添加一个或多个参数到数组的头部，添加后原来的数组会发生改变，返回的是添加后的数组的长度shift() 从数组头部删除一个元素，原数组会发生改变，返回数组中被删除的元素slice() 从数组中截取，如果不传参，会返回原数组。如果只传
2021-01-22 08:03:31
231
原创 js中常见的DOM操作
一、dom元素获取document.getElementById(id的值) 通过id来获取元素的对象，返回值是一个对象document.getElementsByName() 通过name属性来获取对象的,返回值是一个数组document.getElementsByTagName() 通过标签来获取元素的对象, 返回值是一个数组document.getElementsByClassName() 通过class类名来获取的对象,返回值是一个数组document.querySelector
2021-01-19 16:13:43
392
原创 浏览器兼容性问题
浏览器的一些兼容性解决方案在不同的浏览器中，浏览器的内核都是不相同的，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js引擎所以浏览器的兼容性问题一般是指:css兼容、js兼容一、css兼容性问题1. 不同浏览器的标签默认的margin和padding不同随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大。可以通过设置全局样式来解决这个问题，这样所有的样式都会重置，初始值都会相同了。2.css3新属性，加浏览器前缀兼
2021-01-19 15:27:35
107
原创 两/三栏布局（圣杯双飞翼）
常见页面布局一、两栏布局，左边定宽，右边自适应左边左浮动，右边加overflow:hidden;变成BFC清除左侧浮动元素的影响 #left{ float: left; width: 200px; background: green;}#right{ overflow: hidden; background: red;}二、三栏布局，圣杯布局，双飞翼布局DOM结构<div id="header"></div><
2021-01-18 20:37:02
104
原创 元素居中的方法
如何让一个元素在父元素中上下居中？方法一：给父元素设置成弹性盒子，子元素横向居中，纵向居中.container{ background: pink; height: 200px; width: 200px; border: 1px solid #000000; display: flex; justify-content: center; align-items: center; } .box{
2021-01-18 19:45:17
92
原创 清除浮动
css中清除浮动的几种方式一、为什么要清除浮动？清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的为题1.比如,我给父盒子设置一个boder,内部放两个盒子一个big、一个small，未给big和small设置浮动，则他们会默认撑开父盒子2.如果给这两个盒子都加上了float属性的时候，底部的盒子就会顶上来，因为父盒子没设置高度，变成一条线，big和small已经浮动了小结：当父元素不给高度的时候，内部元素不浮动的时候会撑开，而浮动时父元素会变成一条线，所以这个时候就需要
2021-01-18 19:17:30
128
原创 css布局中的BFC问题
BFC问题了解BFC之前先了解一下边距重叠的问题边距重叠： 两个box如果都设置了边距，那么垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。有两种边距重叠的情况：1.父子关系的边距重叠父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。解决办法是给父元素添加一个 overflow:hidden，这样父元素就变为BFC，不会随子元素产生外边距2.同级兄弟关系的重叠同级元素在垂直方向上外边距会出现重叠现象，最
2021-01-18 12:00:40
227
原创 css和js盒模型
一、盒模型1.什么是盒模型？在HTML页面中，每一个元素都可以看做是一个盒子，而每个盒子都是由：内容区（content）、填充区（padding）、边框区（border），外边界区（margin）四部分组成的。2.盒模型的模式盒模型分为两种模式，分别是标准模式和怪异模式标准模式：一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)怪异模式：一个块的总宽度=width+margin(左右) (即width已经包含了padding和border值)3.标
2021-01-18 11:30:09
131
原创 vue中的项目开发流程
项目开发流程你好，这个后台管理的项目，是我在原来的公司中独立开发完成的，我呢下面给您介绍一个这个项目从0到上线的一个大概流程。首先呢，这个项目主体上是我通过vue-cli3的脚手架和element-ui相结合开发完成的。我是通过vue create 项目名称 安装的脚手架，之后会下载一些项目相关的插件进行配置，例如element-ui,axios等。axios封装在项目中我是先对axios进行的封装，添加请求拦截和响应拦截。在请求拦截中，会给请求头添加token字段，还有loading动画的开启。
2021-01-14 21:55:19
498
原创 vue中自定义组件和路由守卫
自定义组件在vue中开发，都是用的组件化的思想开发的，一般在都会在搭建项目的时候，先建立组件的模板，把架子搭起。也就是在组件中定义好<template>视图层，<script>逻辑层，<style>css样式层。在vue中使用组件封装的方式可以使我们的开发效率提高，能够把页面抽象成相对独立的模块。解决了我们传统项目，开发效率低，难以维护，复用性低等问题。可以通过定义一个用来存放公共组件的文件夹，对不同的需要封装的组件进行封装。例如一些公共的头部导航，底部tabber
2021-01-14 08:11:50
245
原创 vue中自定义指令和自定义过滤器
vue中的自定义指令vue中除了核心功能内置的指令外，也允许注册自定义指令。有的情况下，对普通DOM元素进行底层操作，这时候就会用到自定义指令。自定义指令又分为全局的自定义指令和局部自定义指令。全局自定义指令是通过Vue.directive('第一个参数是指令的名称',{第二个参数是一个对象，这个对象上有钩子函数}) Vue.directive('focus', { inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
2021-01-12 21:55:28
175
原创 vue中常用的一些插件安装
-S 是–save的简写，意为：把插件安装到dependencies（生产环境依赖）中-D是–save-dev的简写，意为：把插件安装到devDependencies（开发环境依赖）中单文件中使用<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>vue脚手架2.0版本以上新建项目：vue webpack 项目名 启动：npm run devvue脚手架3.0版本以上新建项目：vue.
2021-01-11 21:28:55
410
原创 js异步和单线程
一、异步和同步的区别同步：JS是单线程语言，只能同时做一件事儿。js任务需要排队顺序执行，如果一个任务时间过长，后边的任务也会等着。假如，我们在请求一个网址时，图片加载很慢，网页总不能一直卡不出来，这个时候就可以用异步来解决了。异步：异步就是由单线程这个背景而来的，解决了单线程等待的这个问题，异步的特点不会阻塞后面代码的执行。也就是请求处理过程中，你不能闲着，会产生异步的请求，回头再处理，然后继续执行下面的请求异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助二、手写用Pro
2021-01-11 20:33:35
263
1
原创 Vue Virtual Dom 和 Diff算法
Vue Virtual Dom 和 Diff 原理一、虚拟dom想要理解虚拟dom首先要知道什么是虚拟dom？虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。虚拟dom是相对于浏览器所渲染出来的真实dom而言的，在react，vue等技术出现之前，我们要改变页面展示的内容 只能通过遍历查询dom树的方式找到需要修改的dom然后修改样式行为或者结构，来达到更新视图的目的。为什么要用虚拟DOM来描述真实的DOM呢？创建真实DOM成本比
2021-01-08 19:47:26
98
原创 vue双向数据绑定原理
vue双向数据绑定介绍：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过object.defineProperty()，来劫持各个属性的getter和setter，在数据变动时发布消息给订阅者，触发响应的监听回调来渲染视图。这个过程基本上分为四步：第一步： 需要Observer的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter，这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。第二步： 通过Compile解析模板指令，将模板中
2021-01-08 14:33:31
93
空空如也
这个改成vue按住拖动指令要怎么修改呢
2022-01-27
路由守卫出现无限循环的问题怎么解决
2022-01-11
vue中如何实现复制一个对象生成一个新的对象
2021-12-28
这种el-table表中的数据有什么简写的方式吗
2021-12-23
如何将数组中的数据显示出来
2021-12-23
vue项目打包时出现的警告是什么原因导致的呢
2021-12-17
vue路由history模式跳转到新窗口的问题
2021-12-17
最新版本的谷歌浏览器怎么解决cookie的问题
2021-11-29
登录时怎么设置cookie到请求头中呢
2021-11-18
地址中的这个路径怎么隐藏呢
2021-11-17
vue项目中的一个事件中用大量的&&运算，会对项目有什么影响吗
2021-11-15
如何使复选框的不限改为不选
2021-11-13
选中过的框怎么可以禁用
2021-11-12
这种写法有什么好的封装方式吗
2021-11-10
怎么点击不限的时候其他不选，选其他的时候不限为不选，求解
2021-11-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人