自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(37)
  • 收藏
  • 关注

原创 vue 中对照片地址的处理

vue 中对照片地址的处理但返回的照片数据是如下,目的是基于服务器的地址去请求的路径axios的身上本身就带有基地址

2020-11-13 16:51:07 365

原创 vue 导航守卫

vue 导航守卫from:从哪来to:到哪里去next是一个函数决定是否放行 ,next()放行,next(’/login’)拦截到login配置全局前置守卫,在router文件中进行配置所有的路由在被真正访问之前,都会经过全局前置守卫放行了,你才能访问到对应的路由consle.log(to)注意fullPath和path的区别/ 全局前置守卫: 所有的路由在被真正访问之前, 都会先经过全局前置守卫// 只有全局前置守卫放行了, 才能真正的访问到你需要访问的路由// to 到哪去//

2020-11-13 15:49:28 228

原创 vue slot插槽

vue slot插槽插槽: 内容分发, 会把组件的内容分发到 slot 中目的:就是为了能够实现组件定制可以在组件中占位置父传子可以完成组件的定制,但是太局限了,只能配置一些简单的结构比如改改标题和改改文字如果大段的内容需要用户定制,父传子就不好实现了插槽的基本语法你在组件标签内部中写的内容会被分发到你在组件中定义的slot位置,定向分发匿名插槽 默认插槽没有具体分配的内容,都会给到匿名插槽具名插槽在组件中并不是只有一个地方需要定制,也会有多个地方需要定制的情况具名插槽:1.

2020-11-13 14:20:42 159

原创 vue axios讲解+优化 请求拦截器 响应拦截器

vue axios 优化 请求拦截器 响应拦截器安装axiosyarn add axios在main.js中引入没用,这是两个独立的模块 ,哪个模块用就在那个模块引入axios 优化一将axios方法挂载到vue的原型上,任何的vue实例都可以访问到在main.js中import axios from 'axios'Vue.prototype.$axios = axios如何调用:this.$axiosaxios 优化二配置基础地址请求地址写死合适吗?上线的时候就不是这个地

2020-11-12 17:32:38 1102

原创 vue promise async-await try-catch axios 讲解

