<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Seven_Amber的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Seven_Amber</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Seven_Amber]]></copyright><item><title><![CDATA[在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/140441767</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/140441767</guid><author>Seven_Amber</author><pubDate>Mon, 15 Jul 2024 16:14:00 +0800</pubDate><description><![CDATA[不管是react还是vue，父级组件与子组件的通信都是通过props来实现的，在vue中父组件的props遵循的是单向数据流，用官方的话说就是，父级的props的更新会向下流动到子组件中，反之则不行。比如，在父组件中有一个列表，双击其中一个元素进行编辑，该元素的数据作为props传递给一个子组件，在子组件中需要对该数据进行编辑，你会发现如上所说，编辑后父组件的值也发生了变化。而如果是在堆中重新分配内存，拥有不同的地址，但是值是一样的，复制后的对象与原来的对象是完全隔离，互不影响，为。]]></description><category></category></item><item><title><![CDATA[vue3+TS前端JS实现 搜索关键词变红]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/133026594</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/133026594</guid><author>Seven_Amber</author><pubDate>Tue, 19 Sep 2023 14:11:34 +0800</pubDate><description><![CDATA[但是实际使用中发现，对于汉字和数字是没有问题的，但是如果有字母就会出现问题。原因：第二次判断的时候，替换的html代码里面的字母也做了识别和标红替换。1.只有汉字和数字的时候：匹配正常。2.当有字母的时候：异常替换。]]></description><category></category></item><item><title><![CDATA[弹窗页面el-popover的样式以及表头背景图片设置]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/131915628</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/131915628</guid><author>Seven_Amber</author><pubDate>Tue, 25 Jul 2023 13:22:20 +0800</pubDate><description><![CDATA[【代码】弹窗页面el-popover的样式以及表头背景图片设置。]]></description><category></category></item><item><title><![CDATA[Kafka 基本介绍]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/112847243</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/112847243</guid><author>Seven_Amber</author><pubDate>Tue, 19 Jan 2021 17:07:33 +0800</pubDate><description><![CDATA[源自小伙伴的分享，我本身也不会使用这个东西，但是通过她的介绍，对Kafka有一个简单的了解，基于此做一个整理。

1. 什么是Kafka？

Kafka是一个分布式、分区的、多副本的、多订阅者，基于zookeeper协调的分布式日志系统（也可以当做MQ系统），常见可以用于web/nginx日志、访问日志，消息服务等等。主要应用场景是：日志收集系统和消息系统。

消息队列(MQ)，是一种应用程序对应用程序的通信方法。应用程序通过写和检索出入列队的方式针对应用程序的数据(消息)来通信，而无需专用连接来链接它们。]]></description><category></category></item><item><title><![CDATA[【ES6知识整理】变量块级作用域绑定]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/112846788</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/112846788</guid><author>Seven_Amber</author><pubDate>Tue, 19 Jan 2021 16:49:52 +0800</pubDate><description><![CDATA[ECMAScript 是 JavaScript 的语法规则，定义了JS的核心语言特性。ECMAScript 6 简称 ES6 是 ECMAScript 的第六版本。

变量块级作用域绑定：

在函数作用域和全局作用域中Var声明的变量，无论在哪里声明，都会被当成在当前作用域顶部声明的变量（声明提升到顶部，初始化操作依旧停留在原处），这就是变量提升机制。
	Var声明的变量在作用域任何地方都可以访问，但是它初始化的值只在对应的块内可以拿到，其他地方可以访问变量，但值为undefined，即可以访问该变量对其.]]></description><category></category></item><item><title><![CDATA[element UI 自定义校验规则写法]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/112304892</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/112304892</guid><author>Seven_Amber</author><pubDate>Thu, 07 Jan 2021 11:01:04 +0800</pubDate><description><![CDATA[例： 校验 number(22,12) 类型 的 必填数据。【ps：好像可以改成接收参数，把整数、小数位数作为入参就可以通用了，回头再看吧，先记录到这儿。如有错误，欢迎指正】


&lt;template&gt;

&lt;/template&gt;

&lt;script&gt;
export default {
  data () {
    let numSpValid = (rule,value,callback)=&gt;{
      if(value){
        const inte.]]></description><category></category></item><item><title><![CDATA[vue-cli（vue脚手架）搭建教程]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/106854738</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/106854738</guid><author>Seven_Amber</author><pubDate>Fri, 19 Jun 2020 13:42:54 +0800</pubDate><description><![CDATA[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中输入...]]></description><category></category></item><item><title><![CDATA[切换npm 源]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/106691690</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/106691690</guid><author>Seven_Amber</author><pubDate>Thu, 11 Jun 2020 16:30:48 +0800</pubDate><description><![CDATA[由于网络原因，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.]]></description><category></category></item><item><title><![CDATA[父子组件单双向传值以及生命周期的例子分析]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/104935418</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/104935418</guid><author>Seven_Amber</author><pubDate>Wed, 18 Mar 2020 00:25:26 +0800</pubDate><description><![CDATA[通过实际的例子来看理解的更透彻：


&lt;div id="app"&gt;
    &lt;br/&gt;&lt;br/&gt; 父到子单向绑定：
    &lt;hr/&gt; {{ message }}
    &lt;br/&gt;
    &lt;my-component :title="message"&gt;&lt;/my-component&gt;
    &lt;br/&gt...]]></description><category></category></item><item><title><![CDATA[Vue之工程篇【笔记】]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/104820810</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/104820810</guid><author>Seven_Amber</author><pubDate>Thu, 12 Mar 2020 17:22:58 +0800</pubDate><description><![CDATA[前端工程化与webpack

1.代码合并和压缩

2.css预处理：less、sass、stylus

3.生成雪碧图 CSS Sprite

4.RS6转ES5

5.模块化



webpack处理模块的依赖关系并进行打包。

应用场景：

SPA-Single Page Applicaton



无具体名称，可任意自定义名称的模块：







Code：
安装webpack与w...]]></description><category></category></item><item><title><![CDATA[Vue之组件篇【笔记】]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/104772819</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/104772819</guid><author>Seven_Amber</author><pubDate>Tue, 10 Mar 2020 13:40:43 +0800</pubDate><description><![CDATA[vue组件的常用内容总结。




]]></description><category></category></item><item><title><![CDATA[在input框加图标]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/104699536</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/104699536</guid><author>Seven_Amber</author><pubDate>Fri, 06 Mar 2020 16:58:43 +0800</pubDate><description><![CDATA[&lt;el-form ref="form" :model="form"&gt;
 &lt;el-input v-model="form.name" placeholder="请输入名称"
      suffix-icon="el-icon-search"&gt;&lt;/el-input&gt;
&lt;/el-form&gt;
// suffix-icon 在搜索框后加入图...]]></description><category></category></item><item><title><![CDATA[element-ui表格table、抽屉drawer涉及的部分样式修改]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/104698703</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/104698703</guid><author>Seven_Amber</author><pubDate>Fri, 06 Mar 2020 16:34:04 +0800</pubDate><description><![CDATA[//表格//element-ui的table改变选中行背景色

/deep/.el-table__bodytr.current-row&gt;td{
background-color:#F0F7FF!important;
}

//表格//element-ui的table改变偶数行背景色

/deep/.el-table--striped.el-table__bodyt...]]></description><category></category></item><item><title><![CDATA[echars各种图表]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/104698605</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/104698605</guid><author>Seven_Amber</author><pubDate>Fri, 06 Mar 2020 16:25:30 +0800</pubDate><description><![CDATA[图表vue文件：



        &lt;div class="content"&gt;
            &lt;div class="tit"&gt;
                &lt;h1&gt;数据统计&lt;/h1&gt;
                &lt;span&gt;Data statistics&lt;/span&gt;
            &lt;...]]></description><category></category></item><item><title><![CDATA[Element-UI动态生成表单【包含字典翻译，旧值对比，但绑定动态表单验证待补充】]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/104698170</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/104698170</guid><author>Seven_Amber</author><pubDate>Fri, 06 Mar 2020 16:16:19 +0800</pubDate><description><![CDATA[控件类型：

    T:文本输入， TA：TextArea，S:下拉选，D:日期控件，N:数字输入，C:复选，R:单选，SW：开关

vue文件：


          &lt;el-form
            v-if="formData.length &gt; 0"
            ref="config"
            :model="params...]]></description><category></category></item><item><title><![CDATA[element-UI动态生成表格【带分页，以及字典翻译】]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/104696138</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/104696138</guid><author>Seven_Amber</author><pubDate>Fri, 06 Mar 2020 15:02:57 +0800</pubDate><description><![CDATA[动态生成表格

vue文件：



            &lt;!-- 表格 --&gt;
            &lt;el-table style="width: 100%" border :data="tableData"&gt;
              &lt;template v-for="(item,index) in tableHead"&gt;
             ...]]></description><category></category></item><item><title><![CDATA[vue深入了解组件]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/102481668</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/102481668</guid><author>Seven_Amber</author><pubDate>Wed, 23 Oct 2019 11:24:05 +0800</pubDate><description><![CDATA[1.当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，推荐遵循 W3C规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。

定义组件名的方式有两种：

使用 kebab-case(短横线分隔命名)


Vue.component('my-component-name', { /* ... */ })

当使用...]]></description><category></category></item><item><title><![CDATA[同步（Synchronous）和异步（Asynchronous）的概念以及ajax]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/102579582</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/102579582</guid><author>Seven_Amber</author><pubDate>Wed, 23 Oct 2019 11:23:23 +0800</pubDate><description><![CDATA[web项目中的同步与异步

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

Java代码中的同步和异步

我觉得同步和异步可以用来形容一次方法调用。同步...]]></description><category></category></item><item><title><![CDATA[vue基础]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/102373279</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/102373279</guid><author>Seven_Amber</author><pubDate>Thu, 10 Oct 2019 14:24:19 +0800</pubDate><description><![CDATA[1.当一个 Vue 实例被创建时，它将data对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于data中的属性才是响应式的。

2.不要在选项属性或回调上使用箭头函数，比如created: () =&gt; console.log(this....]]></description><category></category></item><item><title><![CDATA[VUE的事件修饰符总结]]></title><link>https://blog.youkuaiyun.com/Seven_Amber/article/details/102461038</link><guid>https://blog.youkuaiyun.com/Seven_Amber/article/details/102461038</guid><author>Seven_Amber</author><pubDate>Wed, 09 Oct 2019 16:48:51 +0800</pubDate><description><![CDATA[.once

是将事件设置为只执行一次。如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件不再阻止。


&lt;div v-on:click.once="alert(1)"&gt;
    只能执行一次，再次点击不会起作用//无once每次点击都可执行
&lt;/div&gt;

&lt;a href="https://www.baidu.com"...]]></description><category></category></item></channel></rss>