2021年04月_Realistic-er

原创 vueX实现组件之间的数据共享

vueX:实现组件之间的数据共享vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新1.state提供唯一的公共数据源，所有共享的数据都要统一放到store的state中进行存储export default new Vuex.Store({ state: { user: getItem('user') }})(1.)组件访问state中数据的第一种方式：

2021-04-06 10:57:55 261

原创什么是BFC？

BFC：先来看一段代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .div1

2021-04-06 10:33:24 70

原创 Echarts及百度地图的使用基本流程

echarts的使用过程：网站：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts1.安装方法：（1）npm install echarts --save（2）如果上述方法不成功，可以通过下述方法进行 npm config set registry http://registry.npm.taobao.orgcnpm install echarts --

2021-04-05 19:53:35 412

原创 react函数式组件及hooks

函数式组件：注意事项：（1）函数第一个字母要大写（2）渲染的时候，得写成标签形式，字母要大写，要有结束符<script type="text/babel"> function Demo () { return <h2>我是用函数定义的组件</h2> } ReactDOM.render(<Demo />, document.getElementById('test')) </script&

2021-04-05 19:47:43 573

原创 vue监听函数watch

vue监听函数watch：可以用来监听数据是否发生变化，如果数据发生变化了，就会执行某个函数数据的名字和函数的名字是一样的（1）简单写法：缺点：这样使用的时候，第一次数据发生变化的时候不会出发函数 props: { searchText: { type: String, required: true } }, computed: {}, // watch用来监视数据的变化，数据一旦发生变化就会触发事件 watch: { searchT

2021-04-05 19:41:21 1282

原创 vue的计算属性：

