- 博客(38)
- 收藏
- 关注
RSS订阅原创 vue3组件无根节点时v-show=false不生效
vue在子组件上使用v-show时，当组件没有根节点时，v-show=false仍会显示子组件内容
2022-08-25 11:05:31
2269
2
原创 vue组件之间的循环引用
项目场景：点击表格中的一个链接，打开数据详情的drawer，详情页组件同时使用表格这个组件。问题描述机构管理页面包含机构型号/设备号/当前机构/租购类型/配件信息等点击当前机构，跳转到机构详情页，机构详情页里里包含基本信息/功能权限/模式管理/应用管理/设备管理设备管理就是机构管理页面，从而造成组件的循环调用原因分析：—组件的循环嵌套，对应vue官方的处理边界情况-组件之间的循环引用解决方案：方案一：复制一份机构管理页面组件到详情页组件中方案二：异步调用组件component
2022-05-17 17:49:57
1624
原创 ant-design-vue 自定义日期下拉框
项目场景：使用ant-design-vue实现一个自定义日期选择的下拉框，下拉框选项中包含近一周、近一个月、最近一年和自定义日期（如下图）。问题描述这里使用 a-select 组件的 dropdownRender 对下拉菜单进行扩展。当鼠标移入到自定义选项时，展示组件 a-range-picker ，当聚焦在 a-range-picker 时，下方的日期选择出现在左上方！（由图一到图二）原因分析：提示：这里填写问题的分析：a-range-picker 组件定义浮层的容器默认为bod
2022-04-22 15:24:53
3128
原创 react扩展
1. setStatesetState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updater, [callback])------函数式的setSta
2022-02-25 17:07:04
77
原创 react组件跨级通信
组件跨级通信组件关系app ==> A ==> Bapp ==> A ==> D需求：将app中的数据传递到后代组件B中// contentManage.jsimport { createContext } from 'react';export const AppContent = createContext(null)//app.jsimport React from "react";import A from "./components/A";im
2022-02-25 16:38:00
660
原创 01-css模块化
样式局部生效，命名文件为 文件名.module.css引入时作为一个对象使用(类名是对象的item项)//app.jsimport './App.css'import Child from './Child'function App() { return ( <div>app <ul> <li>111</li> <li>222</li> </ul&.
2022-02-09 20:32:41
348
原创 vue组件通信之$attrs与$listeners的使用
组件关系parent组件<template> <div> <!-- <child @method1="handleClick" @input="handleInput" msg="home组件传来的数据msg" a="另一个数据" /> --> <child data1="数据1" data2="数据2" @event="handleEvent" /> </div></template>&
2021-08-31 17:30:54
95
原创 v-bind.sync的使用
v-bind.sync在子组件中我们不能直接修改父组件传过来的prop值，一般情况下通过$emit传递事件，然后在父组件中监听这个事件，再在事件中修改这个prop值。v-bind.sync可以理解为是这种方式的语法糖。在父组件v-bind.sync可以实现props的双向绑定v-bind.sync与v-model的区别？一个组件可以多个属性用.sync修饰符，可以同时"双向绑定多个“prop”，而并不像v-model那样，一个组件只能有一个。v-model针对更多的是最终操作结果，是双
2021-08-31 16:19:43
3386
原创 Windows常用快捷键
Ctrl+H 替换Ctrl+End 将插入点移到文档的结尾Ctrl+Home 将插入点移到文档的开始Ctrl+L; 选中地址 聚焦到地址栏Ctrl+E; 地址栏内容为空，输入内容为关键字，聚焦到地址栏Ctrl+N 新建窗口 记事本下会关闭原来的窗口，新建一个空的Ctrl+Tab 向前遍历选项卡—下一个Ctrl+T 浏览器新建标签Ctrl+W 关闭浏览器当前标签Ctrl+Shift+End 选中从插入点到文档结尾之间的文本Ctrl+Shift+Ho
2021-08-27 14:46:39
119
原创 vue.config.js常用配置
package.jsonvue-cli-service serveES6Vue项目–devServer.proxy代理配置详解const proxy = require('http-proxy-middleware');module.exports = { devServer:{ host: 'localhost',//target host port: 8080, //proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为t.
2021-08-27 14:35:44
229
原创 将本地项目托管到github或码云中
将本地项目托管到github或码云中// 在码云中新建仓库// 1.填写仓库名称(假设叫newStore)// 2.将 使用Reame文件初始化这个仓库 的√ 取消掉// 创建// git 全局配置git config --global user.name "hi518"git config --global user.email "2362391092@qq.com"// 到项目根目录下// 1. shift + 右键 打开PowerShell终端// 2. 检查文件状态,发现有一
2021-04-02 16:18:57
92
原创 JavaScript知识点总结
js1.1 EC(G)，VO，GOEC：执行上下文VO：变量对象GO：全局对象[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oyjPPv86-1617025064455)(C:\Users\尘寰\AppData\Roaming\Typora\typora-user-images\image-20201227083525635.png)]1.1.2 定义变量有var与没有var区别在全局代码中，加var会提升，没有var的不会提升不管加没加var的全局变量
2021-03-29 21:38:40
185
原创 Vue学习链接
vuevue基础知识总结——>一篇搞定vue使用install函数把组件做成插件方便全局调用关于vue中的$符号总结一下（注意下面ES6用法）Vue作用域插槽详解（＜slot＞、v-slot、slot-scope）——>一篇搞定Vue父子组件传值（含实例）vue-routerRouter总结（含生命周期钩子内容）——>一篇搞定vue-router导航守卫，不懂的来vue 路由过渡动效vue路由懒加载及组件懒加载vuexvuex详解总结——>一篇搞定
2021-03-29 21:34:20
52
原创 http等网络协议
DNS解析？DNS：DomainName Server（域名服务器）作用：域名与对应的IP转换的服务器特征：DNS中一张域名与与对应的IP地址的表一个域名对应一个IP地址，一个IP地址可以对应多个域名gTLD：generic Top-LEvel DNS Server 顶级域名服务器为所有.com、.net…后缀做域名解析的服务器输入域名后，首先访问DNS本地服务器。如果有，直接返回IP地址；如果没有，访问根服务器，一般根服务器中找不到，再去.com域服务器中找。找到
2021-03-23 19:47:13
115
原创 js原型与继承
js原型与继承1 原型的初步认识1.1 代码体验原型可以理解为父一级 proto /** * 普通对象 */ let obj = {}; console.log(obj) //__proto__: Object1.4 原型方法与对象方法优先级对象中自己有的用自己的，没有再找原型 /** * 原型方法与对象方法相比较 */ let hi = { show() { console.log
2021-03-23 19:40:11
144
原创 express搭建服务器
01 项目初始化# 01-项目初始化 # 生成 package.json 文件npm init -y# 02-关联远程仓库git init# 03-在项目根目录下创建 .gitignore 文件，此配置文件用于设置哪些文件不用上传到github上02 安装项目依赖# 安装项目依赖npm i express mongoose --save03 新建文件目录# 01-创建 public 文件夹 用于存储客户端所用的样式、脚本、静态文件等# 02-在public文件夹下创建 c
2021-03-23 19:21:34
126
原创 MongoDB数据库操作与mongoose的使用
MongoDB数据库操作# 打开数据库mongod# 连接数据库mongo# 退出连接exit1. 基本命令# 查看显示所有数据库show dbs# 查看当前操作的数据库db# 切换/创建 数据库use 数据库名称use itcast# ------------------------------------------------# 创建集合，添加数据 db.students.insertOne({"name":"Jack"}) # 查看集合 sho
2021-03-23 19:18:58
185
原创 express-配置及使用
起步初始化模板处理路由设计功能请求方法请求路径get参数post参数首页get/students添加学生页面get/students/new处理添加学生请求post/students/newname、age、gender、hobbies编辑页面get/students/editid处理编辑请求post/students/editid、name、age、gender、hobbies处理删除请求get
2021-03-23 19:13:10
675
原创 ajax总结
1 后端基础ajax1.1 URL互联网资源都有一个URL：统一资源定位符 uniform resouce locator资源：网页，图片，视频，程序，链接…htttp://www.baidu.com/phone?name=‘wangcai’&age=100协议：http://IP地址/域名：baidu.com ， www仅仅是前缀baidu.com ，一级域名（我们买的就是这个）www.baidu.com ，二级域名 ，（自己配的）news.baidu.com ，二级域
2021-03-22 15:35:37
147
原创 fs.readdirSync()的使用记录
项目场景：使用nodejs里的fs.readdirSync()读取imgs文件夹下的所有图片文件名。报错：Error: ENOENT: no such file or directory, scandir ‘…/public/img/’问题描述：初步猜测路径格式出错，测试fs.readdirSync(’./’)打印结果：原因分析：fs.readdirSync()应该是从项目根目录下出发开始找的，修改路径名为’./public/img’，应该修改路径名解决方案：fs.readdirS
2021-03-20 14:39:44
2180
原创 VueX使用
VueX五个核心概念：state, getters, mutations, actions, modules。1. state：vuex的基本数据，用来存储变量2. geeter：从基本数据(state)派生的数据，相当于state的计算属性3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state
2020-11-17 01:14:42
60
原创 图片文字对齐
图片文字对齐<!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> .box { width: 600
2020-11-14 21:41:15
77
原创 鼠标cursor、轮廓outline、防止拖拽文本域resize
<!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> /* 鼠标cursor */ /* cursor:d
2020-11-14 21:18:52
149
原创 文本在一行显示
<!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> .box { width: 100px;
2020-11-14 20:51:00
627
原创 盒子模型的外边距塌陷和合并问题及解决方案
<!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> * { margin: 0; pad
2020-11-14 18:08:23
286
原创 清楚浮动
1.额外标签法＜div style="clear:both;">＜/div>//或者下面＜br style="clear:both;" />2.父级添加overflow:hidden;，触发BFC的方式实现清除浮动效果3.:after 案例：百度 淘宝网 网易 .clearfix::after{ content: "."; display: block; height: 0; cl
2020-11-14 15:58:52
124
原创 vue使用install函数把组件做成插件方便全局调用
1.首先新建一个Cmponent.vue文件<template> <div class="toast" v-show="isShow"> <div>{{ message }}</div> </div></template><script>export default { name: "", data() { return { message: "", isSh
2020-11-13 16:42:48
831
1
原创 Array 类型方法总结
Array 类型数组定义： 数据的有序列表。不同点： 与其他语言不同的是，ECMAScript数组的每一项可以保存任何类型的数据。数组大小： ECMAScript数组的大小可以动态调整，即随着数据的增加自动增长。创建数组的基本方式使用Array构造函数。如下面代码：var colors = new Array();var colors = new Array(20);var colors = new Array("red","blue","green");使用数组字面量表示法。数组
2020-11-02 11:14:21
582
原创 时间戳转成时间格式化字符串
如何将时间戳转化成时间格式化字符串？时间戳：1535694719（秒）将时间戳转成Data对象const date = new Date(1535694719* 1000);将data进行格式化，转成对应的字符串一般调用封装好的函数formatDate(date, fmt)showDate(value) { //将时间戳转换成date对象 const date = new Date(value * 1000); //将date进行格式化 return formatDate(date,
2020-10-17 16:36:45
1647
原创 supermall-tabbar切换保留原来位置
tabbar切换保留原来位置一、让home保持原来的状态1.取消路由切换自动销毁（给router-view加keep-alive标签）//App.vue<template><div id="app"> <keep-alive> <router-view/> </keep-alive> <main-tab-bar/></div>2.让Home保持原来的位置离开时，保存一个位置
2020-10-15 15:27:43
74
原创 vue cli2简单配置
vue cli2脚手架的简单配置代码如下（示例）：在项目文件夹下输入命令 vue init webpack vuecli2text（vuecli2text是自己命名的）test> vue init webpack vuecli2text? Project name vuecli2text? Project description test vue cli2? Author ? Vue build standalone ? Install vue-router? No? Us
2020-10-03 21:44:48
637
原创 使用vscode在项目里本地安装webpack进度条不动
项目场景：在学习使用webpack时，发现在vscode当中无法使用npm install 安装相应的东西，并且没有任何错误提示，仅能看到进度条不动的情况。问题描述：vscode执行npm install webpack 进度条不动PS C:\Users\尘寰\Desktop\test> npm install webpack --save-dev[..................] / rollbackFailedOptional: verb npm-session c3a9fa7cd
2020-09-29 16:26:49
771
原创 slot插槽、具名插槽，作用域插槽的使用
文章目录前言一、slot的基本使用1.使用步骤2.图片分析3.运行效果4.代码二、具名插槽的使用1.使用步骤2.图片分析3.对比效果4.相应代码三、作用域插槽的使用1.使用步骤2.图片分析3.对比效果4.相应代码总结前言slot插槽使组件具有扩展性。这部分我们要学习slot的基本使用、具名插槽的使用以及作用域插槽的使用一、slot的基本使用<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换。详细用法，请参考下面教程的链接。slot插槽使
2020-09-28 11:49:47
763
原创 Vue通信（子传父）
子组件向父组件传递数据简单理解：子组件通过触发事件生成自定义函数，父组件通过调用自定义函数去实现相应的方法。第一步子组件模板有触发事件，本例中<button v-for=‘item in categories’ @click=‘btnClick(item)’>；@click='btnClick(item)调用 methods: {btnClick(item){//自定义函数item-click（用于发送）this.$emit(‘item-click’,item)}}第二步
2020-09-26 09:26:26
145
原创 大风车
html+css 大风车制作效果展示相应代码刚学完html和css，做着玩！效果展示相应代码<!DOCTYPE html><html lang="zh_CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>大风车</titl
2020-06-04 19:54:35
276
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人