黑暗中跳舞的月亮-优快云博客

转载在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考

不管是react还是vue，父级组件与子组件的通信都是通过props来实现的，在vue中父组件的props遵循的是单向数据流，用官方的话说就是，父级的props的更新会向下流动到子组件中，反之则不行。比如，在父组件中有一个列表，双击其中一个元素进行编辑，该元素的数据作为props传递给一个子组件，在子组件中需要对该数据进行编辑，你会发现如上所说，编辑后父组件的值也发生了变化。而如果是在堆中重新分配内存，拥有不同的地址，但是值是一样的，复制后的对象与原来的对象是完全隔离，互不影响，为。

2024-07-15 16:14:00 154 1

原创 vue3+TS前端JS实现搜索关键词变红

但是实际使用中发现，对于汉字和数字是没有问题的，但是如果有字母就会出现问题。原因：第二次判断的时候，替换的html代码里面的字母也做了识别和标红替换。1.只有汉字和数字的时候：匹配正常。2.当有字母的时候：异常替换。

2023-09-19 14:11:34 903

原创弹窗页面el-popover的样式以及表头背景图片设置

【代码】弹窗页面el-popover的样式以及表头背景图片设置。

2023-07-25 13:22:20 1045

转载 Kafka 基本介绍

源自小伙伴的分享，我本身也不会使用这个东西，但是通过她的介绍，对Kafka有一个简单的了解，基于此做一个整理。1. 什么是Kafka？Kafka是一个分布式、分区的、多副本的、多订阅者，基于zookeeper协调的分布式日志系统（也可以当做MQ系统），常见可以用于web/nginx日志、访问日志，消息服务等等。主要应用场景是：日志收集系统和消息系统。消息队列(MQ)，是一种应用程序对应用程序的通信方法。应用程序通过写和检索出入列队的方式针对应用程序的数据(消息)来通信，而无需专用连接来链接它们。

2021-01-19 17:07:33 315

原创【ES6知识整理】变量块级作用域绑定

ECMAScript 是 JavaScript 的语法规则，定义了JS的核心语言特性。ECMAScript 6 简称 ES6 是 ECMAScript 的第六版本。变量块级作用域绑定：在函数作用域和全局作用域中Var声明的变量，无论在哪里声明，都会被当成在当前作用域顶部声明的变量（声明提升到顶部，初始化操作依旧停留在原处），这就是变量提升机制。 Var声明的变量在作用域任何地方都可以访问，但是它初始化的值只在对应的块内可以拿到，其他地方可以访问变量，但值为undefined，即可以访问该变量对其.

2021-01-19 16:49:52 276

原创 element UI 自定义校验规则写法

