Vue/React
Vue和React整理
Twelve--
记录笔记--记录知识点--内容均为日常学习和工作碰到问题的梳理
展开
-
Vue3+ElementPlus+TypeScript 开发常见问题/警告/错误 (持续补充......)
Vue3+ElementPlus+TypeScript 开发常见问题/警告/错误原创 2023-01-12 16:39:30 · 852 阅读 · 1 评论 -
关于低版本火狐出现的: The above error occurred in the <Table> component
你打开antd的官网,新版本也会出现问题。所以这是兼容问题,不要怀疑代码写错了。"Component is not available" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"解决办法,如果你要兼容低版本火狐那只能降 antd 的版本,我这边是降到 4.15.3就可以正常显示的。如果不需要兼容,那么就升级浏览器就好了。...原创 2021-12-20 17:30:01 · 3030 阅读 · 0 评论 -
React+Antd兼容ie浏览器,360安全浏览器兼容模式
使用 create-react-app 生成的项目安装react-app-polyfill和core-jsnpm install react-app-polyfill core-js在入口文件 index.js 中引入import 'core-js/es' import 'react-app-polyfill/ie9' import 'react-app-polyfill/stable'修改 package.json 文件"browserslist": { "producti原创 2021-07-16 10:44:38 · 2241 阅读 · 4 评论 -
Relative imports outside of src/ are not supported
尝试引入public下的资源,提示Relative imports outside of src/ are not supported解决方法:项目直接 npm run eject 命令,如果之前执行过了产生了webpack等文件就不用再执行。修改 webpack.config.js 文件中 ModuleScopePlugin注释如下代码:// new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),...原创 2021-07-02 12:01:39 · 2093 阅读 · 0 评论 -
React最常见的使用小tip
有状态是复杂组件无状态是简单组件// state简写方式class Demo extends React.Component{ // 初始化状态 state = {isState:false} render(){ const {isState} = this.state return(<div>state简写{isState}</div>) }}ref的写法方式<input ref={(current原创 2021-06-16 10:11:24 · 304 阅读 · 0 评论 -
vue绑定多个class和多个style的方式
class绑定多个// isActive 为true就会加active的class,同理isRed<div :class="{'active':isActive,'red':isRed}"></div>// 也可以这样写<div class="red" :class="{'active':isActive}"></div>// 数组的方式<div :class="[active,red]"></div>// 三目运算&l原创 2021-04-20 16:13:07 · 8834 阅读 · 0 评论 -
element ui table表头更换颜色 el-table-column设置宽度百分比
表头更换颜色table有个自带属性 :header-cell-style<el-table :header-cell-style="{background:'#f9f9f9',color:'#333'}">...</el-table>el-table-column设置宽度百分比<el-table-column min-width="15%"></el-table-column>...原创 2020-05-27 11:56:29 · 870 阅读 · 0 评论 -
简单梳理 redux 全局状态管理
redux 是一个全局状态管理的容器三大核心state 单一数据源 就是传递的数据action 唯一改变state的方法就是触发 actionreducer 使用纯函数来执行修改 需要编写 reducerstore 就是把action与reducer联系到一起的对象主要职责:维持应用的state提供getState()获取statedispatch() 发送 actionsubscribe() 注册监听subscribe() 返回值注销监听state状态DomainSta原创 2020-05-26 22:08:14 · 338 阅读 · 0 评论 -
vuex 的基本使用(五) Getter的两种使用方式
Getter用于对store中的数据进行加工处理形成新的数据 类似 vue 的计算属性store 中数据发生变化 getter的数据也会跟着变化...引入省略// 定义getterstate: { count: 0},getters:{ showNum:state=>{ return `当前最新的数量是【${state.count}】` }}使用 getters 的第一种方式this.$store.getters.名称// <h3>{{$store.原创 2020-05-24 18:56:36 · 983 阅读 · 0 评论 -
vuex 的基本使用(四) Action的两种使用方式和携带参数
如果通过异步操作变更数据 必须通过Action 而不能使用Mutation 但是在Action中还是要通过触发Mutation的方式间接变更数据触发 action 的第一种方式 this.$store.dispatch()在store/index.js中 使用这里通过定时器来模拟一个异步任务import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: {原创 2020-05-24 18:31:52 · 3492 阅读 · 0 评论 -
vuex 的基本使用(三) Mutation的两种使用方式及携带参数
Mutation用于变更store中的数据1 只能通过mutation变更store数据 不可以直接操作store中的数据2 通过这种方式虽然操作起来稍微繁琐一些 但是可以集中监听所有数据的变化第一种方式 commit// 定义 Mutationconst store = new Vuex.Store({ state: { count:0 }, mutations: { sub (state) { state.count--原创 2020-05-24 17:47:33 · 2083 阅读 · 0 评论 -
vuex 的基本使用(二) state的两种使用方式
state是提供唯一的公共数据源 所有共享的数据都要统一放到store的state中进行存储组件访问state中数据的第一种方式 this.$store.state.全局数据名称state中数据的第二种方式通过导入 mapState 函数 将当前组件需要的全局数据 映射为当前组件的 computed 计算属性 // 从 vuex 中按需导入 mapState 函数 import {mapState} from 'vuex' // 将全部数据 映射为当前组件的计算属性 comput原创 2020-05-24 16:55:55 · 1222 阅读 · 0 评论 -
error Missing space before function parentheses space-before-function-paren
原因是函数名称或function关键字与开始参数之间缺少空格可以在报错的当前页面检查哪里缺少空格一般报错都会定位到多少行修改.eslintrc.js的配置在rules节点下增加"space-before-function-paren": 0此rules还具有其他选项…{ "space-before-function-paren": ["error", "always"], // or "space-before-function-paren": ["error原创 2020-05-24 16:18:10 · 3827 阅读 · 0 评论 -
vuex基本了解安装及初步使用(一)
首先了解一下vue中组件之间共享数据的方式父向子 v-bind子向父 v-on兄弟组件之间 EventBus$on接收数据的那个组件$emit发送数据的那个组件vuex是什么?是实现组件全局状态(数据)管理的一种机制 可以方便的实现组件之间数据的共享使用vuex统一管理状态的好处能够在vuex中集中管理共享的数据 易于开发和后期维护能够高效地实现组件之间的数据共享 提高开发效率存储在vuex中的数据都是响应式的 能够实时保持数据与页面的同步什么样的数据适合存储到vuex中一般情原创 2020-05-24 15:27:43 · 683 阅读 · 0 评论 -
Vue父子组件中的传值 兄弟组件中的2种传值方式
父组件向子组件传值子组件在props中创建一个属性 用以接收父组件传过来的值父组件中注册子组件 在子组件标签中添加子组件props中创建的属性把需要传给子组件的值赋给该属性父->子 v-bind props<div :msg="msg"></div>子组件接收props:["msg"]// 使用<div>{{msg}}</div>props验证props:{ msg:{ // 接收字符串类型的参数 并且这个参数必须传入原创 2020-05-12 09:24:16 · 342 阅读 · 0 评论 -
vue引用警告 "export 'default' (imported as 'url') was not found in './api/index'
vue引用警告问题原因:ES6 编译器识别问题修改 引用的main.js文件将原来的import Index_Utils from './api/index'改为import * as Index_Utils from './api/index'原创 2020-05-08 17:18:17 · 29573 阅读 · 10 评论 -
vue项目路由 Navigating to current location ("/xxxx") is not allowed
在使用vue构建项目的时候为了控制页面刷新后路由和界面保持在原来的位置加了reloadRouter(path) { this.$router.replace({ path: path, query: { nextPath: path } });}当这么做的时候 页面的浏览地址就会出现两个同样的路由地址然后想着去掉一个就把nextPath包括ne...原创 2020-04-29 12:16:06 · 874 阅读 · 0 评论 -
vue elementUI 在两个不同的页面实现组件弹框及父子组件的传值
假设有两个文件其中一个为父组件一个为Dialog的弹框子组件通过父组件传值控制弹框的打开然后子组件传值告诉父组件弹框是否关闭父组件按钮点击触发方法 通过 isShowData 给子组件传值<el-button @click="clickDialog">点击显示弹框</el-button><Dialog :isShowData="isShowData" ...原创 2020-04-26 16:06:07 · 2394 阅读 · 0 评论 -
集中处理 axios 请求的三种方式
推荐使用第三种!!!新建一个文件夹 network 在此文件新建一个 request.js 文件一 第一种方式import axios from 'axios'export function request(config,success,failure){ const instance = axios.create({ baseURL:'', timeout:5000 }) ...原创 2020-04-26 09:17:58 · 304 阅读 · 0 评论 -
请求 使用 fetch(await/async) 或者 axios(await/async)
使用 Fetch 的两种方式不使用await/asyncgetData(){ fetch('请求地址').then((response)=>{ console.log(response) }).catch((error)=>{ console.log(error) })}使用await/asyncawait/async 是 ES7 最重要特性之一,它是目前为止...原创 2020-04-15 19:49:18 · 393 阅读 · 0 评论 -
React 中绑定 this 传参的几种方式
1. 在事件处理函数中 直接使用bind绑定this并传参bind的作用–为前面的函数修改函数内部的this指向 让函数内部的this指向bind参数列表中的第一个参数第一个参数是修改this指向 this后面参数都会当作参数传递进去<input onClick={this.changeMsg.bind(this)} />2. 在构造函数中绑定并传参当一个函数 调用bind...原创 2020-04-14 08:19:43 · 211 阅读 · 0 评论 -
PC端 React 中 Rem自适应
在入口文件index.html头部加入<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">写一个监听窗口大小变化的方法resizeListener(){ // 定义设计图的尺寸 1920 let designSiz...原创 2020-03-27 12:10:09 · 3541 阅读 · 2 评论 -
vue 路由懒加载
当打包构建项目时 js包会变得非常大 影响页面加载 如果把不同路由对应的组件分割成不同的代码块 路由被访问的时候才加载对应组件 这个就更加高效了官网 : https://www.babeljs.cn/docs/babel-plugin-syntax-dynamic-import分为三步:1. 安装 @babel/plugin-syntax-dynamic-import 开发依赖npm i...原创 2020-03-21 11:50:42 · 209 阅读 · 0 评论 -
vue-cli 通过extends引入 CDN外部资源
使用 vue 的 webpack 模版开发项目时,使用 npm install安装的各种组件和依赖到本地默认情况下 通过import语法导入的第三方依赖包 最终会被打包合并到同一个文件中从而导致打包成功后 单文件体积过大的问题为了解决问题 可以通过webpack的externals节点 配置并加载外部的CDN资源凡是声明在externals中的第三方依赖包 都不会被打包未配置前打包的大小...原创 2020-03-20 19:56:02 · 2054 阅读 · 2 评论 -
使用Webpack打包、配置和加载 VUE组件
webpack4 确保使用Node版本 >= 8.9.4Webpck是一个前端资源加载/打包工具。它根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。官网: https://webpack.js.org/使用webpack4不再强制需要webpack.congig.js作为打包入口配置文件。默认入口为’./src’的index和默认出口’./dist’,...原创 2020-03-06 17:48:48 · 944 阅读 · 0 评论