- 博客(37)
- 收藏
- 关注
RSS订阅原创 vue 导航守卫
vue 导航守卫from：从哪来to：到哪里去next是一个函数决定是否放行 ，next（）放行，next（’/login’）拦截到login配置全局前置守卫，在router文件中进行配置所有的路由在被真正访问之前，都会经过全局前置守卫放行了，你才能访问到对应的路由consle.log(to)注意fullPath和path的区别/ 全局前置守卫: 所有的路由在被真正访问之前, 都会先经过全局前置守卫// 只有全局前置守卫放行了, 才能真正的访问到你需要访问的路由// to 到哪去//
2020-11-13 15:49:28
186
原创 vue slot插槽
vue slot插槽插槽: 内容分发, 会把组件的内容分发到 slot 中目的：就是为了能够实现组件定制可以在组件中占位置父传子可以完成组件的定制，但是太局限了，只能配置一些简单的结构比如改改标题和改改文字如果大段的内容需要用户定制，父传子就不好实现了插槽的基本语法你在组件标签内部中写的内容会被分发到你在组件中定义的slot位置，定向分发匿名插槽 默认插槽没有具体分配的内容，都会给到匿名插槽具名插槽在组件中并不是只有一个地方需要定制，也会有多个地方需要定制的情况具名插槽：1.
2020-11-13 14:20:42
136
原创 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
1055
原创 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
3883
1
原创 vue computed计算属性的使用
vue computed计算属性的使用计算属性：要写在computed对象中，属性值为一个函数且必须有返回值，调用计算属性时，和调用data中的属性一样，不要加括号。格式：计算属性名命名：个人习惯process开头，驼峰computed：{计算属性名：function（）{ return 返回值}}反转字符串 {{ desc .split('') .recerse() .join('') }}计算属性的缓存
2020-11-11 15:07:55
510
原创 vue component 组件化开发 和 组件通信
vue component 组件化开发模块化 和 组件化模块化：可以将一个js文件，按照功能拆分成多个js文件，一个js文件一个模块核心点：拆分 封装组件化：可以将页面分成一个个组件，组件有自己的独立的 结构样式行为组件的概念组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在vue中都是组件化开发的，组件化开发就是把一个完整的页面分割成一个一个的小组件。
2020-11-11 13:42:50
317
原创 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
871
原创 如何在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
1824
原创 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
441
原创 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
677
原创 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
736
原创 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
751
原创 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
280
原创 yarn serve 无法启动 解决办法
yarn serve 无法启动 解决办法我是移动了node_modules依赖包，所以启动出现了这个错误遇到这种情况,关闭vscode,把node_modules依赖包删除,重新下载就好
2020-10-27 11:52:00
6502
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
3772
原创 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
676
原创 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
7461
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
3758
原创 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
88
原创 发送请求时，在加密的情况下不需要请求体和不需要加密时的处理
发送请求时，在加密的情况下不需要请求体和不需要加密时的处理不需要请求体getWxDefaultParamWay(){ console.log('开始注册') // let params = { // } // 设置需要加密的字符串 // let encryptData = encodeURIComponent(this.$jse.encryptLong(this.$Base64.encode(JSON.stringify(pa
2020-10-22 10:48:03
315
原创 vue中本地存储返回的token和用户id，并发送请求获取个人信息（携带token）
vue中本地存储返回的token和用户id，并发送请求获取个人信息（携带token）前情：token概要如何查看localStorage根据返回的statuscode跳转规则：先存token再跳转在个人中心页，一跳转到这个页面就要在created中发送请求，存储渲染...
2020-10-21 09:32:26
2788
原创 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
286
原创 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
600
原创 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
175
原创 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
374
原创 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
886
原创 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
1035
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
2332
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
2920
原创 div显示滚动条（类似合同阅读）
div显示滚动条div显示滚动条style属性里面：overflow : visible | auto | hidden | scroll ;visible:不剪切内容也不添加滚动条auto:根据内容生成滚动条hidden:不显示超过对象尺寸的内容，不添加滚动条scroll:总是显示滚动条...
2020-10-10 11:21:52
188
原创 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
587
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
1437
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
697
原创 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
1480
原创 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
581
原创 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
3842
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人