online阳光-专注于大前端行业领域

自定义Vue中的v-model双向绑定v-model双向绑定实际上就是通过自组件中的$emit方法转发input事件，父组件监听input事件中传递的value值，并存储在父组件data中，然后父组件通过prop的形式将value传递给子组件的value值，再由子组件绑定input的value属性即可。 v-model的本质就是语法糖，即 1<input type="text" v-model="name"> 相当于 1<input type="text" :value="name" @input="name = $event.target.value"> ➡️ 我们动手实现一波： 子组件传值首先，自组件需要一个input标签，这个input标签需要绑定input事件，$emit触发父组件的input事件，通过这种方法子组件传递值给父组件 12// my-comp.vue<input type="text" :value="name" @input="name = $event.target.value"> 父组件监听input并传递props属性1 ...

前言slot通俗一点的理解就是”占坑”，在组件模版中占好了位置，当使用该组件标签的时候，组件标签里面的内容就会自动填坑(替换组件模版中的slot位置) 在vue2.6.0中，具名插槽和作用域插槽引入了一个新的统一的语法(v-slot的指令)，它取代了slot和slot-scope。官方的文档对插槽的描述已经足够详细，我们这边主要是来深入这个作用域插槽，加深对作用域插槽的理解与使用 一、作用域插槽按照官方的文档，插槽跟模版其他地方一样都可以访问相同的实例属性(也就是相同的作用域)，而不能访问test的作用域 1234567891011121314151617181920212223// container.vue<template> <div> <slot></slot> </div></template><script> export default { data(){ return { userInfo: { name: 'zgl' ...

一、前言针对目前实际开发过程中，企业团队内部经常会使用一些功能一样的组件，不想到处复制粘贴，又不能将组件提交到公共的npm上，毕竟是公司的隐私信息，想像iView/ElementUI这些开发框架一样，使用到公司内部的所有系统中，因此，需要搭建公司内部的npm，npm如何搭建就不再描述了，可以参考另外一篇博客文章，这里主要是讲解下如何搭建自定义的组件库，并提供给到各个业务系统使用 二、组件库的制作2.1 组件库的初始化这里是在vue脚手架的基础上，自定义开发项目的公共组件库，并调整组件库的项目目录结构： 从👆组件库我们可以看出，与标准的vuecli创建出来的项目有所区别的： examples：存放着对每个组件的使用示例 lib：打包后的结果文件，以便于全局引用 packages：组件库所有的目录，每个组件都已单目录文件命名，且对应提供各自的index.js对外引用，且在packages根目录中提供公共的index.js，对每个组件进行安装； public：项目运行所在的html模版 vue.config.js：vue cli3.0对应的配置文件，里面对应配置每个页面的访问链接 pa ...

一、前言JS是单线程,单线程,单线程的，为毛是单线程的，这里的单线程是指的在浏览器环境下JS执行引擎是单线程的。 单线程意味着同一时间内只能做一件事，为毛不能有多线程的，这样子可以提高效率啊。 JS的单线程，与它的用途有关。作为浏览器脚本语言，JS的主要用户就是与用户互动，以及操作DOM。这就决定了它必须只能是单线程的，否则会带来很复杂的同步问题。比如假设同时有两个线程，一个在某个DOM上添加内容，另一个在DOM上删除内容，同时操作同一个DOM，那么浏览器应该以哪个为准来对应渲染页面呢？ 因此，为了避免复杂性，从JS一诞生，就只能是单线程的，这个是JS语言的核心特征，将来也不会改变到。 为了利用多核CPU的计算能力，Html5提出WebWorker标准，允许JS脚本创建多个线程，但是子线程完全收主线程的控制，切worker子线程不得操作DOM，仅能通过发送消息的方式告知主线程来操作DOM。 1.1、进程与线程 进程和线程的主要区别在于他们是不同的操作系统资源管理方式。进程有独立的地址空间，一个进程奔溃后，在保护模式下不会对其他进程产生影响，而线程只是一个进程中的不同执行路径而已，一 ...

js立即执行的函数可以让函数在创建之后立马执行，这种编写模式本质上就是函数表达式(命名的或者匿名的)，在创建之后立即执行 立即执行函数的写法 一般立即执行的函数，都是正常写一js函数(命名或者匿名的)，然后用一()将整个函数包括函数给括起来，然后再加一()紧跟随其后，有需要的就对应传递相关函数调用参数 1234567// 匿名函数第一种写法：匿名函数包裹在一个括号运算符中，后面跟一个小括号(function(){console.info('hello')})(); //输出hello// 匿名函数第二种写法：匿名函数后面跟一个小括号，整个包裹在一个括号运算符中(function(){console.info('hello')});(function add(x, y){return x + y;})(1, 2); //输出3// 错误的写法// function(){}(); 上述第三种写法报错：Uncaught SyntaxError: Unexpected token{js词法引擎在解析function关键词之后，认为后面跟随的是函数定义语句，而在一条语句后面加上() ...

