三岁就很~酷~-CSDN博客

原创 vue+ts起手式

vue+ts项目vue简介定义核心优势响应式vue全家桶vue简介定义官方定义：构建用户界面的自上而下的渐进式框架构建用户界面：根据用户需求可以通过vue框架将需求展示在浏览器，用户可以在浏览器进行操作的框架自上而下：所有的框架都是根据原生js来写的，原生js也叫底层代码，一些功能如果自己来写的话相当复杂，而且也比较难，但是框架自己实现了许多功能，只需要调用即可，不需要在自己写。vue也可以自己封装一些功能性的东西，在极端条件下才需要我们自己来操作DOM。渐进式：声明式渲染：告诉框架渲染的位置以

2021-10-22 17:27:47 428

原创 react当中使用redux（一）

最基础的redux使用实例1.先安装npm i --save redux2.核心redux数据管理仓库（1）statestate当中存放公共数据，如果需要多个无关组件要用到同一组数据，可以把数据扔进“仓库”（2）reducer根据不同的需求对数据进行相应的操作（3）创建仓库对外抛出仓库（store）对象（一）实例创建脚手架。。。安装reduxsrc下创建store文件夹用作创建仓库store文件夹下对应三个js文件（store.js、state.js、reducer.js）st

2021-09-26 15:46:04 170

原创 vue动态路由（权限设置）

