- 博客(91)
- 问答 (2)
- 收藏
- 关注
RSS订阅原创 react学习笔记_diff算法
一、验证diff算法<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>验证diff算法</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <scri
2021-05-24 21:50:20
195
原创 react学习笔记_生命周期
一、引出生命周期<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>引出生命周期</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <
2021-05-24 21:43:19
347
3
原创 react学习笔记_受控和非受控组件
一、非受控组<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>非受控组件</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <scr
2021-05-24 21:31:53
190
原创 react学习笔记_事件处理
(1).通过onXxx属性指定事件处理函数(注意大小写) a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性 b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效(2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref<!DOCTYPE html><html lang="en">...
2021-05-24 21:27:03
129
原创 react学习笔记_组件实例三大属性
一、state强烈注意组件中render方法中的this为组件实例对象 组件自定义的方法中this为undefined，如何解决？ 强制绑定this: 通过函数对象的bind() 箭头函数 状态数据，不能直接修改或更新1、完整方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>state</title>&
2021-05-24 21:23:57
121
原创 react学习笔记_组件的定义
一、函数式组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>函数式组件</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <sc
2021-05-24 20:36:30
118
原创 gulp常用配置文件，构建前端工作流
gulpfile.js文件引入gulpfile.dev.js和gulpfile.prod.js文件，并调用dev和prod方法，这样对应环境下的各个任务即被创建出来了。var prod = require('./build/gulpfile.prod.js');var dev = require('./build/gulpfile.dev.js');prod();dev();//...
2021-05-24 20:28:56
195
转载 react学习笔记_jsx小练习
一定注意区分：【js语句(代码)】与【js表达式】 1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方 下面这些都是表达式： (1). a (2). a+b ...
2021-05-24 20:28:07
110
原创 react学习笔记_jsx语法规则
jsx语法规则：定义虚拟DOM时，不要写引号 标签中混入JS表达式时要用{} 样式的类名指定不要用class，要用className 内联样式，要用style={{key:value}}的形式去写 只有一个根标签 标签必须闭合 标签首字母 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错 <!DOCTYPE html><html lang=".
2021-05-24 20:26:00
129
原创 react学习笔记_虚拟DOM与真实DOM
关于虚拟DOM： 1.本质是Object类型的对象（一般对象） 2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>虚拟...
2021-05-24 20:22:26
113
原创 node.js配置HTTPS服务、阿里云申请HTTPS证书
前端使用微信小程序，后端使用node.js后端node配置HTTPS证书如下1、在阿里的证书下载页面，直接下载nginx2、下载解压之后会得到两个文件，一个是key，一个是PEM，回到上一步中修改路径即可3、浏览器中访问一下即可4、完整说明：https://segmentfault.com/a/1190000008398220...
2020-07-30 20:58:09
522
原创 vue.config.js
Vue Cli 3生成的项目结构，没有build、config目录，而是使用vue.config.js来进行配置。vue.config.js是一个可选的配置文件，如果项目的 (和package.json同级的) 根目录中存在这个文件，那么它会被@vue/cli-service自动加载。你也可以使用package.json中的vue字段，但是注意这种写法需要你严格遵照 JS...
2020-04-27 17:16:42
169
原创 postcss.config.js
postcss.config.js 作用&配置给postcss用的 postcss 是帮我们后处理css ，css已经编译完成了，在stylus-loader编译成css之后，在通过postcss优化css，通过一系列组件去优化，比如以下，通过autoprefixer 添加css前缀module.exports = { plugins: { autoprefixer:...
2020-04-27 17:12:15
6270
原创 babel.config.js
插件和设置的集合module.exports = { presets: [ '@vue/app' ], // 如果需要按需引入第三方库，在下面添加 plugins:[ [ "import", { "libraryName": "vant", "libraryDi...
2020-04-27 17:04:23
7107
原创 vue项目使用.env文件配置全局环境变量
关于文件名：必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件.env 全局默认配置文件，不论什么环境都会加载合并.env.development 开发环境下的配置文件.env.production 生产环境下的配置文件==========================================================================...
2020-04-27 16:52:26
294
原创 vue 如何根据后台返回来的图片url进行图片下载
downloadByBlob(url, name) { let image = new Image(); image.setAttribute("crossOrigin", "anonymous"); image.src = url; image.onload = () => { let canvas = document.c...
2020-04-26 15:51:42
2714
原创 vue-cli脚手架的.postcssrc文件
添加浏览器私缀（私缀是上世纪90年代浏览器大战的产物，也是现在新型浏览器支持某些新API，而其它浏览器不支持的证明！）// https://github.com/michael-ciniawsky/postcss-load-configmodule.exports = { "plugins": { "postcss-import": {}, "postcss-url"...
2020-04-21 17:22:03
675
原创 vue-cli脚手架的.eslintrc文件
module.exports = { root: true, // 标识当前配置文件为eslint的根配置文件，让其停止在父级目录中继续寻找。 parserOptions: { // 解析器配置项 parser: "babel-eslint" // 代码需要经过babel转化，则对应使用这个解析器 }, env: { browser: true // 浏览器环境...
2020-04-21 17:19:49
545
原创 vue-cli脚手架的.editorconfig文件
描述：编辑器的配置文件以及编码等信息root = true // 让这个文件生效[*] // 对所有文件都生效charset = utf-8 // 编码indent_style = space // 缩进'tabs键',如果习惯用空格可以设为'space'indent_size = 2 // 缩进的尺寸end_of_line = lf // 换行符格式(开发系统差异)inser...
2020-04-21 16:47:01
711
原创 vue-cli脚手架的.babelrc文件
{ // 此项指明，转码的规则 "presets": [ // env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,commonjs这样的模块化文件，不进行转码 ["env", { "modules": false, "targets": { "brows...
2020-04-21 16:40:54
863
原创 vue-cli配置文件——config文件夹
dev.env.js'use strict'// 先引入了webpack-merge这个模块。这个模块的作用是来合并两个配置文件对象并生成一个新的配置文件const merge = require('webpack-merge')const prodEnv = require('./prod.env')// 注明这是开发环境module.exports = merge(prodE...
2020-04-21 16:31:55
514
原创 vue - vue-cli2脚手架搭建build文件夹详解
build.js构建环境下的配置: loading动画 删除创建目标文件夹 webpack编译;输出信息//这是vue-cli脚手架工具的生产环境配置入口 package.json中的"build": "node build/build.js"的直接指向。// js的严格模式'use strict' //检查node+npm的...
2020-04-21 14:50:25
3578
1
原创 vue 获取视频第一帧
findvideocover() { let size = 160 // 获取video节点 const video = document.getElementById("videoPlay"); video.width = size video.height = size video.current...
2020-02-17 14:48:16
6188
原创 vue 上传视频获取时长
let url = URL.createObjectURL(file) let audioElement = new Audio(url); let duration audioElement.addEventListener("loadedmetadata", function (_event) { duration = au...
2020-02-17 14:08:48
2514
原创 vue 批量下载文件---iframe以及其他用法
//批量下载downloadFile(url) { var iframe = document.createElement('iframe') iframe.style.display = 'none' // 防止影响页面 iframe.style.height = 0 // 防止影响页面 iframe.src = url ...
2020-01-09 15:50:55
1297
原创 vscode----eslint 自动化保存失效得问题
beautify与其他得格式化冲突造成在settings.json文件中将editor.formatOnSave 参数设置为false即可
2019-12-28 10:35:54
2110
原创 微信小程序
一、底部导航栏// 找到项目根目录中的配置文件 app.json 加入如下配置信息"tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "white", "list": [ { "selectedIconPath": "image/t...
2019-10-30 15:30:52
105
原创 echarts 圆饼图空心中间加文字
var option = { title: { text: circularGraph.title, //标题文本 left: "center", show: circularGraph.head //是否显示标题组件 }, tooltip: { trigger...
2019-10-21 22:52:36
8384
2
原创 vue element-ui 动态添加表单与删除
<template><span>付款阶段</span> <div class="box"> <el-row> <el-col :span="8" style="padding-left:30px"> <el-button type="prim...
2019-10-14 20:13:41
1661
原创 vue项目前期准备（转载）
本文参考github上的项目抽取出来的，原文地址：https://github.com/bailicangdu/vue2-elm1.配置全局的线上环境和编译环境的切换/** * 配置编译环境和线上环境之间的切换 * * baseUrl: 域名地址 * routerMode: 路由模式 * imgBaseUrl: 图片所在域名地址 * */let baseUrl = ...
2019-10-14 10:38:31
508
1
原创 vue element-ui 弹窗使用遇到的问题
弹窗里定义了表单使用遇到关闭弹窗再次开启时会自动保存上一次的数据而不是重置初始数据的问题，解决代码如下<template> <el-form-item label> <el-button :loading="state" type="primary" @click="onSubmit('ruleForm')">保存</el-b...
2019-10-13 22:12:49
602
原创 vue-element库 使用文字提示框实现任务流程显示
一、效果图二、代码实现①组件代码<template> <div class="progressBar"> <div class="bar"> <div class="schedule" :style="'width:'+length"> <el-tooltip v-...
2019-10-12 13:45:08
789
原创 element
//去除表格hover悬浮效果mounted(){ //去除hover效果 setTimeout(function () { const obj = document.getElementsByClassName("el-table--enable-row-hover")[0]; let clz = obj.getAttribute("class"); clz ...
2019-10-07 22:03:21
132
原创 项目杂记
一、router封装懒加载export const page403 = { path: '/403', name: 'err-403', component: resolve => require(['@/views/page403.vue'], resolve) //懒加载}export const otherRouter = { path: '/home',...
2019-09-29 10:13:18
213
原创 vue路由原理
一、hash模式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
2019-08-29 20:16:07
236
原创 vue 双向绑定演示
一、强行绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
2019-08-29 19:13:58
157
原创 前端代理跨域
一、在package.json同级下创建vue.config.js文件，在此文件中设置代理跨域。二、前端实现代码// vue.config.jsmodule.exports = { devServer: { //代理跨域设置 proxy: { '/api': { target: 'http://127.0.0.1:3003...
2019-08-27 17:57:07
219
原创 layui分页
layui.use(['laypage', 'layer'], function () { var laypage = layui.laypage , layer = layui.layer; laypage.render({ elem: 'demo1'...
2019-08-22 17:49:26
267
空空如也
vscode 自动保存无法生效？
2019-12-19
TA创建的收藏夹 TA关注的收藏夹
TA关注的人