一炜的博客

原创 vue cli 报错 WARNING in ../node_modules/Vue/dist/vue.runtime.esm.js

vue cli 报错 WARNINGin …/node_modules/Vue/dist/vue.runtime.esm.js解决 ： src文件夹 》 main.js中 修改 import Vue from ’ 《~ Vue ~》 ’ 为小写 vue

原创 vue cli BASE_URL is not defined 报错

vue cli BASE_URL is not defined 报错解决方法- 1. public 文件夹中的 html 文件 Link标签 href 属性（有特殊字符不能解构）报错 删除就可以了- 2. 在 webpack.config.js中 安装插件并使用 const Html = require("html-webpack-plugin"); configureWebpack: config => { config.plugins

原创 Error

原创 Error

原创 Error

原创 小案例：：模拟考试页面跳转

import React, { Component } from 'react'class Frou extends Component { constructor(props) { super(props) this.state = { cas: 'one_box', inp:{ name: '', age: '', } } } // 第模块跳转 // goTwo(cas) {

原创 React ---- 路由配置与传参

安装 rect dom 包路由的传参方式paramsquery search转换方法 引入statesearch 获取this.props.location.search【获取到的是一个urlencode编码字符串，需要借助querystring解析】转换:引入 import qs from ‘querystring’使用qs.stringify() //对象转字符串qs.parse() //字符串转对象获取state 获取 this.props.location

原创 .env打包配置文件

.env文件默认配置GENERATE_SOURCEMAP=falsePUBLIC_URL=///这里还可以加入其它配置

原创 React 类组件的state

statestate 生命周期this.statethis.state 用来获取状态设置初始值的 类似于vue的start用来存储值必须 写在constructor 函数里constructor (props){ super(props); // 设置初始值 this.state={ name:'小张', age:18, exp:{ year:'2年', job:'web' }, }}修改 必须使用 this.setSta

原创 开发常用 尺寸

本人项目开发经验总结 持续更新中h5 开发 经验设计稿: 标准PC:内容区宽度早期960px980px1000px现在1200px1380px字体大小14px16px18px字体微软雅黑“Microsoft Yahei”Arial 针对英文H5:宽度750px720px640px375px使用H5默认样式最上变引入 @import 默认样式在index中...

原创 React 常用生命周期

react 生命周期1. constructor 数据初始化2. render 渲染dom挂载阶段3. componentDidMount （）主要是用来 发送axios 请求更新阶段render 渲染componentDidUpdate 更新跟新时完成后触发也可以发送请求 但必须有限制条件卸载阶段componentWillUnmount 卸载之前清除 定时器 常驻内存变量， 以及停止axios 请求...

原创 多级路由配置 方案

多级路由配置文档解构 Views Home Usent Text index.jsx text1.jsx text2.jsx text3.jsx Color index.jsx color1.jsx color2.jsx Back index.jsx

原创 5大浏览器 4大内核

五大浏览器四大内核五大浏览器谷歌 IE 火狐 欧朋 Safari四大内核1. Trdent 内核，也称IE内核 。 | 锤登特 |2. Webkit 内核|3. Gecko 内核 | 盖口 |4. Presto 内核 | 普肉司徒 |Safari 浏览器内核 ： Webkit谷歌，以前是Webkit，现在是BlinkOpera 浏览器内核： 之前是Webkit内核 ，现在是BlinkIE 浏览器内核 ：Trident 内核 ， 俗称

原创 react props

父传子props传值方法一 普通传值import React , {Component} from 'react'calss Father extends Component{ render(){ return( <div> // 通过title传值 <One title="我是父组件传的值"/> </div> ) }}// 子组件import React , {Comp

原创 react 函数组件和类组件 基础

函数组件// 普通函数function Name() { return( // 必须有跟组件包裹实例 <div > </div> )}export default Name;// 箭头函数 组件const Name=()=>{ return( <div> </div> )}export default Name;class类组件 1. 先引入React 和

原创 react 项目 创建

react项目创建流程ls 产看项目内文件cd + name 进入文件先创建一给git 仓库 ( 设置模板 必须 选择 Readme文件 勾选 )git clone ( 克隆项目 )npx create-react-app ’ name ’ 创建react项目git 4步 – git pull - - git add -all – git commit -m ’ ’ – git push 提交到git上cd name 进入项目

原创 export 与 export default 区别

export 和 export default 区别相同点export 和 export default 都是es6语法中用来导出组件的可以导出的文档类型有( 数据、常量、函数、js文件、模块等)不同点export 导出内容时必须注意当前模块文件中可以有多个 export 并且export 可以一次导出多个，export class Com extends Component{ render() { return ( <div >

原创 vue 组件通信方法

组件通信props属性普通写法 : props:['prop1','prop2']配置写法export default{ props:{ // 简单的验证类型 prop1:String, // 设置默认值 obj:{ // 如果是对象或数组 使用函数 type:Object, ///Array default：function(){ return{ } }

原创 vue 自定义 过滤器 和 指令

自定义的 filter 过滤器 和 指令filter 过滤器组件内过滤器filters全局过滤器使用 filter 【每次只能写一个 要写多个可以写到一个js文件里 然后引入main.js】定义过滤器把一个值接收处理完毕后返回一个新值,过滤器目的是不破坏原始数据语法{{ value | filter1 | filter2 }}多个过滤器用 | 管道符隔开声明: filters:{ // value必须写 必须有return filterName(value){

原创 Vue 中 计算属性和监听

计算属性和监听watch监听器 侦听器概念用来监听数据data或props的。当被监听的值发生改变后会触发的方法。定义对数据进行监听语法简单类型数据 watch: { value(newVal,oldVal){ console.log('新值',newVal) console.log('旧值',oldVal) } }对复合类型监听// 对象obj:{ handler(val,oldVal){}, deep:true, // 监听对象的某

原创 Vue 指令

vue指令v-model数据双向绑定 用于表单元素 input 上v-text渲染文本v-html渲染dom片段的 用于v-text全部特性v-once让元素只显示第一次渲染的内容，之后不再受数据更新的影响v-if有三条同组指令 v-if v-else-if v-else控制元素的加载与销毁， v-if可以单独使用，后面2个必须跟在v-if后面才能生效；【优点】：如果链式使用v-if 则其中一条规则符合条件,剩余的判断不会执行。v-show控制元素的显示与隐藏 底层原理是修改cs

原创 Vue 项目结构

项目结构code 【由项目开发者创建】存放项目日志 ，更新日志，开发日志，修改日志，等等…node_modules所有的运行文件包public公共文件 存放公共资源src 【重要】源码 必要的文件 main.js 是入口文件全局文件 项目运行时执行的第一个文件views视图用来放页面package.json 【重要】运行命令和所有依赖清单.getitgnoregit 过滤 文件里面写不想打包的文件bable.config.js解析ES6

原创 Vue 生命周期理解

生命周期概念页面的从创建，到销毁之间的过程就叫生命周期。定义事物在不同阶段的不同表现叫做生命周期页面有 初始化，渲染，更新，销毁， 4个阶段apibeforeCreate 创建前Create 创建完成beforeMount 挂载前 渲染mounted 挂载完成beforeUpdate 更新前updated 更新完成beforeDestroy 销毁前destroyed 销毁完成 // 一次性声明周期

原创 Vue 前置准备

环境win + R 键 输入cmd 打开 窗口检查有没有 nodejsnode -v检查有没有vuevue -V如果提示 ‘ XXX 不是内部命令或外部命令 说明没有 安装 需要安装 ’安装donejs 去百度下载 【安装包】安装vue 去vue.js 官网 用最新命令安装// npm 安装 npm install -g @vue/cli// yarn 安装 yarn global add @vue/cli包管理工具包 就是 插件npm

原创 vue内置组件

vue内置组件templatecomponentkeep-aliveslottransitiontransition-grouptemplate 模板 模块<template></template>template的作用是模板占位符,可帮助我们包裹元素,但在循环过程当中,template不会被渲染到页面上,通常用来包裹组件。component 动态加载组件<component v-bind:is='init'></component&g

原创 MIXINS 混入模式

混入 apiMIXINS不推荐使用 单人开发可以，多人开发命名冲突报错奇怪，不好解决定义将可复用性强的逻辑代码或数据从组件中提取出来封装成js文件那个组件使用就引用语法// 声明一个混入文件const mixins = { name:'组件', data(){return {}}, methods:{}, computed:{}, props:[], watch:{}, components:{}, filters:{}, directives:{}, m

原创 VueX 理解

vue入门安装yarn add vuexnpm i vuexstore 的作用域只有被挂载store的组件和它所有子组件 才能拥有$storevuex的属性strict 严格模式state 状态 全局共享状态state里 存放的是数据getters: store 的计算属性，对state 监听监听state里的值 返回一个新值 (可以做一些操作)mutations：唯一可以修改state的方法mutations里放 修改state的方法 所有的修改都由这里的方法修改所有

原创 Vue-Router

vue-router路由的定义根据不同的地址呈现不同的内容或页面路由3大组成部分导航 router-link视图 router-view配置 router路由的跳转方式声明式导航 标签导航跳转编程式导航 js跳转方式路由跳转方法push() 向历史记录添加一条replace() 用最新的地址替换当前历史记录go() 通过数字控制前进后退back() 返回上一个历史记录路由模式mode:hash 锚点路由history 历史路由abst

原创 Vue基础认识

vue 定义 原理以数据驱动视图的单页面渐进式mvvm框架 特点是数据双向绑定 和 模块化响应式原理 ： object.definePerporty渐进式 (轻量级 可以使用 vue中的一小部分 也可以使用全部的)vue的优点(1) 轻量级的框架:轻量级 可以使用 vue中的一小部分 也可以使用全部的(2) 双向数据绑定数据改变会自动更新视图 反之亦然(3) 组件化:实现了html的封装和重用,在构建单页面应用方面有着独特的优势(4) 视图,数据,结构分离数据的更改更为简单,不