Vychod Blog

Vue 组件通信方式 通信的类型 父子组件通信 兄弟组件通信 祖孙、后代通信 非关系组件的通信 通信的方式（8种） props $emit ref EventBus parent root attrs listeners provide inject vuex 等状态管理库 详细描述 props 通信：父向子传递数据 $emit 通信：子组件触发父组件 // 子组件this.$emit('add', {data: 123})// 父组件<Children @add="handleAdd($event)" /> ref 通信： // 父组件中<Children ref='foo' />this.$refs.foo // 这样就可以调用子组件的实例 EventBus：兄弟组件传值，总线机制 class Bus { constructor() { this.callbacks = {}; //存放事件名称 } $on( ...

描述下对Vue生命周期的理解 指的是Vue中实例从创建到销毁的一个完整的过程。 可以理解从 创建 -> 初始化数据 -> 编译template -> 挂在DOM -> 渲染 -> 更新渲染 -> 卸载 生命周期的钩子（Hook）函数： beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 其他：activated、deactivated（这两个是在keep-alive组件激活和停用时触发），另外还有一个errorCaptured 钩子函数是如何把各个生命周期串联到一起的 首先，通过 new Vue()来创建一个空的实例对象：const vm = new Vue() 实例初始化 init，然后将 事件events 和 生命周期lifecycle 注入到实例对象中去 此时会调用 beforeCreate 完成响应式 reactivity，创建注入 injection，注入&校验 调用 created 判断当前的 elemenn ...

本篇文章将介绍如何在组件库中开发一个组件 测试组件在 packages/components/basic/button/button.vue 文件中写一个简单的按钮 此时我们需要给 button.vue 一个 name: sl-button 好在全局挂载的时候作为组件名使用 <template> <button>按钮</button></template><script lang="ts">export default { name: "sl-button"}</script> 然后在 packages/components/basic/button/index.ts 将其导出import Button from "./button.vue";export { Button };export default Button; 然后再app.vue中引用Button<script setup lang=&quo ...

本篇文章将为开发组件做好前期准备 前期准备准备好 nodejs 的环境，这里使用npm -v# 9.5.1node -v# v16.13.0这里推荐使用 nrm（npm registry manager），它是npm的镜像管理工具，有时候国外的资源太慢，使用这个就可以快速地在npm源间切换。 nrm 的使用 安装nrm在命令行执行命令，npm install -g nrm，全局安装nrm。 查看当前源执行命令 nrm ls 查看可选的源。其中带 * 号的是当前使用的源或者直接使用 nrm current 命令，也可以查看当前源。 切换如果要切换到 taobao 源，执行命令 nrm use taobao。 增加你可以增加定制的源，特别适用于添加企业内部的私有源，执行命令 nrm add <registry> <url> ，其中 registry 为源名，url 为源的路径。 删除执行命令 nrm del <registry> 删除对应的源。 测试速度你还可以通过 nrm test <registry> 测试响应源的响应时间。 后面如果 ...

前言动机组件库，前端人的好帮手。从最开始入门前端的时候使用的 Bootstrap，到后来使用的 ElementUI，组件库真的帮助我解决了很多样式上的问题，减少了开发时间，提高了开发效率。最开始学习 Vue 的时候就非常关注它的 components，当时我就觉得，组件库不就是 components 的最佳应用吗？其实在很早之前就滋生了想要自己开发一个组件库的想法，这次直接一鼓作气完成了。 项目的预览地址在这里：SlunceUI 理想虽然说现在很多组件库以及很成熟了，但是我觉得这样一个组件库的开发过程，可以学习到很多，一个完整的项目可以更好的帮助我们整理开发一项产品的思路，相比较团队化工作，独自一个人开发一个组件库是一件非常值得自豪的事情。当然了，如果我要是有很好的 idea ，用我的组件库实现了一些创新，那么 SlunceUI 就可以是下一个 ElementPlus，我最期待的是可以让我的 SlunceUI 变成一个庞大的开源产品，团聚起一些志同道合的人们。 系列文章 从零搭建你的个人Vue3组件库（零）：片头曲 从零搭建你的个人Vue3组件库（一）：项目搭建 从零搭建你的个人V ...

HEXO GO 本教程仅针对 Window 用户 整篇教程的大纲是 安装git、nodejs、hexo 安装主题、配置主题（可以跳过，选择使用默认主题） 部署到服务器（主流是选择 Github ）上 创建文章、编辑文章、预览文章、发布文章 非常简单是吧，接下来就开始具体的教程吧，可能有点啰嗦，但是还是省略了很多对新手不大重要的东西 1. 环境部署1. 安装 git进入 Git 官网 一路默认设定即可，最后在终端检查是否安装好了 $ git --versiongit version 2.29.0.windows.1 2. 安装 node.js进入 下载 | Node.js 中文网 (nodejs.cn) 记得安装 LTS ( Long Term Support，长期支持 ) 版本，比较稳妥 也是一路默认设定安装即可，非常的简单，最后在终端检查是否安装好了 $ node -vv12.19.0 3. 安装 hexo$ npm install hexo-cli -g 2. 开始 hexo ！1. 建站主要步骤如下 $ hexo init <folder>$ cd < ...

