beacon...-CSDN博客

原创 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 906

原创封装wangEditor富文本编辑器

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

2021-02-04 13:32:05 369

原创前端项目自动化部署

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

2021-02-04 13:14:47 367

原创 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 143

原创 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 1058

原创 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 4786 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 642

原创输入框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 575

转载 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 147

原创浅谈Redux(三)

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

2020-03-15 14:21:22 124

原创浅谈redux(二)

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

2020-03-15 13:42:41 168

原创浅谈redux(一)

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

2020-02-24 21:26:28 179

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

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

2020-02-23 12:11:01 227

weixin_45374484的博客