VUE单文件组件开发
前言 首先需要阐明的是本文单文件开发最终实现的结果：**在 HTML 中通过引入打包后的 js 文件，然后使用组件标签即可渲染。**例如： <!DOCTYPE html> <html lang="en"> <body> <div id="page"> <xk-head :msg="msg">2213</xk-head> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> <script src="./dist/main.js"></script> <script> var app = new Vue({ el: '#page', data: { msg: 'Hello Vue!123' } }) &l ...
JavaScript中的防抖和节流
什么是防抖 函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发 scroll 事件时，并不执行 handle 函数，当 1000 毫秒内没有触发 scroll 事件时，才会延时触发 scroll 事件。 防抖应用场景如下 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。 表单验证 按钮提交事件。 浏览器窗口缩放，resize 事件(如窗口停止改变大小之后重新计算布局)等。 具体实现(Lodash 库) /** * * @param { Function } func 要进行debouce的函数 * @param { Number } wait 等待时间,默认500ms * @param { Boolean } immediate 是否立即执行 */ export function de ...
一、VUE中的遗漏的知识
render 中的 h 函数 h 函数可以创建虚拟 dom，通过创建的虚拟 dom 再转化为真的的 DOM，从而渲染到页面中。 <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' + this.level, {}, [ this.$slots.default(), h('h4', {} ...
一文搞懂弹性盒子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>，使用示例如： <audio src="野狼disco.m4a" controls></audio> 兼容写法 <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="resource/audio/OUTPUT.mp3">请下载</a> </audio> 当浏览器不支持或者当前音乐地址失效时会分别访问source提供的路径，如果全部失效则提示最下边的文本。 音乐属性 属性名 说 ...
开发中GIT的常用操作
配置 配置当前项目 git config user.name '你的名字' git config user.email '你的邮箱' 修改全局配置 git --global config user.name '你的名字' git --global config user.email '你的邮箱' 检查配置 # 打印所有config git config --list # 打印指定config git config user.name 仓库 初始化仓库 git init 添加工作区文件到暂存区 # 添加单个文件 git add 1.txt # 添加多个文件 git add 2.txt 3.txt # 添加整个目录 git add ./a # 添加多个目录 git add ./b ./c # 添加所有文件 git add . 创建版本 git commit -m 'xxx' 以上命令会直接添加本次提交的备注，一般用于改动不大的情况。 git commit 以上命令会调用出默认的编辑器去编辑信息。 修改默认的编辑器 以vacode为例（Windows）。首 ...
Node安装及更换源
NodeJs 的安装 无论是何种系统进行安装，都需要到其官网进行下载。 Windows Windows 版本以 Windows10 64 位为例，为了方便我选择 msi 安装方式进行安装。 下载 安装步骤 选择安装位置 下一步 接下来一路下一步即可。 验证是否安装成功 终端内输入命令node -v即可验证 node 是否安装成功。输入npm -v即可验证 npm 是否安装成功。 Linux 下载安装包 如果是服务器，那么上传到服务器。如果是本地，那么直接解压即可。 解压命令参考tar -xvf 文件名。 切换用户，切换用户到 root 用户，并将解压出来的文件夹移动。 mv node /usr/local/src/ 变基环境变量 vi /etc/profile export NODE_HOME=/usr/local/src/node export PATH=$NODE_HOME/bin:$PATH 运行命令source /etc/profile使配置生效 多版本管理 对于 node 的多版本管理推荐使用 nvm。 ...
git配置多个SSH-Key
前言 由于 Coding 日常爆炸，不得不考虑所有站点都进行多部署操作了。但是在其他平台最好的方式就是通过 GitHub 作为媒介，进行无缝同步。于是为了个人仓库看起。来不是那么混乱，于是决定在注册一个 GitHub 账号，专门用来存放静态页面。作为多部署的媒介（GitHub Pages 太慢了，只能放弃）。 那么问题来了，我的 ssh 公钥已经在我的主账号添加了，小号不能在添加这个公钥。于是只能新创建一个密钥对。但是无论如何，小号都无法通过验证。 ssh-keygen -t rsa -C "examp@examp.com” -f ~/.ssh/github-gos967 解决方案 通过向百度学习，找到了一种较为妥协的方案。 修改~/.ssh/config文件，配置 git 信息 # 账号1登陆认证 Host github.com HostName github.com IdentityFile ~\\.ssh\\id_rsa # 账号2的登陆认证 Host tzki.github.com HostName github.com IdentityF ...
Linux安装Python和pip环境
下载安装包 https://www.python.org/ftp/python/3.9.6/Python-3.9.6.tgz 建议使用迅雷下载 上传压缩包后解压 tar -xvf Python-3.9.6.tgz 然后进入目录 cd Python-3.9.6 删除旧版本 如果在这之前安装过其他版本的 python，那么建议先删除在重新安装新版本。 rm -rf /usr/bin/python3 rm -rf /usr/bin/pip3 rm -rf /usr/local/python3 安装依赖关系 yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel -y gcc :c 编译器 python-devel python 开发包 openssl-devel 用于 pythn ...
为服务器添加秘钥进行登录
Linux 准备基础环境 首先在根目录下创建一个隐藏文件mkdir .ssh/,然后设置权限chmod 700 .ssh/ 在.ssh目录下创建文件authorized_keys 并赋予权限chmod 600 .ssh/authorized_keys 创建秘钥 在xshell菜单中点工具->新建秘钥向导 秘钥类型及长度根据你自己选择，我这里就默认下一步了 输入完成后可以点击完成，也可以点击下一步选择公钥格式。 导入公钥 创建完成后会自动弹出用户秘钥的窗口，如果没有弹出，也可以通过菜单栏里的工具找到。 接下来复制公钥 公钥复制好之后打开我们之前创建的公钥文件(authorized_keys)vim authorized_keys 将复制的公钥写入这个文件。 然后保存退出。 测试公钥是否成功 登录地址就是主机的 ip 地址 这一步选择公钥登录