学习使用 Git 进行版本管理什么是 Git ？既然要学习 Git ，那我们首先就肯定要知道 Git 是个什么东西。举个简单的例子，相信很多人都有过修改一个东西修改很多次的体验吧，最好的结果是最后达到了甲方的要求，但是没法保证甲方爸爸提出一句“第一版挺好的”，那么这个时候你就疯狂在电脑上找第一版，然后发现你始终用的是同一个文档进行修改，根本找不到第一版了。所以很多人开始养成了一些好习惯，一个作业进行的时候，每到一个关键点，就复制当前作业作为节点记录，也就是备份，这就是最简单的很容易想到的“版本管理”。但是这样带来的结果是，你的文件夹有一堆同样名字的文件，那么有的人会说了，我会按照时间把不同节点的文件起不一样的名字，这确实是一个很好的解决方法，但是你这个文件夹还是会有一大堆文件。如果你的单个文件比如说你的 word 很大，再如果你干了一个月每天都有两三个版本，那么你这一个月下来的文件占据存储空间的大小是非常庞大的。 多是一方面，难以管理是另一个大问题。老板说，你去给我找到 xxx 需求还没提出的那个版本，这个时候如果你想不起来是哪个时间，那么你的时间戳就毫无用处了；又有人要说了，我有版本 ...

公司名称：忘记了呃呃呃面试形式：电话面试题目： 介绍自己 abaabaaba……. 怎么学习前端的 js用红宝书、css用案例、vue用网课和项目、代码能力用leetcode 介绍css学习样例 介绍了 swiper 以及 伪类 vue的双向绑定 介绍 MVVM 的原型 MVC，Model 和 View 在 MVVM 中是通过 VM(ViewModel) 来进行数据相互控制的，如果在某一边数据发生了改变，那么监听数据的 VM 也就是向另一边发出修改指定数据的命令，从而实现数据绑定 如何实现 button 点击的涟漪特效 使用伪类，伪类的大小、颜色(rgba)使用 js 来控制。当 button 的 click 事件发生后，涟漪特效函数会触发，动态修改伪类的大小(越来越大)，rgba 的 a 值，越来越透明，达到一种扩散最终消失的特效 描述一道有意思的算法题 最大回文子串 ——> 使用对称扩散法，由于回文一定是对称的，所以只要从某一字符串元素向左右扩散，就可以得到以该元素为中心的最大回文子串并存储到回文子串数组中。最终遍历一次数组获得最大长度并且输 ...

题目描述(中等)原题链接 给定一个字符串，请你找出其中不含有重复字符的 最长子串 的长度。 示例输入：s = “abcabcbb”输出：3解释：因为无重复字符的最长子串是 “abc”，所以其长度为 3。 输入：s = “bbbbb”输出：1解释：因为无重复字符的最长子串是 “b”，所以其长度为 1。 输入：s = “pwwkew”输出：3解释：因为无重复字符的最长子串是 “wke”，所以其长度为 3。 解决方法滑动窗口我们使用两个指针表示字符串中的某个子串（或窗口）的左右边界，其中左指针代表着上文中「枚举子串的起始位置」，而右指针即为上文中的 $r_k$​在每一步的操作中，我们会将左指针向右移动一格，表示 我们开始枚举下一个字符作为起始位置，然后我们可以不断地向右移动右指针，但需要保证这两个指针对应的子串中没有重复的字符。在移动结束后，这个子串就对应着 以左指针开始的，不包含重复字符的最长子串。我们记录下这个子串的长度； 在枚举结束后，我们找到的最长的子串的长度即为答案。 在上面的流程中，我们还需要使用一种数据结构来判断 是否有重复的字符，常用的数据结构为哈希集合（即 C++ 中的 s ...

题目描述(中等)原题链接 给你两个 非空 的链表，表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的，并且每个节点只能存储 一位 数字。 请你将两个数相加，并以相同形式返回一个表示和的链表。 你可以假设除了数字 0 之外，这两个数都不会以 0 开头。 示例输入：l1 = [2,4,3], l2 = [5,6,4]输出：[7,0,8]解释：342 + 465 = 807. 输入：l1 = [0], l2 = [0]输出：[0] 输入：l1 = [9,9,9,9,9,9,9], l2 = [9,9,9,9]输出：[8,9,9,9,0,0,0,1] 解决方法将两个数组分别转换为两个十进制的数字，进行加减之后，将和再转换成数组形式 代码：var addTwoNumbers = function(l1, l2) { // 初始量定义 let node = new ListNode('head'); // 定义结点 let temp = node; // 哑结点 let add = 0; ...