vue的计算属性：当我们需要对我们的数据进行某种变化后再进行某种显示后，可以在计算属性中再重新定义一个属性，并且给他返回变化后的数据u<h2>{{fullname}}</h2>computed： { fullname：function () { return this.firstname + this.lastname }}复杂操作：<h2>总价格：{{totalPrice}}</h2>data:{ books: [

2021-04-05 19:40:37 72

原创 v-for/v-if之间的关系

v-for遍历:key="cover"写一个是和diff算法有关，让遍历或者修改的时候方便遍历的作用就是规定某个标签或者组件显示的次数<el-form-item label="封面"> <el-radio-group v-model="article.cover.type"> <el-radio :label="1">单图</el-radio> <el-radio :label="3">三图</el-ra

2021-04-04 16:06:53 148

原创 vue和react中的跨域解决

开发环境下跨域如何解决：https://blog.csdn.net/weixin_39553363/article/details/104152142?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-7.controlvue.con

2021-04-04 16:02:39 280

原创 Redux的基本知识

Redux工作流程图：安装方式：npm install reduxsrc下建立：-redux-store.js-count_reducer.js（1）为组件单独创建一个reducer.js的文件该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数，接受两个参数，一个是preState，一个是actionaction有两种类型，一种传递的是对象，称为同步版；另一种传递的是函数function，称为异步版// 如果刚开始store在加载count_

2021-04-04 15:51:30 102

原创 React-Redux的基本使用

React-Redux的基本使用：由于使用了React-Redux中的connect，不用再关注react的再次渲染，所以不需要写以下代码：store.subscribe(()=>{ ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') )})（1）UI组件的创建：src-

2021-04-04 15:46:52 98

原创 react组件的相关知识

类式组件创建类式组建的时候，必须要继承react本身自带的一个类标准格式： // 1.创建类式组件 class MyComponent extends React.Component { render () { return <h2>我是用类定义的组件</h2> } } // 2.渲染组件到页面 ReactDOM.render(<MyComponent />, doc

2021-04-04 15:34:58 49

原创 react中三大核心属性

1.state的基本使用 <script type="text/babel"> // 1.创建组件 class Weather extends React.Component{ constructor(props) { super(props) this.state = { isHot: true, wind: '

2021-04-04 15:31:49 212

原创 react中component效率低的原因以及解决办法

component效率低的原因以及解决办法：（1）父组件并没有给子组件传递数据，但是父组件中this.setState({carName:‘迈巴赫’})的状态被改变的时候，子组件也会跟着重新渲染import React, { Component } from 'react'import './index.css'export default class Parent extends Component { state = { carName:"奔驰c36"

2021-04-04 15:26:21 220

原创 React旧（新）版本中的生命周期

组件挂载时的流程：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> &l

2021-04-04 15:20:36 86

原创 css小知识

CSS3盒子模型：{box-sizing：border-box}加上这句话，盒子的宽度不需要再考虑border还有padding，你给盒子定下多少尺寸就是多大尺寸传统盒子模型：width+border+padding2D转换（transform）：2D指的是二维坐标系在这里插入代码片[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U7jHhoaM-1617332678345)(D:\项目笔记\css\css3\1.PNG)]（1）移动：translatem--

2021-04-02 11:18:19 175

原创 flex布局，rem布局，自适应布局，响应式布局，Bootstrap

传统布局与flex布局：传统布局：1.兼容性好，2.布局繁琐，3.局限性，不能再移动端很好的布局flex弹性布局1.操作方便，布局极为简单，移动端应用很广泛，2.PC端浏览器支持情况较差3.ie11或更低版本，不支持或仅部分支持注意：当我们为父盒子设为flex布局以后，子元素的float，clear和vertical-align属性将失效建议：1.如果是PC端页面布局，我们还是传统布局2.如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局父属性1.al

2021-04-02 10:53:28 1149 2

原创 node相关知识

node搭建简单服务器过程：（1）加载http核心模块在node中专门提供了一个核心模块：http，这个模块就是帮你创建编写服务器的var http = require('http')（2）使用http.createserver()方法创建一个web服务器，返回一个server实例var server = http.createServer()（3）服务器可以用来干嘛：提供对数据的服务发请求接收请求处理请求给个反馈（也叫发送响应）注册request事件当客户端请求过来，就会自

2021-04-02 10:41:34 85

原创数组push，unshift，splice，every，map，findIndex，indexof，数组结合，清空，去重

数组push方法：可以把请求到的数据累积放在数组中this.list.push(...res.data.data.results)数组从前往后添加方法unshift：var arr = ["张三", "李四", "王五"];var count = arr.unshift("赵六", "小明");console.log(count);console.log(arr);此时arr=[ “赵六”, “小明” , “张三”, “李四”, “王五” ]数组删除元素splice方法：arra

2021-04-02 10:32:04 674

原创 webpack打包

webpack是什么：webpack是一种前端资源构建工具，一个静态模块打包器在webpack看来，前端的所有资源文件（js/json/img/less…）都会作为模块处理它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源webpack五个核心概念：1.Entry入口（Entry）指示webpack以哪个文件为入口起点开始打包，分析构建内部依赖图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l2Uf59vE-1617326248838)(D:\webpa

2021-04-02 09:20:20 418

原创 react路由

一. react 路由的安装：npm install react-router-dom二. 路由的基本理解：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fgth0v8h-1617325907267)(D:\react知识笔记\react 路由\db60018ad098f141a9858272bc8faac.png)]三. 基本使用过程：（1）明确好界面中的导航区，展示区（2）导航区的a标签改为Link标签<Link to="/xxx">D

2021-04-02 09:15:57 85

原创闭包，对象字面量增强写法，扩展运算符，防抖节流，高阶函数与科里化，this指向，箭头函数，正则表达简写

闭包：hd被调用了，会开辟一个环境然后开始运行，但是运行完了之后，这个环境就会被清除掉，运算产生的数据也不会被保留，相当于你打游戏又重新开了一把。如果不加return的话，这个过程就相当于打游戏，调用函数这个相当于重新开游戏function hd() { let n =1; function sum() { console.log(++n); }; sum(); } hd();[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直

2021-04-02 09:05:48 241

原创类的知识

构造对象的三种方法：（1）利用new Object（）创建对象var obj1 = new Object();（2）利用对象字面量创建对象var obj2 = {};（3）利用构造函数创建对象类的相关知识：代码：<script> //  //  class person { // 类你得需要接受来自实例对象

2021-04-02 08:54:49 93

原创 promise的知识

promise的知识：相当于一个容器，里边保存着还没有结束的异步操作，保存着事件的结果，promise相当于一个对象，提供统一的api，各种异步操作都可以用同样的方法去处理promise的两个特点：1.对象的状态不受外界影响，处理异步异步操作有3个状态进行中（pending），处理完成（resolve）：你获取的结果已经存放在当前这个结果中失败的结果（reject）：2.一旦状态改变，就不会再变，逆转，只要成功，那么我就可以通过promise对象来获取到最后的结果首先，promise是一个对

2021-04-02 08:50:21 120

原创图片裁切以及图片预览的过程

图片裁切以及图片预览的过程：1.图片裁切功能crop：（样式/更新）网站：https://github.com/fengyuanchen/cropperjs预览功能网站：https://fengyuanchen.github.io/cropperjs/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jcMYMTf6-1617323387035)(D:\项目笔记\732c9beeea86b44a9b7ed777a023d60.png)]这个包是原生的js语言写的，可以用

2021-04-02 08:36:34 474

原创 router-link的属性：

router-link的属性：（1）属性to：用于指定跳转的路径to后边跟上你配置好的路径<router-link to="/home">首页</router-link>（2）属性tag：router-link默认会将链接渲染成a标签，如果你想让它渲染成其他的，可以通过tag属性<router-link to="/home" tag="button">首页</router-link><router-link to="/home" tag

2021-04-01 19:35:45 212

原创路由懒加载：

路由懒加载：vue的默认配置import Vue from 'vue'import VueRouter from 'vue-router'将需要配置路由的页面给引进来//import LoginIndex from '@/views/Login/'//import LayoutIndex from '@/views/Layout/'//import HomeIndex from '@/views/Home/'//import QaIndex from '@/views/qa/'//im

2021-04-01 19:35:09 54

原创路由基础配置：

路由基础配置：（1）router-index.jsvue的默认配置import Vue from 'vue'import VueRouter from 'vue-router'将需要配置路由的页面给引进来import LoginIndex from '@/views/Login/'import LayoutIndex from '@/views/Layout/'import HomeIndex from '@/views/Home/'import QaIndex from '@/vie

2021-04-01 19:34:32 58

原创组件缓存：

组件缓存：组件被缓存之后，created和mouted只会被执行一次组件缓存中有两个函数，一个是activated，表示组件从缓存中被激活，另一个是deactivated ，表示组件失去活动（1）为什么需要组件缓存？在开发的过程中，页面跳转了之后，再返回原来的页面的时候，原来页面的进度条之类的不再保持了（2）如何组件缓存？用keep-alive标签将router-view包裹住<template><div id="app"> <keep-alive :inc

2021-04-01 19:28:46 1048

原创一个组件在多个页面的灵活应用：

一个组件在多个页面的灵活应用：这是封装好的一个组件，它被应用到两个页面上，但是在应用的这两个页面上有些内容不一样，这个时候如何通过props来解决这个问题：（1）首先在组件页面给它的props绑定布尔值谁需要做出判断，就把v-if的值帮给谁el-button v-if="isShowAdd" size="mini" type="success" @click=" dialoguploadVisible = true">上传素材</el-button><div class

2021-04-01 19:26:52 326

原创组件页面新创建的时候过程

组件页面新创建的时候过程（1）创建页面的名字<script>export default { // name: 'UploadCover'这是组件的名字 name: 'UploadCover', components: {}, data () { return {} }, computed: {}, watch: {}, created () {}, mounted () {}, methods: {}}</script>

2021-04-01 19:26:15 75

原创 v-model解决父子组件之间的通信问题：（推荐）

v-model解决父子组件之间的通信问题：（推荐）应用场景：当你给子组件提供的数据既要使用，还要修改，这个时候可以使用v-model简化v-model干了两件事情：1.通过value把article.cover.images[index]传给了子组件:value=“article.cover.images[index]”2.默认监听了input事件,当这个事件触发的时候，你传1的时候，就会把你绑的这个article.cover.images[index]改为1；你传2的时候，就会把article.

2021-04-01 19:21:43 284

m0_52518047的博客