VUE单文件组件开发
前言 首先需要阐明的是本文单文件开发最终实现的结果：**在 HTML 中通过引入打包后的 js 文件，然后使用组件标签即可渲染。**例如： 123456789101112131415161718<!DOCTYPE html><html lang="en"> <body> <div id="page"> <xk-head :msg="msg">2213</xk-head> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> <script src="./dist/main.js"></script> <script> var app = new Vue({ ...
JavaScript中的防抖和节流
什么是防抖 函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发 scroll 事件时，并不执行 handle 函数，当 1000 毫秒内没有触发 scroll 事件时，才会延时触发 scroll 事件。 防抖应用场景如下 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。 表单验证 按钮提交事件。 浏览器窗口缩放，resize 事件(如窗口停止改变大小之后重新计算布局)等。 具体实现(Lodash 库) 123456789101112131415161718192021222324252627/** * * @param { Function } func 要进行debouce的函数 * @param { Number } wait 等待时间,默认500ms * @param { Boolean } ...
一、VUE中的遗漏的知识
render 中的 h 函数 h 函数可以创建虚拟 dom，通过创建的虚拟 dom 再转化为真的的 DOM，从而渲染到页面中。 123456789101112131415161718192021222324<script> // render function // template -> render -> h -> 虚拟DOM（JS对象）-> 真实 DOM -> 展示到页面上 const app = Vue.createApp({ template: `<my-title :level="2">hello xiaokang </my-title>` }) app.component('my-title', { props: ['level'], render() { const { h } = Vue return h('h' ...
一文搞懂弹性盒子flex布局
什么是flex布局 flex布局又称为弹性盒子模型，它有自己的一套属性，效率高，学习成本低，兼容性强！ 弹性盒子模型实现 HTML 页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。 弹性盒子模型主要适用于 HTML 页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响 HTML 页面性能。 名词定义 伸缩容器（flex container）：包裹伸缩项目的父元素。 伸缩项目（flex item）：伸缩容器的每个子元素。 轴（axis）：每个弹性盒子模型拥有两个轴。 主轴（main axis）：伸缩项目沿其一次排列的轴被称为主轴。 侧轴（cross axis）：垂直于主轴的轴被称为侧轴。 方向（direction）：伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。 尺寸（dimension）：根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。 对应主轴的称为主轴尺寸。 对应侧轴的称为侧轴尺寸。 定义弹性盒子 弹性盒子是css3新增的属性，因此弹性盒子模型及其属性存在浏览器兼容问题。具体可查看C ...
HTML5中audio与video
音频 HTML5中提供的音频API标签为<audio></audio>，使用示例如： 1<audio src="野狼disco.m4a" controls></audio> 兼容写法 1234567<audio controls> <source src="resource/audio/OUTPUT.mp3" type='audio/mpeg'> <source src="resource/audio/OUTPUT.aac" type='audio/aac; codecs="aac"'> <source src="resource/audio/OUTPUT.ogg" type='audio/ogg; codecs="vorbis"'> 您的浏览器不支持，<a href=" ...
开发中GIT的常用操作
配置 配置当前项目 12git config user.name '你的名字'git config user.email '你的邮箱' 修改全局配置 12git --global config user.name '你的名字'git --global config user.email '你的邮箱' 检查配置 1234# 打印所有configgit config --list# 打印指定configgit config user.name 仓库 初始化仓库 1git init 添加工作区文件到暂存区 1234567891011121314# 添加单个文件git add 1.txt# 添加多个文件git add 2.txt 3.txt# 添加整个目录git add ./a# 添加多个目录git add ./b ./c# 添加所有文件git add . 创建版本 1git commit -m 'xxx' 以上命令会直接添加本次提交的备注，一般用于改动不大的情况。 1gi ...
git配置多个SSH-Key
前言 由于 Coding 日常爆炸，不得不考虑所有站点都进行多部署操作了。但是在其他平台最好的方式就是通过 GitHub 作为媒介，进行无缝同步。于是为了个人仓库看起。来不是那么混乱，于是决定在注册一个 GitHub 账号，专门用来存放静态页面。作为多部署的媒介（GitHub Pages 太慢了，只能放弃）。 那么问题来了，我的 ssh 公钥已经在我的主账号添加了，小号不能在添加这个公钥。于是只能新创建一个密钥对。但是无论如何，小号都无法通过验证。 1ssh-keygen -t rsa -C "[email protected]” -f ~/.ssh/github-gos967 解决方案 通过向百度学习，找到了一种较为妥协的方案。 修改~/.ssh/config文件，配置 git 信息 123456789# 账号1登陆认证Host github.com HostName github.com IdentityFile ~\\.ssh\\id_rsa# 账号2的登陆认证Host tzki.github.com HostName github.com Id ...
JavaScript的大山：闭包和作用域链
执行上下文 所谓的程序其实可以理解为对变量的读写操作，因此便会产生一个问题：变量从哪来？执行上下文可分为两种：全局执行上下文和函数执行上下文。 从广义上来说，执行上下文由Lexical Environment和This binding构成。 Lexical Environment翻译成中文即词汇环境，而This Binding则指的是当前执行上下文中的this指向 全局执行上下文 这是一个最基础的上下文环境，其组成部分包含：全局对象（在浏览器中即Window对象）、全局Scope和outer。 在该作用域中，outer为null。因为他是为后边函数执行上下文所服务的。 浏览器中，全局执行上下文中的this指向Window对象。 构建执行上下文 执行上下文的创建是在，代码执行之前完成创建的。例如： 处理声明 检查重复定义 scope中如果存在重复声明，则抛出错误。但全局对象中可以重复。 创建绑定 对变量进行初始赋值。 var声明会将变量初始值赋值为undefined 函数声明会创建函数对象，然后将变量指向该对象 函数对象是一个很特殊的对象： 有一个特殊的p ...