vue promise async-await try-catch 讲解promise异步函数 与 回调函数的说明异步函数: 定时器setTimeout, ajax (异步函数的执行, 不会阻塞主线程代码的执行)回调函数:把一个函数当成参数传递, 将来特定的时机调用, 这个函数就叫回调函数什么时候会用到回调函数, 异步的时候 ajax success errorconsole.log(1)setTimeout(function() { conso

2020-11-12 15:14:13 4047 1

原创 vue computed计算属性的使用

vue computed计算属性的使用计算属性:要写在computed对象中,属性值为一个函数且必须有返回值,调用计算属性时,和调用data中的属性一样,不要加括号。格式:计算属性名命名:个人习惯process开头,驼峰computed:{计算属性名:function(){ return 返回值}}反转字符串 {{ desc .split('') .recerse() .join('') }}计算属性的缓存

2020-11-11 15:07:55 533

原创 vue component 组件化开发 和 组件通信

vue component 组件化开发模块化 和 组件化模块化:可以将一个js文件,按照功能拆分成多个js文件,一个js文件一个模块核心点:拆分 封装组件化:可以将页面分成一个个组件,组件有自己的独立的 结构样式行为组件的概念组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在vue中都是组件化开发的,组件化开发就是把一个完整的页面分割成一个一个的小组件。

2020-11-11 13:42:50 338

原创 vue 的异步dom更新问题 和 响应式数据的说明

vue 的异步dom更新问题 和 响应式数据的说明异步dom更新问题在vue中数据发生了改变,DOM中的数据也会跟着发生改变,但是这个过程是异步的vue的数据发生改变之后,DOM不会立即更新,会等到下一次渲染工作执行的时候才会更新DOM目的:为了提高渲染的性能clickFn () { // 数据变化了, view中的内容也要跟着变 this.msg = '你好啊,vue1' this.msg = '你好啊,vue2' this.msg = '你好啊,vue3'

2020-11-09 17:03:26 927

原创 如何在gitLab配置ssh密钥

SSH密钥允许你的计算机和gitlab之间建立安全连接。1、检查SSH秘钥是否存在。右击git bash打开终端执行命令 :cat ~/.ssh/id_rsa.pub2、若密钥不存在,则生成SSH 密钥 。在git bash上面执行命令: ssh-keygen -t rsa -C “XXX@qq.com”XXX@qq.com是邮箱,随便填。完成后就会在C:\Users\Administrator.ssh下生成两个文件: 私钥 id_rsa. 公钥 id_rsa.pub3、 在GitLab上添

2020-11-05 16:51:07 1866

原创 vue中修改element-UI样式--多选框--表单(在scoped中修改和不在scoped中修改)

vue中修改element-UI 样式(在scoped中修改和不在scoped中修改)不在scoped中修改,会造成样式的全局污染,不建议在scoped中修改,使用deep穿透 修改样式<template> <div class="sure"> <el-checkbox class="surePartOne"></el-checkbox> <el-input class="surePartTwo" v-m

2020-11-03 09:56:15 482

原创 vue watch监听属性的使用

vue实例中watch属性的使用vue实例中提供了一个watch属性,用于监听vue实例中的属性的变化。watch对应了一个对象,键是观察的属性,值是对应的回调函数。基本使用 var vm = new Vue({ el: '#app', data: { money: 100, } watch: { //监听属性中的属性名 就是 我们要监听data中的属性的属性名。 //第一个参数:当前值

2020-11-02 17:34:30 711

原创 vue中对时间的处理 使用moment.js讲解

vue中对时间的处理如何获取现在的时间+new Date()后台返回一个时间格式moment.js使用monent对时间进行处理先下载npm install momentimport moment from 'moment'**fromNow()**方法获取到现在的时间距离在main.js中Vue.filter('timeCalc', function(value) {//处理语言 moment.updateLocale('zh-cn') return mome

2020-11-02 17:09:56 786

原创 vue中实现数据更新的两种方式(监视数据和鼠标离开事件)

vue中实现数据更新的两种方式监视数据和鼠标离开事件<template> <div> demo1:<input v-model="demo1" type="text" /> <br /> demo2:<input v-model="demo2" type="text" /> <br /> demo3:<input v-model="demo3" type="text" /> <br /&

2020-11-02 10:46:26 774

原创 vue中保险条款的固定样式

vue中保险条款的固定样式<template> <div class="all"> <div class="title"> <i class="el-icon-arrow-left" @click="$router.go(-1)"></i> <p class="a">健康告知</p> </div> <div class="partA">

2020-10-30 10:41:13 299

原创 yarn serve 无法启动 解决办法

yarn serve 无法启动 解决办法我是移动了node_modules依赖包,所以启动出现了这个错误遇到这种情况,关闭vscode,把node_modules依赖包删除,重新下载就好

2020-10-27 11:52:00 6615 1

原创 vue中实现公告栏的滚动特效

vue中实现公告栏的滚动特效<template> <div id="demo"> <ul class="list"> <li v-for="(item, index) in ulList" :key="item.id" :class="!index && play ? 'toUp' : ''" > {{ item.msg }} &l

2020-10-26 14:03:14 3891

原创 vue项目中遇到的细节(坑)整理

vue项目中遇到的细节(坑)整理当Ctrl +s 无法格式化的时候原因:多个格式化文件进行冲突解决办法:alt +shift+F 选择标准格式化文件当使用背景图片时,要实现页面适配,一定要给背景图片设置font-size大小background: url(’…/assets/Home/半圆勾.png’);background-size: 15px;当使用element-UI 中的表单组件时,如果要实现页面适配,label-width属性的大小不能是px 需要使用百分比切记:label-wid

2020-10-26 10:02:19 698

原创 vue中使用element-UI 组件Timeline 时间线的使用

vue中使用element-UI 组件Timeline 时间线的使用重点是对时间点的赋值this.activities[0][‘timestamp’]=payFinishTime!!!!!!<template> <div class="all"> <div class="desc"> 付款成功 </div> <div class="show"> <div class="main"&g

2020-10-23 17:37:15 7617 1

原创 vue中实现跳转链接并拼接参数(点击跳转或者判断返回请求数据跳转)

vue中实现跳转链接(点击跳转或者判断返回请求数据跳转) <div @click="toRescue"> 标题:window.location.href跳转到外部链接测试 </div> ...... data() { return { url: 'https://www.baidu.com/', }; }, methods: { toRescue() { wind

2020-10-23 15:27:09 3830

原创 vue keep-alive的使用

vue 切换路由后, 保存原页面 输入框 内容在路由中对需要缓存的路由添加const router = new VueRouter({ routes: [ { path: '/', redirect: '/home' }, { path: '/home', component: Home, keepAlive: true }, { path: '/CInsure', component: CInsure }, ]})export default router给路由

2020-10-22 15:36:37 105

原创 发送请求时,在加密的情况下不需要请求体和不需要加密时的处理

发送请求时,在加密的情况下不需要请求体和不需要加密时的处理不需要请求体getWxDefaultParamWay(){ console.log('开始注册') // let params = { // } // 设置需要加密的字符串 // let encryptData = encodeURIComponent(this.$jse.encryptLong(this.$Base64.encode(JSON.stringify(pa

2020-10-22 10:48:03 350

原创 vue中本地存储返回的token和用户id,并发送请求获取个人信息(携带token)

vue中本地存储返回的token和用户id,并发送请求获取个人信息(携带token)前情:token概要如何查看localStorage根据返回的statuscode跳转规则:先存token再跳转在个人中心页,一跳转到这个页面就要在created中发送请求,存储渲染...

2020-10-21 09:32:26 2889

原创 json-server的使用,配合postman以及axios的基本使用

json-server的使用,配合postmanmock(模拟)假数据利用json-server进行简单的增删改查的自测json-server:零编码起一套增删改查的接口基本步骤:安装 npm i json-server -g准备一个 json 文件 都是双引号{ "todos": [ { "id": 1, "name": "吃饭", "flag": true }, { "name": "跳广场舞",

2020-10-20 16:19:20 305

原创 vue如何利用脚手架配置环境创建PC端的项目

vue如何利用脚手架配置环境创建PC端的项目(步骤详解,文件名介绍,rem配置,css基础样式的导入,git管理项目,安装axios,element-UI,至开始项目敲码)**创建项目在电脑D盘中(看个人)创建vue create demo-222第一步:请选择预调装置manually select features手动选择功能第二步:选择项目需要的功能这边会选择babel,router,css三个,vuex看个人情况第三步:是否需要历史模式这里需要后端配合所以no第四步:选择

2020-10-20 14:41:40 622

原创 vue中获取并解密路由跳转传的值,并根据获取的表单发送请求完成注册

vue中获取并解密路由跳转传的值,并根据获取的表单发送请求完成注册<template> <div> {{this.ruleForm.token}} <br> <button @click="login" > 注册</button> </div></template><script>import {demo} from '../network/home'export default

2020-10-19 17:28:44 199

原创 vue中调用设备底层功能(照相机)获得base64数据并立刻发送请求

vue中调用设备底层功能(照相机)并展示首先在src根目录下创建utils文件夹,复制以下代码,文件名Tools.jsclass Tools { static reduceImgSize = (file, maxWidth = 800, maxHeight = 800) => { return new Promise((reslove, rej) => { let img = new Image(); let canvas = document.creat

2020-10-19 11:53:57 419

原创 vue中使用element-UI ---notice---notification的使用

vue中使用element-UI —notice—notification的使用官网使用的是 <el-button plain @click="open1"> 成功 </el-button>可以换成div,这样使用起来相对方便<template> <div> <div plain @click="open1"> 可自动关闭 </div> </div&

2020-10-16 11:05:19 945

原创 vue-router 路由跳转传值和获取显示 (解密展示)

vue-router 路由跳转传值和获取跳转传值的两种方式通过 path (路径) 进行跳转如果传入对象, 可以在跳转的同时传参, 但是传递的query参数, 会被暴露在地址栏的查询参数中 this.$router.push('/login') 跳转到登录页 this.$router.push({ path: '/login', query: { aa: 11, bb: 22 } })通过 name (

2020-10-14 23:07:42 1091 1

原创 vue 中使用组件 element -ui(layout布局,button,form)

vue 中使用组件 element -ui 对form表单的使用一:完整导入下载 yarn add element-ui二:在main.js中引入import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)

2020-10-14 17:16:11 2412 1

原创 vue中使用数据加密(MD5,RSA混合使用)发送请求并解密

vue中使用数据加密(MD5,RSA混合使用)前提:基础知识加密方式MD5 AES RSA…MD5:不可逆AES:对称加密RSA:非对称加密(两对公私钥)后端提供给你一对公私钥的公钥,用于你发送(对参数进行处理)加密;提供给你另一对公私钥的私钥,用于你对接受的数据进行解密一:首先需要下载三个使用插件 js-md5,encryptlong,js-base64import md5 from 'js-md5'import JsEncrypt from 'encryptlong'encrypt

2020-10-12 15:04:45 3014

原创 div显示滚动条(类似合同阅读)

div显示滚动条div显示滚动条style属性里面:overflow : visible | auto | hidden | scroll ;visible:不剪切内容也不添加滚动条auto:根据内容生成滚动条hidden:不显示超过对象尺寸的内容,不添加滚动条scroll:总是显示滚动条...

2020-10-10 11:21:52 224

原创 vue中使用千分位实现数字动态增加到预定值

vue中使用千分位实现数字动态增加到预定值<template> <div class="number-grow-warp"> <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value" >0</span > </div></template>&l

2020-10-10 09:34:14 662 1

原创 vue中实现锚点定位(简单)

vue中实现路由跳转<template> <div id="app"> <button @click="returnToA">跳转到A</button> <div>a</div> <div>a</div> <div>a</div> <div>a</div> <div>a</div>

2020-10-09 17:24:28 1493 1

原创 Vue实现根据页面滚动距离实现导航栏吸顶效果

Vue实现根据页面滚动距离实现导航栏吸顶效果<template> <div id="app"> <div id="demo"></div> <div id="nav" :class="{ 'fix-nav': navBarFixed }"></div> <!-- 下拉验证是否吸顶 --> <p>1</p> <p>2</p>

2020-10-09 17:15:45 753

原创 vue实现遮罩层的简单使用(配合Element-ui dialog )及小坑

vue实现遮罩层的简单使用(配合Element-ui dialog )实现效果展示<template> <div> <el-button type="text" @click="dialogVisible = true" >点击打开 Dialog</el-button > <el-dialog :visible.sync="dialogVisible" width="80%"> <d

2020-10-09 16:54:27 1559

原创 vue根据页面滚动距离实现类似侧边吸附效果

vue根据页面滚动距离实现类似吸附效果<template> <div class="demo"> <div class="son1"></div> <div class="son2"></div> <div id="video" ref="abc">测试用</div> </div></template><script>export de

2020-10-09 11:58:13 621

原创 vue中实现点击按钮(多个)添加样式并展示对应内容(模块)

在vue中实现点击按钮添加样式类似tab栏切换<template> <div> <!-- 流程角色 --> {{ status }} <div class="role-content"> <div class="role-btn " @click="roleChecked0" :class="role0 == true ? 'active' : ''"

2020-10-09 09:04:52 3950

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

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