<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[csdn_Sandy的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/csdn_Sandy</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; csdn_Sandy]]></copyright><item><title><![CDATA[vue—组件通信]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162907650</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162907650</guid><author>csdn_Sandy</author><pubDate>Thu, 23 Jul 2026 14:41:09 +0800</pubDate><description><![CDATA[Vue组件通信方式总结 一、父子组件通信 props/emit：父组件通过props传数据给子组件，子组件通过emit触发事件回调 ref/parent：父组件通过ref访问子组件暴露的方法和属性，子组件通过$parent访问父组件（Vue3不推荐） 二、跨层级组件通信 provide/inject：祖先组件提供数据/方法，后代组件注入使用，适合多级嵌套组件通信 三、任意组件通信 事件总线：通过mitt库实现全局事件中心，支持任意组件间通信 四、状态管理 Vuex：集中式状态管理，包含state、gette]]></description><category></category></item><item><title><![CDATA[vue—编译器]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162842443</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162842443</guid><author>csdn_Sandy</author><pubDate>Mon, 13 Jul 2026 17:33:59 +0800</pubDate><description><![CDATA[拿到Token后，解析器会根据HTML的语法规则（以及Vue扩展的规则），将它们组织成一个树形结构（AST）。AST会清晰的描述出模板的层级关系，每个节点的类型、属性、指令等信息。Vue编译器是Vue框架的核心，它负责把我们熟悉的模板语法转化成高效的Javascript渲染函数，让浏览器能够理解和执行。例如：把v-if处理成三元表达式的逻辑结构，v-for处理成循环的逻辑结构，把@click转化成一个事件监听器的绑定逻辑。①静态提升：转化器标记出静态节点（不依赖任何响应式数据的节点），然后，它会将。]]></description><category></category></item><item><title><![CDATA[浏览器—输入URL全流程]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162637701</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162637701</guid><author>csdn_Sandy</author><pubDate>Tue, 07 Jul 2026 11:04:45 +0800</pubDate><description><![CDATA[本文详细描述了从输入URL到页面显示的完整流程：1）DNS解析将域名转换为IP地址；2）通过TCP三次握手建立连接（HTTPS还需TLS握手）；3）发送HTTP请求；4）服务器处理并返回响应；5）浏览器解析HTML/CSS构建DOM和CSSOM树，合成渲染树后布局绘制页面；6）通过四次挥手断开连接。文中重点介绍了DNS预解析优化、三次握手必要性、CSS/JS阻塞渲染机制及解决方案（defer/async）、HTTP/1.1的keep-alive特性等关键技术细节，完整呈现了网页加载的核心机制。]]></description><category></category></item><item><title><![CDATA[AI前端——第二章：Trae设计页面]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162555425</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162555425</guid><author>csdn_Sandy</author><pubDate>Mon, 06 Jul 2026 15:07:14 +0800</pubDate><description><![CDATA[工作页面选择Design选项，描述页面设计需求，需求描写需详细。]]></description><category></category></item><item><title><![CDATA[AI前端—第一章：软件安装]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162554157</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162554157</guid><author>csdn_Sandy</author><pubDate>Fri, 03 Jul 2026 16:00:04 +0800</pubDate><description><![CDATA[字节跳动推出的Trae软件是一款AI原生集成开发环境，国内版深度集成Doubao-1.5-pro与DeepSeek模型，支持中文自然语言生成代码框架并实时预览。海外版可通过官网下载，建议安装海外版以获得图片生成代码功能。软件提供三种工作模式：Work（文档）、Code（代码）、Design（设计），用户可自定义文件存储位置。本文为作者初步使用笔记，后续将根据实践更新。官网：国内版trae.cn，海外版trae.ai。]]></description><category></category></item><item><title><![CDATA[vue—生命周期]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162520740</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162520740</guid><author>csdn_Sandy</author><pubDate>Thu, 02 Jul 2026 16:19:46 +0800</pubDate><description><![CDATA[Vue组件的生命周期钩子函数允许开发者在组件不同阶段执行代码逻辑。Vue2和Vue3的生命周期基本一致，包括创建、挂载、更新、卸载四个阶段，但Vue3新增了setup函数（相当于beforeCreate+created）并调整了部分钩子名称。父子组件生命周期执行顺序遵循&quot;父先子后&quot;的挂载规则和&quot;父先子后&quot;的卸载规则。keep-alive组件会新增activated和deactivated钩子，用于管理缓存组件的激活状态。使用setup语法糖时，生命周期函数需添加on前]]></description><category></category></item><item><title><![CDATA[Javascript——原型和原型链]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162460933</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162460933</guid><author>csdn_Sandy</author><pubDate>Wed, 01 Jul 2026 15:57:34 +0800</pubDate><description><![CDATA[原型与原型链]]></description><category></category></item><item><title><![CDATA[手写代码——深拷贝、防抖节流]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162457835</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162457835</guid><author>csdn_Sandy</author><pubDate>Tue, 30 Jun 2026 16:01:56 +0800</pubDate><description><![CDATA[【代码】手写代码——深拷贝、防抖节流。]]></description><category></category></item><item><title><![CDATA[手写代码——Promise]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162424264</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162424264</guid><author>csdn_Sandy</author><pubDate>Mon, 29 Jun 2026 15:53:07 +0800</pubDate><description><![CDATA[手动实现Promise功能]]></description><category></category></item><item><title><![CDATA[JS、浏览器——栈和队列（事件循环相关）]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162308517</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162308517</guid><author>csdn_Sandy</author><pubDate>Thu, 25 Jun 2026 16:02:40 +0800</pubDate><description><![CDATA[，引擎不等待，直接交给Web APIs（浏览器提供）去处理（处理后的回调函数会放在队列中，等待调用），自己继续执行后续代码。在这里，我们只学习栈和队列的相关内容，涉及到事件循环的知识可移步我的另一篇文章【浏览器——事件循环】“栈”负责当前做什么，“队列”负责接下来要做什么。：由宿主环境（浏览器/Node）发起的任务。结构，记录当前正在执行的函数。结构，存放等待执行的回调函数。（执行完）微任务队列中的所有任务。进入下一轮循环，再取下一个宏任务。：由 JS 引擎自身发起的任务，（Node，优先级最高）]]></description><category></category></item><item><title><![CDATA[浏览器——事件循环]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162296731</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/162296731</guid><author>csdn_Sandy</author><pubDate>Thu, 25 Jun 2026 14:57:42 +0800</pubDate><description><![CDATA[JavaScript事件循环机制解析：通过执行栈（后进先出）和任务队列（先进先出）实现异步处理。JS单线程执行代码时，耗时操作（如定时器）由浏览器其他线程处理，完成时将回调放入任务队列。事件循环持续监控执行栈，当栈空时从队列取出回调执行。这种机制避免了阻塞，使定时器等操作看似立即执行，实则通过多线程协作实现高效异步处理。]]></description><category></category></item><item><title><![CDATA[CSS3——字体颜色渐变]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/88707580</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/88707580</guid><author>csdn_Sandy</author><pubDate>Thu, 21 Mar 2019 10:02:54 +0800</pubDate><description><![CDATA[html


&lt;p class="welcome"&gt;欢迎光临，地球欢迎你&lt;/p&gt;

CSS


.welcome{
  font-size: 3rem;
  line-height: 4rem;
  color: #59a5ff; /* Fallback Color */
}
@media  screen and (-webkit-min-device-pixel-rati...]]></description><category></category></item><item><title><![CDATA[vue—Router（路由跳转传参）]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/88235473</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/88235473</guid><author>csdn_Sandy</author><pubDate>Wed, 06 Mar 2019 15:00:38 +0800</pubDate><description><![CDATA[在vue的页面跳转中，有三种传参方法：

1、路径传参

  在配置路由时，我们可以配置可传参的路由（path中的id即为路径跳转中的参数），使用这种方法时，我们需要如下面的代码方式配置路由。


const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

&amp;lt;...]]></description><category></category></item><item><title><![CDATA[vue2.0中的$router 和 $route的区别]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/87716606</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/87716606</guid><author>csdn_Sandy</author><pubDate>Tue, 19 Feb 2019 16:44:01 +0800</pubDate><description><![CDATA[router是全局的一个路由实例（全局变量），其中包含了所有的路由、路由的关键属性及方法

用法：1、$router.push({path:'/login'})       //路由跳转，实际是往history中添加路径

           2、$router.push({path:'/login',query:{name:'userName'}})  //路由传参，在route中获取参数

...]]></description><category></category></item><item><title><![CDATA[文本域字数限制]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/84105540</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/84105540</guid><author>csdn_Sandy</author><pubDate>Thu, 15 Nov 2018 15:50:44 +0800</pubDate><description><![CDATA[textarea限制输入字数(例：最大输入字数100)

&amp;lt;input type='textarea' maxlength=&quot;100&quot; onKeyDown='if (this.value.length&amp;gt;=100){this.value=this.value.substring(0,100)}' /&amp;gt;

&amp;lt;textarea maxlength=&quot;100&quot; onKeyDown=...]]></description><category></category></item><item><title><![CDATA[各种表单的正则验证]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/83994866</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/83994866</guid><author>csdn_Sandy</author><pubDate>Mon, 12 Nov 2018 17:11:31 +0800</pubDate><description><![CDATA[身份证号的正则验证（15位、18位）

const IdCard=/^([1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2})$...]]></description><category></category></item><item><title><![CDATA[vue—组件element-ui的使用]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/80374300</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/80374300</guid><author>csdn_Sandy</author><pubDate>Sat, 19 May 2018 15:14:14 +0800</pubDate><description><![CDATA[vue的一个比较常用的组件库是element-ui下面介绍一下element-ui组件的用法：首先，我们需要安装element-ui组件库，推荐使用npm安装    NPM安装命令：npm  i  element-ui  -S    CDN引入：&amp;lt;!-- 引入样式 --&amp;gt;
&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/element...]]></description><category></category></item><item><title><![CDATA[vue—登录验证]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/80365522</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/80365522</guid><author>csdn_Sandy</author><pubDate>Fri, 18 May 2018 16:00:52 +0800</pubDate><description><![CDATA[在项目开发中，我们通常会需要在进入主页时（或其他需要判断的情况），判断用户是否登录。这时，我们需要配置路由的验证方法const routes={
  routes: [
    {
      path: '/login',
      name:'登录',
      component: login
    },{
      path: '/',
      name:'home',
   ...]]></description><category></category></item><item><title><![CDATA[前端—vue环境搭建]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/80215051</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/80215051</guid><author>csdn_Sandy</author><pubDate>Tue, 08 May 2018 21:41:36 +0800</pubDate><description><![CDATA[一、官方下载vue.min.js文件，利用script标签动态引入vue，进行vue开发二、使用CDN       BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.jsunpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。cdnjs : https://cdnjs.c...]]></description><category></category></item><item><title><![CDATA[前端——ES6（1）]]></title><link>https://blog.youkuaiyun.com/csdn_Sandy/article/details/79894873</link><guid>https://blog.youkuaiyun.com/csdn_Sandy/article/details/79894873</guid><author>csdn_Sandy</author><pubDate>Wed, 11 Apr 2018 13:45:31 +0800</pubDate><description><![CDATA[1、变量声明const和letes6之前，变量声明使用var关键字；无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升es6中通常使用const和let来声明变量，let表示变量、const表示常量。let和const都是块级作用域。【块级作用域：在一个函数内部，在一个代码块内部；说白了{}大括号内的代码块即为const和let的作用域】let的作...]]></description><category></category></item></channel></rss>