- 博客(77)
- 收藏
- 关注
RSS订阅原创 scss 预处理器自定义ui框架（bem架构）
在项目中安装sass依赖新建bem.scss文件（内容如下）// 定义值和连接符default;default;default;default;// 可以写混入// $ —— 定义拼接好的类名// #{} —— 使用动态类名或名称.#{$B}{@content;// 内容替换// $ —— 定义父级的类名 （& —— 父级的类名）// 跳出嵌套 —— @at-root{}@at-root{@content// $ —— 定义父级的类名 （& —— 父级的类名）
2023-07-14 15:21:15
626
转载 【干货来了基础+路由】react的知识
一、基础知识点 1.拆分组件、实现静态组件，注意：className、style的写法 2.动态初始化列表，如何确定将数据放在哪个组件的state中？ ——某个组件使用：放在其自身的state中 ——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升） 3.关于父子之间通信： 1.【父组件】给【子组件】传递数据：通过props传递 2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数 4.注意defaultChecked
2021-08-25 22:23:34
173
1
原创 js 实现放大镜功能
js 实现放大镜功能思路：需要两个盒子（big+small），和一个遮罩(mark)，两张图片（’.big img’+’.small img’）随着鼠标的移动，遮罩跟着移动运用知识：根据遮罩的移动，计算大图与小图的比例 ，随之改变大图的top和left值移动到对应的位置上const posi = -(′.bigimg′).width()/('.big img').width()/(′.bigimg′).width()/(’.small img’).width()效果图：上
2021-08-09 12:56:59
154
3
原创 react脚手架创建项目失败---node -e “try{require(‘./postinstall‘)}catch(e){}“
react脚手架创建项目失败正常流程安装reactnpm i creat-react-app -g创建项目create-react-app 项目名下面的报错情况百度了很长时间，试了好几种方法，最后发现是yarn有问题。因为yarn全局安装了，然后在创建项目时它会根据yarn的依赖包进行下载，又由于yarn的版本或者其他依赖包的情况所以要将其卸载npm uninstall yarn -g再进行创建项目create-react-app 项目名...
2021-08-07 09:46:58
5385
1
原创 React的生命周期（面试必问）
React的生命周期两张图带你理解 React的生命周期React的生命周期（旧） class Life extends React.Component{ // 构造器 constructor(props){ console.log('Life构造器---constructor'); super(props) this.state={num:0} } // 计算+1功能 add=()=&g
2021-08-06 17:12:30
8116
6
原创 webpack 模拟vue开发环境配置以及打包体积分析
webpack配置基础vue开发环境在vuecli中，可以去定义webpack的配置，在 vue.config.js 中配置chainWebpack 文档如何自己配置一个vue开发环境前提： 安装好vue 和 vue-router识别vue文件需要安装以下模块yarn add vue-loader vue-template-compiler -Dwebpack.config.jsmodule.exports = { entry: "./src/main.js", output: {
2021-07-28 11:06:08
135
1
原创 webpack 中plugin(插件)的用法
webpack plugin (插件)插件给webpack提供了很多方便的功能，在进行打包时，利用插件可以解决我们的很多问题插件就是普通的nodejs模块，所以使用插件时需要下载，并且在 webpack.config.js 中引入如何使用插件// 具体如何引入需要看对应插件的文档const 插件 = require("插件模块")module.exports = { entry: "", output: { filename: "", path }, plug
2021-07-28 11:01:59
314
转载 webpack里面 loader的作用
loader (识别js外的其他模块)默认webpack只支持js模块，但是webpack打造的概念是“一切皆模块”，想要实现这个概念，就需要使用loader，如果我们引入了weback不支持的模块，则会在打包时报错。因此，我们需要安装相关的loader来解决这些问题module.exports = { ..., module: { rules: [ { test: /\.后缀$/, use: "xxx-loader",
2021-07-28 11:01:04
740
转载 webpack命令 以及 webpack devserver
webpack命令想要有webpack命令，那么我们需要全局安装，但是！！！！如果全局安装无法适应所有的项目，那么我们就可以只在项目中安装，利用package.json中scripts调用对应命令因此，我们要在对应的项目中进行安装npm i webpack --save-dev# 或者yarn add webpack -D同时需要安装 webpack-cli 如果没有安装则自动提示，建议在安装webpack时，同时安装webpack-cli，使用下面命令即可npm i webpack web
2021-07-28 10:59:18
242
转载 了解webpack基础配置
了解webpack基础配置webpackWebpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack改变的是前端的开发模式，使前端可以进行模块化开发，基于ESModule。现在主流的框架开发都基于webpack。entry入口文件设置，只有和入口文件产生模块关联，最终才能被webpack打包module.exports = { // 单入口写法 entry: "./src/main.js", //
2021-07-28 10:57:22
113
原创 导航守卫的内容向你飞奔来了
导航守卫所谓导航守卫，就是在路由跳转时对路由进行拦截，然后改变跳转方向的相关方法路由信息对象组件中获取路由信息对象使用 this.$route ，在导航守卫中有 to , from，这两个分别代表要跳转的路由信息对象，和跳转前的路由信息对象全局前置守卫// router就是new VueRouter()router.beforeEach((to, from, next) => { next() // 如果不写next()则所有都无法正常跳转})next()next是进行路由导
2021-07-25 21:12:04
118
1
原创 嵌套路由又称子路由哦！
嵌套路由嵌套路由又叫子路由，实现相关路由组件在某个路由组件的 router-view 中渲染，而不是在 app 的 router-view 中渲染children嵌套路由的配置使用 children 属性children中的定义方式，和routes一致{ path: "", component: Component, children: [ { path, component } ]}！！！！！！注意！！！！！！子路由的 component 会被
2021-07-25 21:09:43
975
3
原创 Vue的数据响应式原理 (Vue2的原理)
Vue的数据响应式原理 (Vue2的原理)通过相关的方法，实现当数据改变时可以触发一个函数（实现数据改变的监听效果）在vue里实现了一个Observe的构造函数，可以利用该函数，把普通对象中的属性添加getter和setter方法，其中核心的属性就是Object.definProperty。一旦数据改变时，则会触发对应的setter函数，setter函数触发就会告知对应的监听器，监听器监听到之后，触发render函数，重新渲染页面<script> function Observ
2021-07-25 21:06:32
212
1
原创 为什么使用v-for需要加key，key最好不是index
为什么使用v-for需要加key,key最好不是indexvue使用的是虚拟DOM如果在v-for的时候不加key，则当列表发生改变时（增加或删除）无法确定是哪一个改变，就只能重新渲染对应的虚拟DOM列表如果有key值，则可以精确的找到列表中的那一项进行删除，性能更好。为什么用index不好因为index是按顺序进行排序，删除一个后，后面的所有的key值都会发生改变，在一些时候，会出现不可预想的问题diff （vue中利用了diff算法）diff算法的处理方法对操作前后的dom树同一层的节点
2021-07-25 21:06:14
1063
7
原创 虚拟DOM的原理
用一个普通的JS对象模拟一个DOM对象DOM type 标签 document.createElement('标签名') props 属性 document. children 子元素（文本 元素） 插入的父节点.appendChild(子节点) text 文本节点 document.createTextNode("节点内容") attributes: 获取当前元素节点上的所有属性节点虚拟DOM就是用一个普通的JS对象，用虚拟DOM模拟一个真实的DOM的结构，然后通.
2021-07-25 20:56:49
363
原创 数组的高级用法
数组的高级用法 forEach((item, index, arr) => {}) map filter some every reduce find findIndex经常使用的有map filter some find例子const stus = [ { name: "张三", age: 19, sex: '男' },{ name: "李四",
2021-07-13 11:54:06
168
1
原创 json-server对数据的增删改查的封装
在前面的文章中有介绍json-server的安装步骤以及用法今天就来说说json-server对数据的增删改查以及对获取数据axios的封装【前提】我们是在共同的前缀下进行数据的获取，所以我们完全有必要去封装一个共同前缀的方法创建一个utils文件夹，在里面建一个question.js来存这个公共前缀的方法// 引入axios模块import axios from "axios"// 封装公共前缀const getnews = axios.create({ baseURL:"htt
2021-07-13 10:56:41
448
1
原创 Vue 利用markdown 模块 可制作简单的markdown的效果
利用markdown模块 自制效果及属性其中加了一个展示区可看和不可看功能preview步骤 ：搭建好对应的静态样式下载markdown 模块 npm i markdown -S(这里是局部下载)利用@input方法中的ee.target.innerText获取输入的内容markdown.toHtml(获取的内容)----转成markdown格式标签上添加v-html=“html”代码如下markdown 组件<template> <div class="ma
2021-07-11 15:07:21
415
2
原创 vue生命周期（created，mounted具体用于哪些场景）、三种存储的区别
vue生命周期什么是生命周期呢，就好像是人有生老病死一样，vue组件也有从创建到消亡的一系列过程。这个过程就叫做vue的生命周期vue的生命周期可分为三大阶段，每个阶段都有对应的函数，叫做钩子，又被成为钩子函数：挂载（初始化相关属性）beforeCreate:vue实例刚被创建出来，此时还没有初始化好data与methods属性。create：data与methods已经初始化，但是还没有编译模板。–【请求数据】beforeMount：完成了编译，但是还没有挂载到页面中。mounted：已经将
2021-07-11 13:03:50
19744
8
原创 vue-router路由参数获取
路由参数获取意义在哪？获取到url中的参数然后利用参数发起ajax请求，然后获取我们想要的数据什么时候需要使用？如文章详情，商品详情，使用相同的组件，渲染不同的数据，我们就可以通过传递不同的路由参数，获取不同的数据，渲染相同的组件$route当我们使用路由时，vue-router会给我们所有的组件里都添加一个 data 叫 $route ，这个 $route 代表的是我们的路由信息path 路径fullPath 携带参数的完整路径query ?后的查询参数params 动态路由参数
2021-07-06 20:28:43
6872
转载 Postman+JSON-SERVER前端接口测试YYDS
Postmanpostman用来测试我们的接口，在工作中，后台会给我们提供接口文档，我们要使用对应的接口文档进行接口的测试，而一个好的接口测试工具，会让我们在工作中事半功倍。安装安装只需要双击打开安装工具即可，等待几分钟后，桌面会出现postman的快捷方式，点击快捷方式，进入下面的页面可以选择登录 创建免费账户，也可以快速跳过，无登录进入应用测试接口GET请求请求方式选择GET，分别将请求地址、请求参数填入对应的位置，点击send发送既可查看请求结果POST请求请求方式选择POST，
2021-07-06 20:09:10
188
转载 VueCLI 脚手架 安装使用步骤
VueCLIVueCli文档安装@vue/clinpm i -g @vue/cli当我们安装了这个模块后，我们的命令行工具里就会有命令vue如果npm太慢，则直接修改npm的相关源npm config set registry https://registry.npm.taobao.orgyarn config set registry https://registry.npm.taobao.org创建项目想要创建项目需要使用vue命令vue create 项目名如果不喜欢命令
2021-07-01 20:12:21
55
原创 vue组件通信
Vue组件通信可分为三种父向子通信（props）作用：子组件可以获取到父组件中的数据格式：<div id="app"> <!--4. :子组件中props的属性名="父组件中存储相关数据的属性名" --> <chird :book="books"></chird> </div> <template id="chird"> <ul> <!-- 5.对从父组件那里获取的
2021-07-01 20:09:18
120
6
原创 vue实现Cnode具体有axios分页请求 | filters（过滤器）解决时间转秒前 分钟前 小时前 月前 年前
vue实现axios分页请求<body> <div id="app"> <!-- 分类 --> <div class="tabs"> <div :class="['tab-item',{active:activeItemIndex===index}]" v-for="(item,index) in menu" @click="changeIndex(index)" :key="index">
2021-06-30 22:31:53
302
5
原创 vue组件化
组件化开发步骤<div id="app"> <!-- 3.使用构造器 --> <cpm></cpm> </div> <script> // 1.创建组件的构造器 const cpmC=Vue.extend({ template:` <div> <p>怼怼怼，哒哒
2021-06-27 22:11:08
87
4
原创 vue实现购物车全选，总计等功能
一、单价商品的小计整个操作过程是，商品的数量是可以控制的，可增可减，最少为1。并且在数量的变化中，商品的小计也在变化。二、单选选中商品在购物车中，需要选择当前想买的商品，这一功能成为商品的单选，并且在选中商品的同时，总金额会累加上选中的商品总价。三、全选选中商品全选就是一键选中所有商品，然后总金额是所有商品的总价的总和。取消全选有两个方式：一是直接按取消全选，而是取消任何一个商品的选中。四、删除商品代码如下： <style> table {
2021-06-26 13:25:35
6877
2
原创 js掌握高级函数的使用（reduce、filter、map）
js掌握高级函数的使用reducereduce的作用：进行数组求和使用格式：数组名.reduce((preValue,n)=>{ return preValue+n},0)preValue的意思：上一个数 默认的是0n的意思：当下的数代码如下 let num = [10,60,100,456,332,50,90] let sum = num.reduce((preValue,n)=>{ return preValue+n; });
2021-06-24 18:33:14
118
3
原创 Vue指令 v-for遍历、下拉列表、单选框、复选框
4 、v-for遍历4.1 遍历数组中的对象格式：v-for="item in list"里面也可以返回下标格式：v-for="（item.index） in list"item:可以自定义变量这个值，但是里面的 {{item.id}}中的item需要跟自定义的这个值一致<li v-for='item in list'> {{item.id}}---{{item.name}}---{{item.age}} </li> let vue = n
2021-06-22 19:58:42
7895
11
原创 Vue指令 v-on/条件渲染/修饰符
2.v-on作用：事件绑定。格式：v-on:事件类型="函数名称"它也有语法糖的写法：省略v-on：使用@符号代替@事件类型="函数名称"我们需要将事件函数写在vue实例中的method属性中。例子<div id="app"> <button @click="fn">按下我的座驾</button> </div> <script src="./js/vue.min.js"></script> <sc
2021-06-22 19:19:02
337
2
原创 Vue指令 第一期
Vue指令 第一期指定是Vue模板中最常用的一项功能，是以v-开头的自定义标签属性。1.1 v-text想要将data中的数据显示在页面中，除了使用双大括号{{}}来进行插值外，还可以使用v-text{{ message }}new Vue({el:"#app",data : {message : “今天天气不错”}})v-text和插值表达式{{ }}的区别v-text会覆盖元素中原本的内容，插值表达式{{ }}只会替换自己的这个占位符，不会把整个元素内容替换v-text和
2021-06-22 11:58:37
56
原创 入个门Vue
使用步骤：vue的使用可分为两种方法：第一种：传统引入方法，下载vue.js文件，并在页面中引入。第二种：使用vue-cli安装导入使用。刚入门我们使用第一种方式即可，后面再说第二种方法的使用。安装https://www.runoob.com/vue2/vue-install.html点击下载vue.js后，在新打开的页面中，右键选择另存为，选择下载地址即可成功下载。导入Vue框架导入Vue.js<script src="js/vue.js"></script>
2021-06-22 09:59:32
61
原创 git的基础用法
git1.什么是git？git是一个免费的，开源的版本控制软件。2.什么是版本控制？版本控制：一种记录一个或者若干文件状态，内容变化，以便将来查询特定版本修订情况的系统。具体功能：记录文件的所有历史变化。随时可恢复到任何一个历史状态多人开发3.版本控制的软件SVN 集中式 集中式是版本库在中央服务器上，工作时，用的都是自己的电脑，将代码提交到中央服务器，从中央服务器获取新的别人提交的代码。集中式必须联网才能工作，服务器如果挂掉，整个版本控制软件都不可用。Git 分布式
2021-06-15 16:56:23
78
2
原创 来送干货了，jq封装ajax
jq封装ajax的设置步骤 $("#btn").on("click", function () { $.ajax({ //请求方法：post，get等等 type: "post", //请求路径 url: "http://----------", //请求的参数：如果是get请求，会自动拼接。如果是post请求，会自动设置到body中。 data:{ id:$("#---").
2021-06-11 16:50:27
113
1
转载 node解决跨域问题的代码，ajax入门
ajax入门ajax：Web数据交互方式用于：局部刷新页面。使用场景：1.搜索框实时显示结果2.动态加载页面3.列表页面的分页4.表单的服务器端校验ajax优点：不需要任何插件的支持，利用js就可以使用。提高用户的体验。提高web程序的性能。减轻服务器端的宽带压力。使用步骤：1.常见xmlhttprequest对象 let xhr = new XMLHttpRequest();2.调用对象的open方法 xhr.open("get", "http://localhost
2021-06-11 16:01:52
111
3
原创 数据库连接池pool
数据库连接池1、什么是数据库连接池数据库连接池是程序在启动时创建足够多的数据库连接，将这些连接放入一个池子里。由程序动态地进行申请，使用和关闭。2、连接池的作用频繁的创建和关闭连接是非常消耗资源的。作用：负责分配，管理和释放数据库连接。允许程序重复使用现有的同一个数据库连接，而不是重现创建一个，避免了资源的消耗。3、node中使用数据库连接池3.1 安装引入mysql模块cnpm i mysql -S //下载安装在node js文件中引入mysql模块。const mysql = r
2021-06-10 12:22:41
779
4
转载 generator生成器详细步骤，走过路过千万别错过
express-generator生成器可以快速创建一个应用的骨架。1.安装在命令行输入以下指令cnpm i express-generator -g安装后就可以使用express命令了2.创建项目///express 模板引擎（或者其他配置） 项目名称express -e myapp执行完成后会创建一个拥有基础骨架的项目，项目目录如下：.├── app.js //主文件├── bin│ └── www //启动文件├── package.json //项目依赖信息文件├
2021-06-10 09:45:04
595
1
原创 express的模板引擎------ejs
express的模板引擎------ejsejs 模板引擎。下载安装：cnpm i ejs -S添加设置app.set("view engine","ejs") 新建文件夹在app.js同级目录下新建一个views文件夹（名字不可以改，要修改的话需要再添加一条设置。）在view文件夹下新建一个ejs后缀的文件，在里面可以书写HTML内容。响应ejs模板内容 res.render("views里的文件名（不加路径和后缀）",{渲染的变量})不是使用sen
2021-06-09 20:49:50
246
1
原创 用express获取文件
用express获取文件res.sendFile()步骤：安装好express模块 npm i express -S引入express，path模块 require创建express实例创建连接 app.getpath模块作用利用res.sendFile()方法来获取文件__dirname为当前文件的相对路径path.join()用于解决linux,window路径上正反斜杠index.html<!DOCTYPE html><html lang="en
2021-06-09 20:18:21
1297
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人