beacon...-优快云博客

原创 vue使用lodash进行函数节流处理

1.npm i lodash 安装lodash插件2.在mian.js中进行配置import { _ } from "lodash";Vue.prototype._ = _;3. 使用节流函数export default {data() { return { }; }, methods: { confirm: _.throttle(function () { //this.dialogVisible = false; this.$post("

2021-02-19 10:18:19 927

原创封装wangEditor富文本编辑器

wangEditor是一个轻量级富文本编辑器，前端常用的富文本编译器还有tinymce，ueditor,wangEditor,kindeditor…1.使用npm下载wangeditornpm i wangeditor2.在components下创建editor.vue文件<template lang="html"> <div style="width:80%;float:left" class="editor"> <div ref="toolbar" c

2021-02-04 13:32:05 390

原创前端项目自动化部署

使用gulp+gulp-ssh实现项目自动化部署1.使用npm安装gulp+gulp-sshnpm i gulp gulp-ssh2.在根目录创建gulpfile.js文件const gulp = require('gulp')const GulpSSH = require('gulp-ssh')// eslint-disable-next-line @typescript-eslint/camelcaseconst APP_ENV = process.env.NODE_ENV;cons

2021-02-04 13:14:47 386

原创 vue计算属性和侦听器

计算属性缓存 vs 方法计算属性的实现<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({ el: '#example', data: { message: 'Hello'

2020-10-23 10:26:48 152

原创 vue-config.js优化

在vue-config.js中对vue项目进行优化const path = require('path') const CompressionPlugin = require("compression-webpack-plugin");const UglifyJsPlugin = require('uglifyjs-webpack-plugin');const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');funct

2020-10-13 14:14:20 1067

原创 element-ui使用cdn引入，按需引入

1.按需引入首先，需要安装element-ui， npm install element-ui --save然后，在main.js文件中按需引入import Vue from 'vue'import { Button, Message, Form, FormItem} from 'element-ui';//由于Message组件并没有install方法供Vue来操作的，是直接返回的，因此按照官方文档单独引入的方法会报错的，需要给 Message 添加 inst

2020-07-13 10:01:09 4815 2

原创 vue配置开发环境和测试环境

构建打包环境在vue.config.js文件中设置代理module.exports = { productionSourceMap:false, outputDir:process.env.NODE_ENV == 'production'?'dist':'test', //构建打包目录 devServer:{ proxy:'http://test.haitao.api.dxanm.com' }}创建.env.test文件NODE_ENV = 'ua

2020-06-18 09:54:54 665

原创输入框input只能输入数字和小数点

输入框input只能输入数字和小数点只允许输入数字(整数：小数点不能输入)允许输入小数(两位小数)<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" >允许输入小数(一位小数)<input type="text" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')" >

2020-06-18 09:29:34 588

转载 React虚拟dom浅析

在Web开发中，需要将数据的变化实时反映到UI上，这时就需要对DOM进行操作，但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因，为此，React引入了虚拟DOM（Virtual DOM）的机制。一、什么是虚拟DOM？在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。虚拟DOM是React的一大亮...

2020-03-18 21:22:53 153

原创浅谈Redux(三)

React-Redux的介绍与使用React-Redux是为了方便使用Redux而封装的一个react库，你可以使用它将组建分为UI组件(只负责渲染页面)，和容器组件(负责管理数据，业务逻辑)。1.ProviderProvider的作用是把store提供给子组件，让其子组件能获取到storeimport React from 'react';import ReactDOM from 'r...

2020-03-15 14:21:22 134

原创浅谈redux(二)

Redux中间件与异步操作Redux的使用方式是用户发出 Action，Reducer 函数算出新的 State，View 重新渲染。但是应该考虑到异步操作怎么执行，Action 发出以后，Reducer 立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。这时就需要使用中间件(middleware)进行异步操作。中间件就是一个函数，对sto...

2020-03-15 13:42:41 174

原创浅谈redux(一)

文章借鉴于：Redux入门教程一.什么是Redux?Redux 是 JavaScript 状态容器，提供可预测化的状态管理。他可以弥补react两个不足之处，代码的结构和组件之间的通信。Redux有三大原则，单一的数据源，state是只读的，使用纯函数来执行修改。二.什么情况下使用Redux？某个组件的状态需要共享一个组件需要改变全局状态一个组件需要改变另一个组件的状态不同身份的用...

2020-02-24 21:26:28 192

原创 React组件的生命周期理解

React组件的生命周期理解React组件的生命周期分为初始化，更新，销毁，错误处理四个阶段，每一个阶段又有若干个函数以响应不同的阶段。生命周期函数图解：初始化阶段的钩子函数在组件初始化阶段会执行1. constructorReact类组件的构造函数在挂载之前被调用。在constructor构造函数中，先调用super(props)，将父组件传来的props绑定，在此函数中可以初始...

2020-02-23 12:11:01 242

weixin_45374484的博客