例：校验 number(22,12) 类型的必填数据。【ps：好像可以改成接收参数，把整数、小数位数作为入参就可以通用了，回头再看吧，先记录到这儿。如有错误，欢迎指正】<template></template><script>export default { data () { let numSpValid = (rule,value,callback)=>{ if(value){ const inte.

2021-01-07 11:01:04 768

转载 vue-cli（vue脚手架）搭建教程

1.安装vue-cli①使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入webpack -v，如下图，如果出现相应的版本号，则说明安装成功。注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack webpack-cli -g②全局安装vue-cli，在cmd中输入...

2020-06-19 13:42:54 396

原创切换npm 源

由于网络原因，npm 在国内使用比较慢，建议切换 npm 源到国内镜像。有两种比较方便的方式切换您的 npm 源：nrm[ 建议 ]安装：npm install -g nrm查看所有可用源：nrm ls* npm ----- https://registry.npmjs.org/ cnpm ---- http://r.cnpmjs.org/ taobao -- https://registry.npm.taobao.org/ nj ------ https.

2020-06-11 16:30:48 472

原创父子组件单双向传值以及生命周期的例子分析

通过实际的例子来看理解的更透彻：<div id="app"> <br/><br/> 父到子单向绑定： <hr/> {{ message }} <br/> <my-component :title="message"></my-component> <br/&gt...

2020-03-18 00:25:26 370

原创 Vue之工程篇【笔记】

前端工程化与webpack1.代码合并和压缩2.css预处理：less、sass、stylus3.生成雪碧图 CSS Sprite4.RS6转ES55.模块化webpack处理模块的依赖关系并进行打包。应用场景：SPA-Single Page Applicaton无具体名称，可任意自定义名称的模块：Code：安装webpack与w...

2020-03-12 17:22:58 368

原创 Vue之组件篇【笔记】

vue组件的常用内容总结。

2020-03-10 13:40:43 214

原创在input框加图标

<el-form ref="form" :model="form"> <el-input v-model="form.name" placeholder="请输入名称" suffix-icon="el-icon-search"></el-input></el-form>// suffix-icon 在搜索框后加入图...

2020-03-06 16:58:43 1215

原创 element-ui表格table、抽屉drawer涉及的部分样式修改

//表格//element-ui的table改变选中行背景色/deep/.el-table__bodytr.current-row>td{background-color:#F0F7FF!important;}//表格//element-ui的table改变偶数行背景色/deep/.el-table--striped.el-table__bodyt...

2020-03-06 16:34:04 18665 2

原创 echars各种图表

图表vue文件： <div class="content"> <div class="tit"> <h1>数据统计</h1> <span>Data statistics</span> <...

2020-03-06 16:25:30 334

原创 Element-UI动态生成表单【包含字典翻译，旧值对比，但绑定动态表单验证待补充】

控件类型： T:文本输入， TA：TextArea，S:下拉选，D:日期控件，N:数字输入，C:复选，R:单选，SW：开关vue文件： <el-form v-if="formData.length > 0" ref="config" :model="params...

2020-03-06 16:16:19 1082

原创 element-UI动态生成表格【带分页，以及字典翻译】

动态生成表格vue文件：  <el-table style="width: 100%" border :data="tableData"> <template v-for="(item,index) in tableHead"> ...

2020-03-06 15:02:57 1656 2

原创 vue深入了解组件

1.当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，推荐遵循 W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。定义组件名的方式有两种：使用 kebab-case(短横线分隔命名)Vue.component('my-component-name', { /* ... */ })当使用...

2019-10-23 11:24:05 262

转载同步（Synchronous）和异步（Asynchronous）的概念以及ajax

web项目中的同步与异步在我们平时的web项目开发中会经常听到ajax请求这样一个称呼，在web项目中可以通过js或者jquery发送同步请求又或者异步请求，同步请求呢往往代表着你必须等待这次请求结束并且刷新整个界面之后，你才能进行下一步操作，而异步请求则可以不刷新界面，它会立即返回，界面也可以继续执行其它的操作。Java代码中的同步和异步我觉得同步和异步可以用来形容一次方法调用。同步...

2019-10-23 11:23:23 674

原创 vue基础

1.当一个 Vue 实例被创建时，它将data对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于data中的属性才是响应式的。2.不要在选项属性或回调上使用箭头函数，比如created: () => console.log(this....

2019-10-10 14:24:19 402

原创 VUE的事件修饰符总结

.once是将事件设置为只执行一次。如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件不再阻止。<div v-on:click.once="alert(1)"> 只能执行一次，再次点击不会起作用//无once每次点击都可执行</div><a href="https://www.baidu.com"...

2019-10-09 16:48:51 301

转载在Vue中什么情况用computed，watch，methods理解

根据原本的例子，补充自己的一点想法，整理如下：用一个例子来说明一下吧：<div id="demo"> <p>message: "{{ message }}"</p> <p>reversed message: "{{ reversedMessage }}"</p> <button @click="add">...

2019-10-08 15:37:48 1037

转载处理yarn时报错：The engine "node" is incompatible with this module

yarn install 时报错错误：The engine "node" is incompatible with this module. Expected version "=> ".error Found incompatible module解决：yarn install --ignore-enginesThis is also documented in the co...

2019-09-16 15:38:49 3620

原创 Echars-折线图

<div class="chartdiv bg-white border"> <div v-if="currentData.length===0" class="no-data" style="height:300px;"> 暂无数据 </div> <div v-show="cu...

2019-09-12 13:39:28 252

转载常用正则表达式

前段时间在网上看到别人整理的常用正则表达式，感觉很有用，转载过来分享一下。一、校验数字的表达式1. 数字：^[0-9]*$2. n位的数字：^\d{n}$3. 至少n位的数字：^\d{n,}$4. m-n位的数字：^\d{m,n}$5. 零和非零开头的数字：^(0|[1-9][0-9]*)$6. 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[...

2019-07-27 14:59:10 177

原创移动端常用样式处理

1.ios的disable样式颜色非常浅，可以自己调整//ios-disable样式修改input:disabled,textarea:diabled { -webkit-text-fill-color: #999; -webkit-opacity: 1; color: #999;}...

2019-06-27 10:54:27 305

原创 Vue之Render函数【笔记】-包含【函数化组件】和【使用Render函数开发可排序的表格组件】的实例

虚拟节点：两者的对比：虚拟dom看起来就像一个标准的javaScript对象，它没有真正的dom结构。它是通过一些特定的方法，比如tag,attributes等来描述清楚一个dom的UI状态。Vue2里面的vnode：主要类型：Render的主要方法组件写法：注意:如果Vnode作为组件，或者含有组件的slot，那么V...

2019-06-17 20:07:06 671

原创网页常用样式处理

1.表格文本内容过长，超出隐藏，鼠标悬浮显示详细内容 html ：<el-table-column prop="content" class-name="k-text-flow" label="介绍"> <template slot-scope="scope"> <div class="k-text-flow" :title="s...

2019-06-11 15:57:46 267

原创从Ultra－edit-32中提取出来的常用文件文件头

在开发过程中长会用到，通过文件头来判断该文件究竟是什么文件类型，【仅仅通过后缀名判断，并不安全准确】整理一下常用文件文件头。从Ultra－edit-32中提取：后缀名文件头 jpg FFD8FF png 89504E47 bmp 424D gif 47494638 pdf 255044462D312E...

2019-06-10 11:14:35 1541

转载 elementUI Tree 的用法

2019-02-28 16:26:52 9817 1

转载 input 输入框只能输入数字、字母、汉字等

1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"><br><br>2.只能输入数字,能输小数点.<input onkeyup="...

2019-02-23 10:21:35 1530

原创 VUE使用 iframe 嵌入网页，浏览器报错 x-frame-options deny

项目中用到iframe嵌入网页，然后用到springsecurity就被拦截了浏览器报错Refused to display ‘网址' in a frame because it set 'X-Frame-Options' to 'deny'. 原因是因为springBoot springSecurty使用 X-Frame-Options防止网页被Frame 解决办法把...

2018-10-30 15:10:17 15411

原创 Vue实现动态的选中状态切换效果

HTML中的内容为以下。<ul class="list"> <li v-for="(item,index) in liList" v-on:click="addClass(index)" v-bind:class="{ ischeck:index==current}">{{item.title}}</li>

2018-10-26 13:54:03 10256 3

原创 vue-cli创建的项目的目录结构及说明

一、├── build // 项目构建(webpack)相关代码记忆：（构建） 9个│ ├── build.js // 生产环境构建代码【build.js ，是我们完成项目之后需要运行的，可以将我们的项目文件打包成静态文件，存放在项目根目录的 dist 文件夹中（现在目录里还没有这个文件夹，build的时候会自动...

2018-10-18 10:05:05 474

转载接口测试及常用接口测试工具

首先，什么是接口呢？接口一般来说有两种，一种是程序内部的接口，一种是系统对外的接口。系统对外的接口：比如你要从别的网站或服务器上获取资源或信息，别人肯定不会把数据库共享给你，他只能给你提供一个他们写好的方法来获取数据，你引用他提供的接口就能使用他写好的方法，从而达到数据共享的目的，比如说咱们用的app、网址这些它在进行数据处理的时候都是通过接口来进行调用的。程序内部的接口：方法与方法之间，模块与模...

2018-03-10 13:23:52 1287 1

原创 vue 中使用freeze出现的问题

<template><div> <div class="one"> <h1> {{number}} </h1> </div> <span> {{

2018-03-07 15:05:23 1595 2

转载 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth，offsetLeft等属性介绍

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offs

2017-07-13 12:21:08 714

转载 Makefile经典教程（一个很棒很清晰的讲解）

该篇文章为转载，是对原作者系列文章的总汇加上标注。支持原创，请移步陈浩大神博客：（最原始版本）http://blog.youkuaiyun.com/haoel/article/details/2886我转自一个博主基于原博客的整理版本：http://blog.youkuaiyun.com/ruglcc/article/details/7814546/makefile很重要

2017-04-17 21:24:21 32944 4

原创 MySQL基础

1. mysql安装环境服务器+管理工具2. mysql简介DB2 Oracle SQL Server ManggoDB…….环境LAMPèLinux+apache+mysql+phpWAMP=>window+apache+mysql+php3.DDL:create dropalterDML:insertupdate delete(增删改)DQ

2017-04-09 15:28:49 637

原创 PHP常用数组函数整理

Array_values() ;返回数组中的值Array_keys();返回数组中的所有元素的键名In_array();查找数组中是否存在某个元素Array_search()搜索给定的数组Array_key_exists()检测键名Array_flip()交换数组中的键和值Array_reverse()返回一个单元顺序颠倒的数组Count()统计数组中元素的个数Ar

2017-03-27 19:35:11 549

转载 PHP语言基础（标记、注释、变量、数组、常量、函数)

PHP标记风格1.xml风格（标准风格推荐使用）代码如下:echo"这是xml风格的标记"; ?> xml风格的标记是常用的标记，也是推荐使用的标记，服务器不能禁用，该风格的标记在xml，xhtml中都可以使用。 2.脚本风格代码如下: echo'这是脚本风格的标记'; 3.简短风格代码如下: 注：需要在

2017-03-26 19:12:17 537

空空如也

空空如也