- 博客(30)
- 收藏
- 关注
RSS订阅原创 vue 强制组件重新渲染（重置）
数据通过异步操作后，对之前刚加载的数据进行变更后，发现数据不能生效方案一当数据变更后,通过watch监听，先去销毁当前的组件，然后再重现渲染。使用v-if可以解决这个问题<template> <third-comp v-if="reFresh"/></template> <script> export defau...
2019-12-24 11:32:16
525
原创 点击复制url
//定义函数 window.Clipboard = (function (window, document, navigator) { var textArea, copy; //创建文本元素 function createTextArea(text) { textArea = document.createElement(...
2019-08-12 15:47:34
894
原创 iframe利用postMessage通讯
父级iframe1<iframe src="http://192.168.2.124:5500/开发测试/iframe测试/iframe_通讯2.html" id="myIFrame"></iframe><script type="text/javascript"> //监听消息反馈 window.addEventListener('messag...
2019-07-03 15:43:20
469
原创 vue-cli 3.0 config如何创建
根目录创建 vue.config.js,内容为const path = require('path')const debug = process.env.NODE_ENV !== 'production'module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // 根...
2019-05-09 11:24:52
289
原创 Vue与React两个框架的区别和优势对比
Vue和React两个JavaScript框架都是当下比较受欢迎的，他们两者之间的区别有哪些，各自的优缺点是什么，本文将为你呈现。我已经写出了两个几乎一样的web应用，一个是基于Vue，另一个则基于React，可以方便你在看这篇文章的时候查找相关代码。·React sample app Vue sample app简单介绍除非你最近一直不关注前端的发展，不然你肯定听说过由Faceb...
2019-03-09 19:37:07
369
原创 网站的动静分离实践(动静分离)
1. 动静分离的实现思路动静分离是将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。1.1 静态资源部署至CDN上我们的方案是直接将静态资源全...
2019-03-05 18:25:15
1085
原创 从输入URL到页面展示的详细过程
HTTP请求：1.输入网址2.DNS解析3.建立tcp连接4.客户端发送HTPP请求5.服务器处理请求6.服务器响应请求7.浏览器展示HTML8.浏览器发送请求获取其他在HTML中的资源浏览器渲染1.解析html文档，遇到HTML标签时，构建DOM树2.在构建DOM的过程中，如果遇到外联的样式声明或脚本声明，则暂停文档解析，创建新的网络连接，开始下载样式文...
2019-02-28 09:50:52
487
原创 vue 路由器 懒加载(分片打包)
添加babel插件1. 安装插件 npm install -i babel-plugin-syntax-dynamic-import2.在.babelrc"plugins": [ "syntax-dynamic-import" ],3.router文件index.js中const home = () => import("@/pages/public/...
2019-01-29 10:28:12
955
原创 vue设置title
路由配置页router/index.jsroutes: [ { /* （首页）默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } }, { ...
2019-01-22 10:31:59
2041
转载 nodejs更新package.json中的dependencies依赖到最新版本
如果手动去修改dependencies中各个包的版本号，那就太麻烦了，借助npm-check-updates工具可以很方便的将package.json中的依赖包版本号更新为最新版本。1、安装：npm install -g npm-check-updates使用：2、检查package.json中dependencies的最新版本：ncu3、更新dependencies到新版本：...
2018-11-03 10:51:31
1310
转载 基于create-react-app 和 koa2 快速搭建react同构渲染项目总结（react针对seo优化）
原地址https://github.com/yangfan0095/react-koa2-ssr启动npm install客户端运行npm run start服务端运行先执行客户端打包在运行server (个人推荐使用vscode作为服务端开发工具)npm run buildnpm run server前言前段时间做了一个简单的古文网 ，但是项目是使用R...
2018-10-30 15:53:25
1490
原创 Vue、React打包文件放在服务器，浏览器存在缓存问题的解决
因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。解决方法：找到webpack .prod.conf.js 1.定义版本变量： const Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ，也可以自己定义成别的如：1.1 2.修改要生成的js和...
2018-10-30 15:51:06
5689
原创 js中[]、{}、()区别
一、{ } 大括号，表示定义一个对象，大部分情况下要有成对的属性和值，或是函数体{}表示对象、[]表示对象的属性、方法,()如果用在方法名后面，代表调用如：var LangShen = {"Name":"Langshen","AGE":”28”}; 上面声明了一个名为“LangShen”的对象，多个属性或函数用,（逗号）隔开，因为是对象的属性， 所以访问时，应该用.（点）来层层访问：L...
2018-10-22 08:46:53
76394
4
原创 谈一谈创建React Component的几种方式
React中有两种组件：函数组件（Functional Components) 和类组件（Class Components）函数组件import React from "react";import Button from "./Button";let Message =(props)=> { return ( <div> ...
2018-10-13 11:10:38
1298
原创 export ，export default 和 import 区别 以及用法
首先要知道export，import ，export default是什么ES6模块主要有两个功能：export和importexport用于对外输出本模块（一个文件可以理解为一个模块）变量的接口import用于在一个模块中加载另一个含有export接口的模块。也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。这几个都是ES...
2018-09-24 16:51:15
152
原创 如何在react项目中配置less
如何在create-react-app创建的项目下配置less，其实很简单，只是create-react-app创建的项目没有暴露webpack相关配置，所以需要暴露出webpack相关配置，具体操作如下：一、暴露webpack,安装less\less-loader依赖在create-react-app创建的项目下是不支持less的，我们要使用less就需要在相关配置文件中配置。...
2018-09-24 08:29:00
257
原创 js中Object常用方法和属性
继之前js中数组的常用方法之后，Object的常用方法和属性也是很常用的。故，总结之。 一、属性 Object自带一个prototype的属性，即Object.prototype，Object.prototype本身也是一个对象，也会有一些属性和方法。如下： 1、属性 Object.prototype.writable：默认为false Object.prototype.enumerab...
2018-09-02 08:43:31
388
原创 react利用context向下传值简单案例
1.目录结构react-context-demo config node_modules public script src App.js Header.js Title.js index.js2.index.js内容import React from 'react';...
2018-08-20 17:17:12
485
原创 React-router使用实例
1.目录结构React-router node_modules public src page About.js Home.js Topic.js Topics.js App.js index.js package-l...
2018-08-19 18:49:57
1571
原创 react中ref的两种使用方法
ref一共有两种使用方式回调函数形式（官方推荐） string形式第一种 回调函数形式回调函数形式一共有三种触发方式组件渲染后 组件卸载后 ref改变后import React,{Component} from 'react'export default class UserAdd extends Component{ constructor(){ ...
2018-08-16 22:33:37
6348
原创 es5中数组新增方法使用说明
前言最近研究zepto源码的时候发现一些非常好用的数组方法，这些就是es5新增的数组方法，而w3c这些网站并没有这些方法介绍，可能是太久没更新维护了。总结了一下，给这些方法分了类，大体如下： 5个迭代方法：forEach()、map()、filter()、some()、every()； 2个索引方法：indexOf() 和 lastIndexOf()； 2个归并方法：reduce()、r...
2018-08-13 05:43:11
155
原创 react组件间的数据传递
父子组件父->子：通过props将数据传递给子组件子->父父组件通过props讲一个callback传给子组件，子组件内调用这个callback即可改变父组件的数据兄弟组件维护在父组件中将数据维护在两个组件的父组件或祖先组件中通过props传递数据或者callback 但当组件层次较深的时候一层一层地传递数据太过繁琐这个图笑死了……全局事件...
2018-08-12 13:03:38
439
原创 js中我最常用的几种遍历处理数据的方法梳理
forEach，Object.keys，map，for in ，for of，reduce，every1，forEach 用于遍历【数组】data.forEach(( item, index ) => { console.log('元素：', item ,'；下标：', index)}) 2, Object.keys() 和 forEach() 结合遍历【对象】O...
2018-08-10 18:23:10
1785
原创 ES6模块的import和export用法总结
ES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案...
2018-08-04 14:58:25
235
原创 JS中的块级作用域，var、let、const三者的区别
首先，ECMAScript和JavaScript关系： ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为：ECMAScript是JavaScript的语言规范，JavaScript是ECMAScript的实现和扩展。1. 块作用域{ }JS中作用域有：全局作用域、函数作用域。没有块作用域的概...
2018-08-04 14:54:20
189
原创 JavaScript (a ==1 && a== 2 && a==3) 有可能是 true 吗？
一个有趣的问题：在 JavaScript 中， (a ==1 && a== 2 && a==3) 是否有可能为 true ？这是一道我被某科技公司问到的面试题。发生在两周之前，我仍然在努力寻找答案。我知道我们从来不会在日常工作中写出这样的代码，但我对问题的答案仍然十分很好奇。解法一：利用松散相等运算符 == 的工作原理，你可以简单地创建一个...
2018-07-31 16:28:15
1039
原创 es6实用新特性项目运用及用法体会
1、变量声明let、constlet issueLogItemDefaultProps = { deltails: [], claimReason: -1, fileClaim: -1, modifyStatus: false};const aa="33";const定义的变量不可以修改，而且必须初始化var定义的变量可以修改，如果不初始化会输出undefine...
2018-07-09 13:48:09
289
原创 前端代码如何模块化
为何要模块化？1、方便自己查阅、修改代码代码；2、少让接盘侠骂html代码该如何模块化？1、给body加class="p-index", p代码page，index代表index.html页面。对于页面需要嵌入php、java、.net环境中，路由往往是有后台控制。经常与命名名称不一样。如果给body加一个class，轻松找到该路径对应下的页面。2、具有某一个功能性的代码，可以用特殊标签包着。se...
2018-07-02 16:29:30
2097
原创 邮件该如何发送html代码
1.html嵌入到第三方邮件系统中，很多h5标签、css3不支持。布局采用table+css。tabel表兼容性最好。css才用行内 可进行 tabel中嵌套div。例如：<table width="600" border="0" cellspacing="0" cellpadding="0" style="font-family:'微软雅黑',Helvetica,Arial,sans...
2018-06-27 11:29:24
7742
原创 Web端的邮件内容HTML格式规范总结
一、页面要求1） 统一使用标准的页头和页尾2）统一使用gb2312编码格式3）页面显示宽度400px-800px，高度一般控制在一屏以内。4）页面不向出现js代码及flash内容（如需要动画全用gif）5）页面所有图片必须为绝对地址6）页面的内容最好以文字的形式来呈现。二、代码要求1）使用table而已来制作页面，且必须设置宽度，而div格式由于有些属性不被邮件客户端完全支持，所以建议避免作用。...
2018-06-22 16:03:24
3543
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人