1.思路（1）动态添加路由肯定用的是addRouter，在哪用？（2）vuex当中获取到菜单，怎样展示到界面2.不管其他先试一下addRouter找到router/index.js文件，内容如下，这是我自己先配置的登录路由现在先不管请求到的菜单是什么样，先写一个固定的菜单通过addRouter添加添加以前注意：addRoutes()添加的是数组在export defult router的上一行图中17行写下以下代码var addRoute=[ { path:"/", name:"

2021-09-22 17:03:38 5839 3

原创 express连接mysql

1.mysql的安装[mysql下载地址（官网）](https://www.mysql.com/downloads/)打开如下图滑轮下滑到页面底部点击 MySQL Community Server 8.0.26进入以下界面图上两个箭头表示两种安装方法上面箭头点击，下载到的文件为安装软件的方式安装mysql下面箭头表示，下载到的文件为zip压缩包我用的是压缩包下载zip包以后，在电脑任意盘创建文件夹存放解压后的包打开这个目录复制箭头指的地址配置环境变量在桌面找到我的电脑,点

2021-09-08 14:48:14 3282

转载 watch侦听vuex值的变化

watch侦听vuex值的变化watch:{ "$store.state.loginStore.menu":{ handler:function(newVal,oldVal){ console.log(newVal,oldVal) if(this.$store.state.loginStore.menu.length>0){ this.$router.push({path:"/"}) } }

2021-09-08 11:51:11 385

原创用express+mongodb写一个接口

1.安装mongodb下载地址mongdb下载2.安装mongodb一路next完成，打开C:\Program Files\MongoDB\Server\3.4\bin复制粘贴该文件路径，接下来配置环境变量3.配置环境变量在桌面找到我的电脑点击右键找到属性，点击属性找到高级系统设置，找到环境变量，点击进入，一个是用户变量一个是系统变量，在系统变量里面找到Path双击，点击新建，然后ctrl+V，一路确定不然不生效。4.检测配置是否正确按下windows+r输入cmd回车，在终端当中输入mo

2021-08-27 13:53:32 579 1

原创修改element部分元素的样式

在vue的组件当中，修改样式可以如下：//修改el-button样式/deep/.el-button{ //需要的样式}//修改el-input样式/deep/.el-input{}/deep/.el-input__inner{}在F12抓取el-input的元素会发现里面套一层，修改的时候修改一个可能不生效其他的类似。只需要在修改元素前面加上/deep/就好，不确定元素名称的时候，也可以F12查看的时候，抓取这个元素然后在F12里面查看该元素的class名，在代码当中修改，scop

2021-08-27 10:27:06 423 1

原创 vue-cli遇到的问题

在用vue-create demo创建的vue项目，发现目录结构当中没有static文件夹，在vue initi webpack demo创建的项目当中有static文件夹发现在vue init webpack创建的项目用到static文件夹当中的图片可以用以下代码<img :src="../../static/img/1.jpg"/>//动态展示图片但是vue create demo创建的项目没有static怎样动态引图片试了一下自己在根目录下创建static文件夹但是动态引入图

2021-08-27 10:09:47 142

转载 CategoryInfo : SecurityError: (:) []，PSSecurityException + FullyQualifiedErrorId : Unau

出现CategoryInfo : SecurityError: (???? []，PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess在项目终端下直接运行以下代码Set-ExecutionPolicy Unrestricted -Scope CurrentUser

2021-08-27 09:58:39 5266 3

原创 vue+ts main.ts报错unused expression, expected an assignment or function call

unused expression, expected an assignment or function call解决办法在main.ts当中修改vue的挂载语句new Vue({ el: '#app', router, components: { App }, template: '<App/>'}).$mount()加上$mount()就解决这个问题了

2021-06-29 15:20:15 727

原创 echarts单线封装

只有一个柱，一条线封装以下是组件的代码，<template><div id="box"></div></template><script>import * as echarts from 'echarts';import {drowEcharts} from '@/utils/echarts.js'export default { data(){ return{ //x轴的值 xAxisDa

2021-05-20 18:51:19 112 1

转载 Object.definePropty() 「vue源码五」

Object.defineProperty(obj,prop,attributes)在一个对象上定义一个新的属性，或者修改该对象的一个属性，并返回这个对象三个参数obj目标对象，就是需要添加或修改属性的对象prop目标对象的属性，需要添加或修改的属性名attributes,对象，键值对，目标对象的属性需要的值 var obj={} var objprop=Object.create(null) Object.defineProperty(obj,"key",objprop) Obj

2021-05-18 19:24:29 464

原创 arguments、apply、call、bind(vue源码四)

argumentsarguments类数组对对象，代表传入函数传入函数参数的列表。两种情况严格模式和非严格模式严格模式下arguments展示如下：function a(a){ "user strict" a=10 console.log(a,arguments[0]) } a(1) //输出结果为10，1非严格模式下arguments展示如下：function a(a){ a=10 console.log(a,arg

2021-05-18 16:07:48 330

原创学习大神作品(vue源码三)

Object.freeze()方法冻结对象之后，该对象内部的属性只能读，不能改在vue源码当中的冻结方法//Obeject.freeze() js当中的冻结方法，参数是一个对象，冻结之后对象当中的属性不能进行增、改，返回的值与传的值相同 var emptyObject = Object.freeze({});Object.prototype.hasOwnProperty（）/返回boolean值，表示对象自身有没有指定的属性 //hasOwnProperty在js当中不是敏感词，

2021-05-18 12:10:35 266

原创学习大神作品(vue源码二)

Symbol判断数据类型的函数，返回值为bool值，数据基本类型为boolean、number、string、null、undefined，symbol，es6新增属性，也是一种基本数据类型，不支持new symbol()语法，会报错，表示独一无二的，例子：1.什么时候返回symbollet s1=Symbol()console.log(typeof s1)输出Symbolconsole.log(s1.toString(s1))输出Symbol独一无二的体现console.log(Symb

2021-05-17 16:22:53 166

原创 vue当中修改数组不渲染问题

this.$set()解决vue使用少不了v-for的使用，在后台拿到数据以后，就可以通过v-for展示出去，但是要对这个数组当中的数据操作呢？会发现点击操作然后console，数据确实变了，但页面没有任何变化。解决办法this.$set(arr,index,value)意思就是将arr这个数组下标为index的这一组数据换为value,就可以了，也不需要在刷新页面...

2021-05-13 16:49:58 299

原创学习大神作品（vue源码）

一、自运行整个js源码都在这个自运行函数当中，初步感觉这是vue响应式原因（function（global,factory）{}）()二、源码当中的一些函数方法var str =“测试方法”function isUndef (v) {return v === undefined || v === null}function isDef (v) {return v !== undefined && v !== null}function isTrue (v) {retu

2021-05-11 14:10:46 160

原创学习大神作品（vue源码）（一）

整体结构自运行整个js源码都在这个自运行函数当中，初步感觉这是vue响应式原因（function（global,factory）{}）()源码当中的方法学习var str ="测试方法" function isUndef (v) { return v === undefined || v === null}function isDef (v) { return v !== undefined && v !== null}function isTrue

2021-05-11 14:05:26 137

原创 Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

使用sass时报错原因：node-sass依赖包的版本过高，说是node-sass版本是5.0需要的是4.0解决办法将node-sass的依赖包降低版本，打开package.json文件，将其中的"devDependencies": {"node-sass":"^5.x.x"}直接手动修改为"node-sass":"^4.14.1"就可以了...

2021-05-07 14:17:12 1062

原创 vue当中element-ui的引入

1.下载element-uinpm i -S element-ui2.在main.js当中引入import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)就可以使用了，如果报错就顺着element-ui的css文件引入路径看一下，我出现过两次错误都是css文件引入的不对...

2021-05-07 11:44:42 98

原创 vuex的简单使用

核心state，mutations，actions，getters，modulesstate：存放数据mutations：提供操作state的方法，actions：进行异步请求，getters：相当于计算属性，modules：分割成组件模块使用思路：state：可以直接获取state当中的数据mutations：通过mutaions操作stateactions：发送请求调用mutations当中的方法操作state，getters：监听state的变化使用方法：前置工作：1.下载v

2021-05-07 10:52:15 56

原创 knockout框架

介绍：简称ko采用模式：MVVM模式优点：免费开源，小型轻巧没有任何依赖关系，支持所有主流浏览器，包括ie6与vue对比理解两个框架都采用MVVM模式：M：modle层处理逻辑V：view层视图层VM：沟通V与M层，其实就是双向绑定vue当中有许多的指令，ko当中的一些绑定方法，如果熟悉vue或者agluar可以理解为也是指令，用法相似ko当中的一些绑定方法（可以理解为指令）data-bind="text:变量名"data-bind="html:变量名"data-bind="valu

2021-04-08 16:15:01 581

原创 requirejs

介绍一些requirejs的核心方法config方法config语法requirejs.config({ })它的核心有以下几个(1).baseUrl引入一些js文件比如：requirejs.config({ //当前路径下有一个js文件夹，js文件夹下有一个lib文件夹，lib文件夹下是若干个js文件 baseUrl:"js/lib"})(1-2).path语法：requirejs.config({ baseUrl:"js/lib" path:{ "jquery"

2021-04-08 15:05:40 126

原创 react路由簡易版封裝

一、搭建react腳手架//全局安裝npm install -g create-react-app //局部搭建create-react-app demo生成名爲demo的react腳手架//安裝依賴cd demonpm i下載路由模塊npm i --save react-router-dom二、src文件夾下創建router文件夾（文件夾內創建router.js文件）router.js文件配置如下：import React from 'react'import { Brows

2021-03-30 19:20:04 50

原创 react组件封装

以一个form表单为例，我们现在要封装一个表单这个表单代码如下：import React, { Component } from 'react'export default class formitem extends Component { constructor(props){ super(props) } render() { return ( <div> <for

2021-03-30 11:59:13 309

转载 hooks当中的usememo

useMemouseMemo 缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，应用场景如需要计算的状态import React, { useState, useMemo } from 'react'; function Info(props) { let [personalInfo , setPersonalInfo] = useState({ name: 'kevin kang', gender: 'male' }) function for

2021-03-29 18:13:41 332

原创 hooks当中的useCallback

目的useCallback 的真正目的还是在于缓存了每次渲染时 inline callback 的实例，这样方便配合上子组件的 shouldComponentUpdate 或者 React.memo 起到减少不必要的渲染的作用。需要不断提醒自己注意的是，在大部分 callback 都会是 inline callback 的未来，React.memo 和 React.useCallback 一定记得需要配对使用，缺了一个都可能导致性能不升反“降”，毕竟无意义的浅比较也是要消耗那么一点点点的性能用法fun

2021-03-29 15:52:19 379

vue+ts起手式.md

vue.config.js

空空如也