- 博客(78)
- 收藏
- 关注
RSS订阅转载 sessionStrorage保存、获取、清空等一些方法
原文链接：https://blog.csdn.net/Allanwhy/java/article/details/89711496sessionStrorage保存、获取、清空等一些方法1、存值sessionStorage[‘key’]=‘value’;sessionStorage.setItem(‘key’,‘value’);2、取值var v=sessionStorage[‘key’];var f=sessionStorage.getItem(‘key’);3、删除sessionSt
2020-06-16 13:10:57
2906
原创 vue项目中定义全局的时间过滤器
在vue项目中的main.js文件中：Vue.filter('dateFormat', function (originVal) { const dt = new Date(originVal) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '').padStart(2, '0') const hh = (dt.get
2020-06-16 12:10:17
463
转载 Vue进阶（二）：v-preventReClick防止多次点击,重复请求
原文链接:https://www.cnblogs.com/shiblog/p/12119672.html1.添加自定义文件 preventReClick.jsimport Vue from 'vue'const preventReClick = Vue.directive('preventReClick', { inserted: function (el, binding) { el.addEventListener('click', () => {
2020-05-29 11:48:27
9478
2
转载 Vue进阶（一）：v-loading实现加载效果
原文链接:https://blog.csdn.net/sunhuaqiang1/article/details/95474410使用v-loading在接口为请求到数据之前，显示加载中，直到请求到数据后消失。//全局loading<template> <div v-loading="loading"> </div></template>在data 中定义初始化， loading: false，同时在mounted()中将 this.
2020-05-21 18:40:05
17990
转载 基于 Element-UI 二次封装的支持自适应列宽的 table-column 列组件
原文链接:https://www.ctolib.com/legendJaden-AFTableColumn.html#articleHeader1af-table-column简介基于 element-ui 组件库的 el-table-column 组件, 支持自适应列宽功能安装npm install af-table-column使用注意: 需要事先引入 Vue 和 Element-UI 依赖库, 并在 <el-table></el-table> 组
2020-05-21 14:27:28
1187
转载 vue获取url中的参数值,this.$route.query
如果有的参数可传可不传，可以使用？传参例如：http://192.168.1.12:8080/#/detail/?id=123获取的时候：let id = this.$route.query.id一、在vue组件单页面中获取页面参数 watch: { "$route.query": { handler() { if (this.$route.query) { // this.departmentDid 是在
2020-05-21 14:10:37
13014
转载 vue中watch高级用法（handler()和deep和immediately）
转载自:https://blog.csdn.net/wandoumm/article/details/80259908假设有如下代码：<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div> new Vue({ el: '#root',
2020-05-21 13:45:49
2783
1
转载 vue,router-link传参以及参数的使用
1.路径：http://localhost:8081/#/test?name=1<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数)使用：this.$route.query.id2.路径：http://localhost:8081/#/test/1<router-link :to="'/test/'+id">跳转</router-link>(id是
2020-05-21 13:09:51
361
转载 Vue单页应用中Element ui中的el-tree单选功能
原文地址:https://www.jianshu.com/p/548a46c73567git项目地址：https://github.com/heyoju/vueDemo在VUE单页应用项目开发过程树形中有一个需求，需要选中树形控件（可以是点击选中行或者复选框），但是只能选中一个。控件使用的是Element ui中的el-tree，但是找了一下并没有单选组件的API，慢慢琢磨中。1.el-tree组件2.主要是通过两个事件进行联合判断，node-click节点被点击时的回调，c.
2020-05-21 11:53:58
637
转载 Flex 布局教程：语法篇
原文链接:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex; }行内元素也可以使用 Flex 布局。 .box { display: inline-flex; } Webkit 内核的浏览器，
2020-05-19 19:08:39
119
转载 element ui 对话框el-dialog关闭事件,清空填写的数据
原文链接:https://blog.csdn.net/rickiyeat/article/details/76595390通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了<el-dialog title="标题" :visible.sync="bind" size="small" @close='closeDialog'></el-dialog>在标签中加入@close='closeDialog'mothods中加入 //关闭弹框的事件
2020-05-19 18:39:34
9248
转载 element UI 的table默认选中第一行，高亮显示
原文链接:https://blog.csdn.net/weixin_45616483/article/details/102576800要求：默认选中table的第一行，将其高亮显示 <el-table ref="monthlyPlanTable" v-loading="listLoading" :data="tableData" stripe highlight-current-row style="width:
2020-05-19 16:39:29
8110
1
转载 微信小程序中：wx:if 和 hidden的区别
wx:ifvshidden因为wx:if之中的模板也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。同时wx:if也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。相比之下，hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。...
2020-04-30 11:38:50
330
转载 微信小程序中this.$apply()在wepy框架中渲染的问题
method里面的方法是不用这个的，但methods里面只能放bindtap这类方法，所以你自己定义的其他方法，或者写在onshow里面，就必须得用this.$apply()。this.$apply()使用场景： 1.异步更新数据 2.手动刷新DOM...
2020-04-28 09:29:14
1775
原创 continue、break、return的区别
1、continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中continue之后的代码就会少执行一次）。 continue: 继续，继续下次循环，跳过本次循环。2、break 关键字用于立即跳出整个循环（循环结束）。 break：终止。...
2020-04-26 16:51:30
366
原创 vue项目中登录功能 —— 路由导航守卫控制访问权限
如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。// 为路由对象，添加beforeEach 导航守卫// 挂载路由导航守卫,to表示将要访问的路径，from表示从哪里来，next是下一个要做的操作router.beforeEach((to,from,next)=>{ // 如果用户访问的登录页面，直接放行 if(to.path === '/login...
2020-04-25 17:19:21
817
转载 axios拦截器
axios拦截器一、请求拦截器1）请求拦截器的作用是在请求发送前进行一些操作 例如：在每个请求体里加上token，统一做了处理如果以后要改也非常容易二、响应拦截器1）响应拦截器的作用是在接收到响应后进行一些操作 例如：在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页 # 1. 请求拦截器 axios.interceptors.request...
2020-04-25 17:01:48
267
转载 axios 全局配置
axios基于promise用于浏览器和node.js的http客户端 支持浏览器和node.js 支持promise 能拦截请求和响应 自动转换JSON数据 能转换请求和响应数据// 配置请求的基准URL地址axios.defaults.baseURL = 'https://api.example.com';// 配置 超时时间axios.defaults.timeo...
2020-04-25 16:55:36
606
原创 javaScript中的every，some，forEach，map，filter五者的用途
1、every()它地用武之地在哪里呢？不期望它能对原始数组进行修改。它地定位是考察数组地整体特性。也就是考察数组中所有元素的共性。比如所有元素是否都是奇数，或者所有元素是否都是偶数。它关注的是数组整体元素的共性。只要有一个不满足，循环就会结束，接下来的数据就不会继续判断。var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];let bool = numb...
2020-04-21 21:59:57
223
原创 微信小程序navigator跳转不成功的原因
1、要跳转的路径未在app.js里注册过,或者路径写错了2、要跳转的路径位于TabBar中，必须使用wx.switchTab 来跳转界面
2020-04-21 13:22:29
1252
转载 .prettierrc文件常见配置
原文链接：https://blog.csdn.net/onlyliii/article/details/89312857{ // tab缩进大小,默认为2 "tabWidth": 4, // 使用tab缩进，默认false "useTabs": false, // 使用分号, 默认true "semi": false, // 使用单引...
2020-04-21 10:49:01
1742
转载 无法加载文件 ******.ps1，因为在此系统中禁止执行脚本。有关详细信息，请参阅 "get-help about_signing"
无法加载脚本，使用管理员身份运行 PowerShell，然后输入 set-executionpolicy remotesigned得到以下提示： 执行“set-ExecutionPolicy RemoteSigned ”：执行策略更改 执行策略可以防止您执行不信任的脚本。更改执行策略可能会使您面临 about_Execution_Policies 帮助主题中所述的安全风险。...
2020-04-20 21:46:12
1352
转载 :before , :after 伪类选择器（CSS选择器 一）
1、:before 选择器定义和用法1）:before 选择器在被选元素的内容前面插入内容。2）请使用 content 属性来指定要插入的内容。代码示例：在每个 元素前面插入内容，并设置所插入内容的样式：p:before{ content:"台词：-";background-color:yellow;color:red;font-weight:bold;}2、:afte...
2020-04-20 12:34:57
1769
原创 Vuex的使用
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享使用Vuex管理数据的好处：A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护B.能够高效的实现组件之间的数据共享，提高开发效率C...
2020-04-20 12:27:24
106
转载 Vue 打包后报错 Uncaught TypeError: Cannot redefine property: $router
原因：就如报错提示所描述的，不能重新定义router，说明是重复定了router，说明是重复定了router，说明是重复定了router。通常是因为在项目中安装了vue-router的依赖并且用Vue.use()使用了vue-router，还在index.html页面引入了vue-router.js文件。解决方法有两种： 1. 去掉index.html中的vue-router.js文件的引入...
2020-04-19 19:50:57
2315
原创 配置https服务 （vue项目上线优化 九） 了解即可
为什么要启用 HTTPS 服务？传统的 HTTP 协议传输的数据都是明文，不安全 采用 HTTPS 协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全配置https服务一般是后台进行处理，前端开发人员了解即可。首先，需要申请SSL证书，进入https://freessl.cn官网1、申请 SSL 证书（https://freessl.org）① 进...
2020-04-19 18:39:53
1803
原创 开启gzip压缩设置 （Vue项目上线优化 八）
使用 gzip 可以减小文件体积，使传输速度更快。打开vue_shop_server文件夹的终端，// 安装相应包 npm install compression -S打开app.js,编写代码：const express = require('express') // 导入包compressionconst compression = require('c...
2020-04-19 18:24:57
316
原创 通过 node 创建 web 服务器 （Vue项目上线优化 七）
此版块的事情由后端人员设置，前端了解即可通过node创建服务器在vue_shop同级创建一个文件夹vue_shop_server存放node服务器 使用终端打开vue_shop_server文件夹，输入命令 npm init -y 初始化包之后，输入命令 npm i express -S 打开vue_shop目录，复制dist文件夹，粘贴到vue_shop_server中 在vue...
2020-04-19 18:19:00
452
1
原创 路由懒加载 安装 @babel/plugin-syntax-dynamic-import 包 (Vue项目上线优化 六)
当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成 不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。具体需要 3 步：① 安装 @babel/plugin-syntax-dynamic-import 包。打开vue控制台，点击依赖->安装依赖->开发依赖->搜索@babel/plugin-s...
2020-04-19 18:11:55
3958
1
原创 首页内容定制 （Vue项目上线优化 五）
不同的打包环境下，首页内容可能会有所不同。如开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现我们可以通过插件的方式来定制首页内容，打开vue.config.js，编写代码如下：module.exports = { chainWebpack:config=>{ config.when(process...
2020-04-19 18:00:44
378
转载 使用 pm2 管理应用 以windows服务运行
① 在服务器中安装 pm2：npm i pm2 -g ② 启动项目：pm2 start 脚本 --name 自定义名称③ 查看运行项目：pm2 ls④ 重启项目：pm2 restart 自定义名称⑤ 停止项目：pm2 stop 自定义名称 ⑥ 删除项目：pm2 delete 自定义名称示例：pm2 start .\app.js --name web_vuesho...
2020-04-19 17:33:39
2905
转载 通过 externals 加载外部 CDN 资源 （Vue项目上线优化 四）
1.发现项目中存在的问题为了直观地发现项目中存在的问题，我们可以在打包时生成报告。我们可以通过VueCli可视化的UI面板运行bulid直接查看报告。而在报告中我们发现了有这么一个文件，体积比较大，这样可能会造成我们较长时间的请求。2.那么这个文件是怎么来的呢？它的作用是什么？原来，其实默认情况下，项目中我们通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文...
2020-04-19 12:40:57
2931
1
原创 通过 vue.config.js 修改 webpack 的默认配置 （Vue项目上线优化 三）
1、通过 vue.config.js 修改 webpack 的默认配置通过 vue-cli 3.0 工具生成的项目，默认隐藏了所有 webpack 的配置项，目的是为了屏蔽项目的配置过程，让程 序员把工作的重心，放到具体功能和业务逻辑的实现上。如果程序员有修改 webpack 默认配置的需求，可以在项目根目录中，按需创建 vue.config.js 这个配置文件，从 而对项目的打包发...
2020-04-19 11:16:58
3468
1
转载 生成打包报告 （Vue项目上线优化 二）
1、生成打包报告打包时，为了直观的发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：（1）通过命令行参数的形式生成报告// 通过 vue-cli 的命令选项可以生成打包报告// --report 选项可以生成 report.html 以帮助分析报告内容vue-cli-serve build --report（2）通过可视化的UI面板直接查看报告（推荐）在可...
2020-04-19 10:40:54
1272
3
转载 Chrome安装Vue.js devtool 4.1.4_0
1、首先下载Vue.js devtool 4.1.4_0提取密码:r3mp2、再打开Chrome浏览器，地址栏输入：chrome://extensions/3、将刚刚下好的Vue-devtools-4.1.4_0文件拖进扩展程序里面,弹出提示直接点安装（记得打开开发中模式，就在右上角）.4、安装完成后，可以在浏览器的右上角会看到Vue 的官方图标。点击图标，会提示：Vue.js ...
2020-04-18 22:55:12
423
转载 vue-cli -- build时自动清除console.log输出日志（Vue项目上线优化 一）
常用第一种方法一、第一种方法1、安装 babel-plugin-transform-remove-consolenpm install babel-plugin-transform-remove-console --save-dev2、修改 babel.config.js 文件let transformRemoveConsolePlugin = []if (process...
2020-04-18 22:11:42
2009
转载 Lodash中的_.cloneDeep(value) 深拷贝和_.clone(value) 浅拷贝
Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。_.cloneDeep(value)这个方法类似_.clone，除了它会递归拷贝 value。（注：也叫深拷贝）。参数： value (*): 要深拷贝的值。返回： (*): 返回拷贝后的值。...
2020-04-18 16:13:28
16037
转载 ES6新增的padStart()方法和padEnd()方法
padStart() 用于头部补全；padEnd() 用于尾部补全；padStart和padEnd主要用于字符串的补全参数（接收两个参数）：第一个参数，指定字符串的长度。如果当前字符串小于指定的长度，则进行补全；反之，不进行任何操作，返回原字符串。 第二个参数，用于补充的字符串，如果字符串长度过长，则会删除后面的多出的字符串，进行补全。如果不写，默认空格补全。适用场景：格式...
2020-04-17 16:53:53
188
原创 this.$nextTick()的理解
vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新。$nextTick是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。$nextTick方法的作用，就是当页面上元素被重新渲染之后，才会指定回调函数中的代码。...
2020-04-17 15:31:18
267
转载 关于vue组件库element ui中，cascader级联选择器高度的问题
当用级联选择器的时候，发现个问题，选择框的高度过长解决办法：在项目全局css样式中设置：.el-cascader-menu{ height: 300px;}
2020-04-16 19:41:50
2621
8
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人