vue 强制组件重新渲染（重置） 数据通过异步操作后，对之前刚加载的数据进行变更后，发现数据不能生效方案一当数据变更后,通过watch监听，先去销毁当前的组件，然后再重现渲染。使用v-if可以解决这个问题<template> <third-comp v-if="reFresh"/></template> <script> export defau...
点击复制url //定义函数 window.Clipboard = (function (window, document, navigator) { var textArea, copy; //创建文本元素 function createTextArea(text) { textArea = document.createElement(...
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...
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' ? './' : '/', // 根...
Vue与React两个框架的区别和优势对比 Vue和React两个JavaScript框架都是当下比较受欢迎的，他们两者之间的区别有哪些，各自的优缺点是什么，本文将为你呈现。我已经写出了两个几乎一样的web应用，一个是基于Vue，另一个则基于React，可以方便你在看这篇文章的时候查找相关代码。·React sample app Vue sample app简单介绍除非你最近一直不关注前端的发展，不然你肯定听说过由Faceb...
网站的动静分离实践(动静分离) 1. 动静分离的实现思路动静分离是将网站静态资源（HTML，JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。1.1 静态资源部署至CDN上我们的方案是直接将静态资源全...
从输入URL到页面展示的详细过程 HTTP请求：1.输入网址2.DNS解析3.建立tcp连接4.客户端发送HTPP请求5.服务器处理请求6.服务器响应请求7.浏览器展示HTML8.浏览器发送请求获取其他在HTML中的资源浏览器渲染1.解析html文档，遇到HTML标签时，构建DOM树2.在构建DOM的过程中，如果遇到外联的样式声明或脚本声明，则暂停文档解析，创建新的网络连接，开始下载样式文...
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/...
vue设置title 路由配置页router/index.jsroutes: [ { /* （首页）默认路由地址 */ path: '/', name: 'Entrance', component: Entrance, meta: { title: '首页入口' } }, { ...
nodejs更新package.json中的dependencies依赖到最新版本 如果手动去修改dependencies中各个包的版本号，那就太麻烦了，借助npm-check-updates工具可以很方便的将package.json中的依赖包版本号更新为最新版本。1、安装：npm install -g npm-check-updates使用：2、检查package.json中dependencies的最新版本：ncu3、更新dependencies到新版本：...
基于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...
Vue、React打包文件放在服务器，浏览器存在缓存问题的解决 因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。解决方法：找到webpack .prod.conf.js 1.定义版本变量： const Version = new Date().getTime(); // 这里使用的是时间戳 来区分 ，也可以自己定义成别的如：1.1 2.修改要生成的js和...
js中[]、{}、()区别 一、{ } 大括号，表示定义一个对象，大部分情况下要有成对的属性和值，或是函数体{}表示对象、[]表示对象的属性、方法,()如果用在方法名后面，代表调用如：var LangShen = {"Name":"Langshen","AGE":”28”}; 上面声明了一个名为“LangShen”的对象，多个属性或函数用,（逗号）隔开，因为是对象的属性， 所以访问时，应该用.（点）来层层访问：L...
谈一谈创建React Component的几种方式 React中有两种组件：函数组件（Functional Components) 和类组件（Class Components）函数组件import React from "react";import Button from "./Button";let Message =(props)=> { return ( <div> ...
export ，export default 和 import 区别 以及用法 首先要知道export，import ，export default是什么ES6模块主要有两个功能：export和importexport用于对外输出本模块（一个文件可以理解为一个模块）变量的接口import用于在一个模块中加载另一个含有export接口的模块。也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。这几个都是ES...
如何在react项目中配置less 如何在create-react-app创建的项目下配置less，其实很简单，只是create-react-app创建的项目没有暴露webpack相关配置，所以需要暴露出webpack相关配置，具体操作如下：一、暴露webpack,安装less\less-loader依赖在create-react-app创建的项目下是不支持less的，我们要使用less就需要在相关配置文件中配置。...
js中Object常用方法和属性 继之前js中数组的常用方法之后，Object的常用方法和属性也是很常用的。故，总结之。 一、属性 Object自带一个prototype的属性，即Object.prototype，Object.prototype本身也是一个对象，也会有一些属性和方法。如下： 1、属性 Object.prototype.writable：默认为false Object.prototype.enumerab...
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';...
React-router使用实例 1.目录结构React-router node_modules public src page About.js Home.js Topic.js Topics.js App.js index.js package-l...
react中ref的两种使用方法 ref一共有两种使用方式回调函数形式（官方推荐） string形式第一种 回调函数形式回调函数形式一共有三种触发方式组件渲染后 组件卸载后 ref改变后import React,{Component} from 'react'export default class UserAdd extends Component{ constructor(){ ...
关注