关于CSS学习的路线架构图，长期维护更新，每次添加的文章，都会已这个作为文章的目录 一、准备篇二、基础篇三、进阶篇四、技巧篇五、实战篇六、总结篇

一、setTimeout和setInterval的基本用法 setTimeout指定延迟XX秒后执行函数； setInterval指定周期来执行函数； 当我们设置定时器(setTimeout/setInterval)，都会有一个返回值，这个返回值是一个数字，代表当前是在浏览器中设置的第几个定时器(返回的是定时器序号) 12345let timer1 = setTimeout(() => {}, 1000);console.info(timer1); // 1let timer2 = setInterval(() => {}, 1000);console.info(timer2); 根据👆两段代码可以知道 setTimeout和setInterval虽然是处理不同功能的定时器，但都是浏览器的定时器，所以返回的序号是依次排列的； setInterval设置完成定时器会有一个返回值，不管执行多少次，这个代表序号的返回值不变。 定时器的清除 clearTimeout(timer) clearInterval(timer) 这里定时器即使清除了，其返回值也不会清 ...

请注意：JS的数据类型有8种 一、JS数据类型的结构在ES5的时候，我们所知晓的数据类型有6种：Number、String、Boolean、undefined、Null、object。ES6中新增一种Symbol，这种类型的对象永不相等，即使创建的时候传入相同的值，可以用来解决属性名冲突的问题，作为标记。谷歌67版本还出现了一种bigInt，是指安全存储、操作大整数。 根据上面描述，我们可以整理出对应如下的结构图： 可以将js的8中数据类型拆分为3个大类：基本数据类型 + 对象类型 + 其他类型然后基本数据类型包含：Number、String、Boolean、undefined、Null，对象类型(object)包含：function、array、date 二、实际场景下，容易混淆的情况2.1 JS中typeof输入分别是什么 typeof {} 与 typeof [] 输出的都是object； typeof console.info 输出的是function； 有一点需要注意：NaN是Number中的一种，非Number 关于isNaN的注意点 用isNaN()检测是否是非数值类 ...

一、css规范1.1 css命名规则1. class 必须单词全字母小写，单词间以 - 分隔。 2. class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。 1.2 属性顺序 位置属性(position、top、right、z-index、display、float等)； 大小(width, height, padding, margin等)； 文字系列(font、line-height、letter-spacing、color、text-align等)； 背景(background、border等)； 其他(animation、transition等)1234567891011121314151617181920212223242526272829.declaration-order { /* Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Box-model */ display: block; float: ...

关于如何要共享组件？目前公司的前端项目比较多，涉及到中后台业务系统，有存在不少组件，在不同的业务系统中使用的，为了避免疯狂的ctrl +C > ctrl + V，一堆的维护工作，这边搭建了内部的私有源，又不能将公司的一个资源扔到公共的npm上，因此这边利用verdaccio + gitlab来搭建以及维护蜘点前端公共的组件服务，通过verdaccio来管理组件的上传以及可视化管理，gitlab来管理组件的版本以及迭代，满足组件的更新迭代； 一、为啥子要使用私有源呢 加快共有npm包的安装速度； 避免本地npm install指向源，避免cnpm等其他源拉取npm包不及时的问题； 私有源会将已经使用的npm包缓存下来，提升个人本地/打包环境npm包的安装速度； 把公共代码上传到私有源，可以在多个git仓库项目中通过npm的方式来使用； A仓库 封装了一个 video组件，想给B仓库使用。那就可以制作一个 video组件仓库，然后发布到 私有源上。A和B仓库使用的时候就 npm install 组件库，let api = require(‘组件库’) 啦~ 这个步骤和 发公有npm包 ...

一、开始使用1.1简介根据Hexo官方描述，Hexo是一个快速、简介且高效的博客框架，使用markdown解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 1.2安装1.2.1环境需求 Node.js(版本不得低于10.13，建议使用Node.js12.0及以上) Git 以上两个就不在描述具体如何安装了，度娘一大把 1.3 Hexo安装1npm install -g hexo 二、开始使用2.1 创建博客项目，并初始化安装完成后，可直接通过hexo创建并初始化项目，通过以下命令 1hexo init blog 通过上述命令，我们创建并初始化了项目名为blog的Hexo项目 1cd blog && npm install 2.2 目录结构分析说明进入blog项目，并安装相关的依赖，通过以下示意图我们可以简单的讲解下项目的目录结构，以及对应的文件作用： .deploy_git: 通过github进行打包部署，所生成的待提交的静态资源文件； scaffold: 通过new命令创建出来的页面所需的模版，默认是拿的page作为模版； source: 通过new命令创 ...