- 博客(108)
- 资源 (12)
- 收藏
- 关注
原创 jQuery(2)
用户自己给元素添加的属性,我们称为自定义属性。比如给 div 添加 index =“1”。语法 注意:attr() 除了普通属性操作,更适合操作自定义属性。(该方法也可以获取 H5 自定义属性)
2022-10-03 16:45:35
5328
原创 使用phpStudy显示3306端口被占用,该怎么办?
当使用phpStudy进行数据库的导入时,提示3306端口被占用,数据不能成功导入
2022-10-03 16:19:28
12367
1
原创 jQuery(1)
JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。 常见的JavaScript 库:jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等,这些库都是对原生 JavaScript 的封装,内部都是用 JavaScript 实现的,我们主要学习的是 jQuery。 jQuery总体概况如下 :jQu
2022-06-28 21:09:49
5288
原创 React 组件基础
2.3 抽离为独立 JS 文件组件作为一个独立的个体,一般都会放到一个单独的 JS 文件中1.创建Hello.js2.在 Hello.js 中导入React3.创建组件(函数或 类)4.在 Hello.js 中导出该组件5.在 index.js 中导入 Hello 组件6.渲染组件3. React 事件处理 3.1 事件绑定React 事件绑定语法与 DOM 事件语法相似语法:on+事件名称={事件处理程序},比如:onClick=
2022-06-12 15:16:54
857
原创 React中的JSX
JSX 是 JavaScript XML 的简写,表示在 JavaScript 代码中写 XML(HTML) 格式的代码。优势:声明式语法更加直观、与HTML结构相同,降低了学习成本、提升开发效率JSX 是 React 的核心内容。 1. JSX 不是标准的 ECMAScript 语法,它是 ECMAScript 的语法扩展。 2. 需要使用 babel 编译处理后,才能在浏览器环境中使用。 3.create-react-app 脚手架中已经默认有该配置,无需手动配置。
2022-06-08 21:37:58
1281
原创 React 基础
React 是一个用于构建用户界面的 JavaScript 库。用户界面:HTML页面(前端)React 主要用来写HTML页面,或构建Web应用如果从 MVC 的角度来看,React 仅仅是视图层(V),也就是只负责视图的渲染,而并非提供了 完整的 M 和 C 的功能。React 起源于 Facebook 的内部项目,后又用来架设 Instagram 的网站,并于 2013 年 5 月开源 你只需要描述 UI(HTML)看起来是什么样,就跟写HTML一样 React 负责渲染 UI,并在数据变化时更新 .
2022-06-07 13:31:17
574
1
原创 全局配置axios、axios 拦截器 和 proxy 跨域代理
1. 在 vue3 的项目中全局配置axios2. 在 vue2 的项目中全局配置 axios需要在main.js 入口文件中,通过Vue 构造函数的prototype 原型对象全局配置 axios:3. 什么是拦截器拦截器(英文:Interceptors)会在每次发起 ajax 请求和得到响应的时候自动被触发。应用场景:① Token 身份认证② Loading 效果③ etc…4. 配置请求拦截器通过 axios.intercepto...
2022-05-19 18:57:08
5968
原创 vue组件库(Element UI)
目录1. 什么是 vue 组件库2. vue 组件库和 bootstrap 的区别3. 最常用的 vue 组件库4. Element UI4.1在 vue2 的项目中安装 element-ui4.2 引入 element-ui4.3 完整引入4.4 按需引入步骤1,安装babel-plugin-component:编辑步骤2,修改根目录下的babel.config.js 配置文件,新增plugins 节点如下:编辑步骤3,如果你只希望引入部分...
2022-05-19 11:58:56
1795
原创 vue中的自定义事件 和 组件上的 v-model
目录1. 什么是自定义事件2. 自定义事件的 3 个使用步骤2.1 声明自定义事件2.2 触发自定义事件2.3 监听自定义事件3. 自定义事件传参4. 组件上的 v-model1. 为什么需要在组件上使用 v-model2. 在组件上使用 v-model 的步骤5.任务列表案例1. 案例效果编辑2. 用到的知识点3. 整体实现步骤6. 总结1. 什么是自定义事件在封装组件时,为了让组件的使用者可以监听到组件内状态的变化,...
2022-05-18 12:40:46
1124
原创 vite的基本使用
1. 创建 vite 的项目按照顺序执行如下的命令,即可基于vite 创建vue 3.x 的工程化项目:2.梳理项目的结构使用vite 创建的项目结构如下:其中:node_modules 目录用来存放第三方依赖包public 是公共的静态资源目录src 是项目的源代码目录(程序员写的所有代码都要放在此目录下).gitignore 是 Git 的忽略文件index.html 是 SPA 单页面应用程序中唯一的HTML 页面package.json 是项目..
2022-05-15 17:34:46
15163
3
原创 在 Windows 系统下,如何将“使用VSCode打开”添加至鼠标右键菜单栏
出现的问题:在使用 VScode编辑器 进行日常的学习或项目的开发时,常常因为鼠标右键菜单栏没有 “使用VSCode打开”,而要将要打开的文件进行拖拽到 VScode编辑器打开,或者在 VScode编辑器 中进行文件的打开;如果将“使用VSCode打开”添加至鼠标右键菜单栏,可以提高开发效率;为什么有人默认有Open with Code(右键快捷方式)呢?在 Windows上面安装Visual Studio Code编辑器后,由于安装的时候忘记勾选等原因,没有将Open wit...
2022-05-13 18:17:04
623
2
原创 ESLint 中的“ space-before-function-paren ”相关报错及其解决方案
优快云话题挑战赛第1期活动详情地址:优快云参赛话题:前端学习记录话题描述:记录前端学习过程中的某个知识点、解决方案等等目录出现的问题及其报错:报错原因:解决方案:方案一:方案二:方案三:space-before-function-paren 规则:规则细节选项“always”“never”{"anonymous": "always", "named": "never", "asyncArrow": "always"}{"an...
2022-05-12 18:04:07
11792
1
原创 在 vue eslint 报错 error “Component name “*****“ should always be multi-word”,该怎么办?
出现的问题:在 vue-cli 创建的项目中,创建文件并命名后,会报“Component name "*****" should always be multi-word”报错;报错截图如下:Component name "******" should always be multi-word.eslintvue/multi-word-component-names报错的原因:在组件命名的时候不够规范,根据 ESLint 官方风格指南,除了根组件(A..........
2022-05-09 21:42:15
123310
36
原创 当在 终端 中用 npm 安装 Vant 组件库时,发生“npm ERR code ERESOLVE ;npm ERRERESOLVE could not resolve;”报错时,该怎么办?
出现的问题:当在 VScode 中用 npm安装 Vant 组件库时,发生 npm ERR! code ERESOLVE;npm ERR! ERESOLVE could not resolve;报错时,例如:PS C:\Users\86136\Desktop\前端基础资料\Vue2\exam\demo-toutiao1> npm i vant@latest-v2npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm .
2022-05-09 16:25:09
32618
4
原创 在使用 VScode 进行代码格式化后,保存发现代码又变乱了,怎么办?
出现的问题:在用 VScode 格式已经写好的代码时,遇到 如下状况:保存代码的时候代码被格式化后,然后格式就变乱了(只要保存,格式就被打乱)解决方案:在使用 VScode 进行代码格式化时,已经检查过 ESLint、Prettier - Code formatter 以及 setting.json 配置文件都没有问题(或者怎么修改,怎么在 VScode 设置都没有用时),这时检查一下自己在 VScode 中有没有安装叫 JS-CSS-HTML Formatter 的插件,把这个插件
2022-05-08 21:13:03
11158
6
原创 案例:后台管理案例(VUE路由案例)
1. 素材下载:练习资料素材上传到如下链接,需要的自行下载:案例:后台管理系统(VUE路由)素材https://download.youkuaiyun.com/download/qq_57587705/853208252. 案例效果3. 案例用到的知识点⚫ 命名路由⚫ 路由重定向⚫ 导航守卫⚫嵌套路由⚫ 动态路由匹配⚫ 编程式导航4. 案例各个部分的实例代码(这里只提供修改的代码)项目目录:路由模块index.js部分:import Vu..
2022-05-08 16:12:48
2864
5
原创 CSS 盒子模型
页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面.1.1 看透网页布局的本质网页布局其实就是每一个大的盒子包小的盒子,然后一点点堆积起来,最后得以将网页搭建起来。网页布局过程:1. 先准备好相关的网页元素,网页元素基本都是盒子 Box 。2. 利用 CSS 设置好盒子样式,然后摆放到相应位置。3. 往盒子里面装内容.网页布局的核心本质: 就是利用 CSS 摆盒子。1.2 盒子模型(Box Model)组成.
2022-05-07 16:38:13
448
原创 vue-router 的高级用法
1. 路由重定向路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C ,从而展示特定的组件页面。通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便地设置路由的重定向:2. 嵌套路由通过路由实现组件的嵌套展示,叫做嵌套路由。点击父级路由链接显示模板内容① 模板内容中又有子级路由链接② 点击子级路由链接显示子级模板内容3.声明子路由链接和子路由占位符在 About.vue 组件中,声明 tab1 和...
2022-05-06 20:29:41
974
原创 vue-router 的基本使用
1. 什么是 vue-routervue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址:https://router.vuejs.org/zh/https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位...
2022-05-05 18:04:56
924
3
原创 前端vue路由的概念与原理
1. 什么是路由路由(英文:router)就是对应关系。2. SPA 与前端路由SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。此时,不同组件之间的切换需要通过前端路由来实现。结论:在 SPA 项目中,不同功能之间的切换,要依赖于前端路由来完成!3. 什么是前端路由通俗易懂的概念:Hash 地址与组件之间的对应关系。Hash地址就是在URL中从#开始到后面的地址就是Hash地址例如:如下的..
2022-05-05 17:53:47
140
原创 在VScode中配置ESLint和prettier插件
1、ESLint工具介绍可组装的JavaScript和JSX检查工具用来团队开发整顿代码的风格(例如代码后面是否加“ ;”,代码前使用4个空格,还是两个空格或是一个Tab键)使用方法查阅官方网址ESLint官方文档http://eslint.cn/2、在VScode中配置ESLint工具首先在VScode中搜索tabsize在VScode中搜索format3、创建带有ESLint工具 的Vue项目找到需要创建项目的根目录......
2022-05-04 23:48:55
10759
2
原创 vue自定义指令
1. 什么是自定义指令vue 官方提供了v-text、v-for、v-model、v-if 等常用的指令。除此之外vue 还允许开发者自定义指令。2. 自定义指令的分类vue 中的自定义指令分为两类,分别是:私有自定义指令全局自定义指令3. 私有自定义指令在每个vue 组件中,可以在directives 节点下声明私有自定义指令。示例代码如下:4. 使用自定义指令在使用自定义指令时,需要加上v- 前缀。示例代码如下:5. 为自定义指令动态绑定参数值.
2022-05-04 22:20:59
22239
原创 CSS 三大特性及注释
1. CSS 的三大特性CSS 有三个非常重要的三个特性:层叠性、继承性、优先级。1.1 层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠CSS 层叠性口诀:长江后浪推前浪,前浪死在沙滩上。1.2 继承性现实中的继承: 我们继承了父亲的姓CSS中的继承: 子标签会继承父标签的某些样式,如文本颜色和.
2022-05-01 18:15:09
471
原创 VUE的插槽
1. 什么是插槽插槽(slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间,为用户预留的内容的占位符。2. 体验插槽的基础用法声明一个插槽区域vue 官方规定:每一个 slot 插槽,都要有一个 name 名称如果省略了 slot 的 name 属性,则有一个默认名称叫做 default在封装组件时,可以通过 <slot> 元素定义插槽,从而为用户预留内容占位符。示例...
2022-05-01 15:43:24
29967
1
原创 vue动态组件
1. 什么是动态组件动态组件指的是动态切换组件的显示与隐藏。2. 如何实现动态组件渲染vue 提供了一个内置的 <component> 组件,专门用来实现动态组件的渲染。示例代码如下:3. 使用 keep-alive 保持状态默认情况下,切换动态组件时无法保持组件的状态。此时可以使用vue 内置的 <keep-alive> 组件保持动态组 件的状态。示例代码如下:4. keep-alive 对应的生命周期函数当组件被缓存时,会自动触发...
2022-05-01 13:46:06
8331
原创 “Property or method “***“ is not defined on the instance but referenced during render.”报错的原因及解决方案
报错问题:在使用vue-cli运行项目的过程中,在VScode中不报错,但在浏览器调试工具中发出[Vue warn]: Property or method "pic" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by in.
2022-04-29 14:04:53
188936
4
原创 案例:五彩导航
案例效果:这里例举两个,其他同理案例分析:1.链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换.2.里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码.3.链接里面需要设置背景图片.因此需要用到背景的相关属性设置.4.鼠标经过变化背景图片,因此需要用到链接伪类选择器.代码示例:<!DOCTYPE html><html lang="en"><head> <met...
2022-04-26 15:22:13
664
原创 CSS 的背景
通过 CSS 背景属性,可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。3.1 背景颜色background-color 属性定义了元素的背景颜色。background-color:颜色值;一般情况下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色。background-color:transparent;3.2 背景图片background-image 属性描述了元素的.
2022-04-26 15:16:20
290
原创 案例:购物车案例(vue组件总结)
1. 案例效果2. 实现步骤① 初始化项目基本结构② 封装MyHeader 组件③ 基于axios 请求商品列表数据( GET 请求,地址为 https://www.escook.cn/api/cart)④ 封装MyFooter 组件⑤ 封装MyGoods 组件⑥ 封装MyCounter 组件3. 完整代码:项目目录:main.js部分:import Vue from 'vue'import App from './App.vue'...
2022-04-25 14:20:05
2631
原创 ref 引用
ref 用来辅助开发者在不依赖于jQuery 的情况下,获取DOM 元素或组件的引用。每个 vue 的组件实例上,都包含一个$refs 对象,里面存储着对应的DOM 元素或组件的引用。默认情况下, 组件的$refs 指向一个空对象。
2022-04-24 21:35:28
368
原创 vue组件之间的数据共享
1. 组件之间的关系在项目开发中,组件之间的最常见的关系分为如下两种:① 父子关系② 兄弟关系2. 父子组件之间的数据共享父子组件之间的数据共享又分为:① 父 -> 子共享数据② 子 -> 父共享数据2.1 父组件向子组件共享数据父组件向子组件共享数据需要使用自定义属性。示例代码如下:2.2 子组件向父组件共享数据子组件向父组件共享数据使用自定义事件。示例代码如下:3. 兄弟组件之间的数据共享在 vue2.x 中,兄...
2022-04-24 21:11:53
2326
原创 组件的生命周期
1. 生命周期 & 生命周期函数生命周期(Life Cycle)是指一个组件从创建 -> 运行-> 销毁的整个阶段,强调的是一个时间段。 生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。注意:生命周期强调的是时间段,生命周期函数强调的是时间点。2. 组件生命周期函数的分类组件生命周期函数共有三个阶段:组件生命周期的第 1 个阶段:组件创建阶段组件生命周期的第 2 个阶段:组件运行阶段组件生命周期的第 3 个阶段:组件
2022-04-24 17:11:29
5499
原创 单轴滑轨实验台实现的运动控制(2)
一、实验室名称第一实训楼214二、实验目的1、熟悉单轴滑轨实验台的编程;2、熟悉单轴滑轨实验台的接线;3、编程实现单轴滑轨实验台的运动控制。三、实验内容1、实现单轴滑轨实验台正向运动、反向运动;2、实现单轴滑轨实验台正向、反向、高速、低速运动;3、实现单轴滑轨实验台实现人为控制正向运动、反向运动四、实验器材(设备、元器件)(一)单轴滑轨;(二)步进电机控制器;(三)步进电机驱动器。五、实验步骤(一)根据实验指导书,先完成单轴滑轨实验台的接线具体
2022-04-24 11:17:23
1095
原创 单轴滑轨实验台实现的运动控制(1)
一、实验室名称第一实训楼214二、实验目的1、熟悉单轴滑轨实验台的功能;2、熟悉单轴滑轨实验台的构成;3、熟悉单轴滑轨实验台的接线;4、熟悉单轴滑轨实验台的编程。三、实验内容1、单轴滑轨实验台的功能和接线端子功能:两相步进电机驱动蜗杆,带动滑块运动。接线:2、步进电机驱动器的功能和接线端子功能:驱动步进电机,进而驱动蜗杆,带动滑块运动。接线:3、步进电机控制器的功能和接线端子功能:编程经驱动器驱动步进电机,进而驱动蜗杆,带动滑.
2022-04-24 11:08:59
1505
原创 鼠标右键发现“新建功能菜单”不见了的解决方案
出现的问题:有的人在重装系统后发现右键单击桌面或其他任意空白地方发现,在弹出的对话框中没有“新建文件夹选项",这该怎么办呢?下面为大家介绍一种常用的解决方法解决方案: 第一步:启动“运行”:按着键盘上的“Win”+“R键”,弹出”运行“对话框。第二步:打开注册表:输入 regedit ,点击“确定”。弹出”注册表编辑器”。第三步:依次展开“HKEY_CLASSES_ROOT\Directory\Background\shellex\ContextMenuHandlers\N.
2022-04-23 20:07:59
5623
6
原创 在VScode中配置@路径提示
配置原因:在使用vue-cli开发过程中,由于在输入路径的时候没有提示,既影响开发的速度,又无法判断输入的路径是否正确,因此我们可以在vscode中配置@路径提示配置方法:1、在使用webpack工具进行项目的开发时(目前已经很少用到)@默认指向的就是 src目录这个配置的意思就是 @ 代表的就是 src这个目录在webpack.config.js文件中配置如下程序module.exports ={resolve: { alias: { //..
2022-04-23 10:45:29
12609
6
原创 vue 组件
1. 什么是组件化开发组件化开发指的是:根据封装的思想,把页面上可重用的UI 结构封装为组件,从而方便项目的开发和维护。2. vue 中的组件化开发vue 是一个支持组件化开发的前端框架。vue 中规定:组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。3. vue 组件的三个组成部分每个 .vue 组件都由 3 部分构成,分别是:template -> 组件的模板结构script -> 组件的JavaScrip.
2022-04-22 20:52:31
1876
原创 “ ‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序或批处理文件”的报错解决方案 ”
出现的问题or报错:使用vue-cli(脚手架)创建的项目在npm run serve运行时出现“'vue-cli-service' 不是内部或外部命令,也不是可运行的程序或批处理文件”的报错时,大概是由于调用了未安装的包(其他相似的报错也可以使用如下解决方案)相似的报错例如:' ********* '不是内部或外部命令,也不是可运行的程序或批处理文件解决方案:第一步:将node_module文件夹删除(如果没有则直接第二步)第二步: 在后台运行npm ins..
2022-04-22 19:10:41
137588
16
原创 Conflict: Multiple assets emit different content to the same filename index.html报错解决方案
出现的问题or报错当使用vue-cli(脚手架)创建项目后,并用npm run serve运行项目过程中,出现Conflict: Multiple assets emit different content to the same filename index.html的报错,原因可能是打包时重名了,那么该如何解决?解决方案如下:点击两次ctrl+c将报错项目停掉终止批处理操作吗(Y/N)? ^C第一步:把index.html重命名为index.ejsindex.
2022-04-21 19:45:04
43580
32
基于三菱PLC的全自动洗衣机算法设计材料yuanma(Automation).zip
2022-12-01
案例:后台管理系统(VUE路由案例)素材.zip
2022-05-08
变频器控制技术大作业题目.pdf
2022-04-06
基于三菱PLC的全自动洗衣机控制系统设计.pdf
2022-04-06
电子人体脉搏计的设计报告
2022-04-03
基于Python+Open CV的手势识别算法设计源代码材料
2022-04-03
基于Python+Open CV的手势识别算法设计
2022-04-03
mysql-installer-community-8.0.28.0社区版安装程序
2022-04-02
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人