浏览器中的事件循环(Event Loop)机制
什么是事件循环(Event loop),浅谈浏览器事件循环,一文带你了解什么是浏览器中的事件循环机制;通过代码帮你梳理事件循环是如何进行循环的。
JavaScript中的原型链到底是什么
原型链是什么,浅谈原型链,一文带你了解什么是原型链
一文搞懂网格grid布局
什么是网格布局 网格布局能够将网页划分成一个个网格,亦可以组合任意不同的网格。 grid布局是二维布局,而flex布局则是一维布局。grid将容器划分为行和列,产生单元格,通过指定项目所在的单元格。 定义网格布局 定义网格布局很简答,通过display即可设置。 不过与flex布局不同的是,单纯的设置后是无效果的,需要同样为其设置网格布局属性才可以看到效果 gridinline-grid容器内部设置为网格布局,容器为块级元素 123div{ display: grid;}容器内部设置为网格布局,容器为行内元素 123div{ display: inline-grid;} 网格布局属性 列宽和行高 定义列宽grid-template-columns和行高grid-template-rows用于规定单元格的大小。(类似于width和height) 12345678.container { /* 定义网格布局 */ display: grid; /* 定义三列网格,宽度为200px */ grid-template-c ...
初识vue3之无限滚动
vue3中自定义无限滚动指令与无限滚动组件的封装
面向Coding的Git
说明 此篇文章记录在日常 coding 的操作以及一些必要的 git 概念 git 的初始化设置 12git config --global user.name "Your Name"git config --global user.email "email@example.com" config 的三个作用域,缺省等同于local 123git config --local ## local只对某个仓库有效git config --global ## global对当前用户所有仓库有效git config --system ## system对系统所有登录的用户有效 显示 config 的配置,加--list 123git config --list --local ## local只对某个仓库有效git config --list --global ## global对当前用户所有仓库有效git config --list --system ## system对系统所有登录的用户有效 查看提交记录 只看变更列表只看最近N次只看当前分支历 ...
初识vue3之单文件组件script setup
关于此分类 关于初识 vue3分类主要是记录一些通过 vue3 进行的实践与学习记录。 此文主要记录关于 vue3 script setup 的尝试。 本文会随着作者日常使用进行补充及内容修正 本文参考于: 单文件组件<script setup> 默认自动暴露 <script setup> 是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖。相比于普通的<script>语法,它具有更多优势: 更少的样板内容,更简洁的代码。 能够使用纯 Typescript 声明 props 和抛出事件。 更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数,没有任何的中间代理)。 更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。 123456789101112<template> <div>当前msg的值:{{ msg }}</div> <div>当前msg的值(ref的值会被自动解包):{{ m ...
初识vue3之响应式数据
关于此分类 关于初识 vue3分类主要是记录一些通过 vue3 进行的实践与学习记录。 此文主要记录关于 vue3 响应式数据的尝试。 本文会随着作者日常使用进行补充及内容修正 refs 类型声明 12345678910111213141516import { ref, Ref } from 'vue'export default { // setup参数参考 https://v3.cn.vuejs.org/guide/composition-api-setup.html#%E5%8F%82%E6%95%B0 setup() { // 声明类型 字符串 const stringVal = ref<string>('1') // 声明类型 数字 const numberVal = ref<number>(1) // 声明类型 泛型 function useState<State extends string>(initia ...
避坑指北:vue使用history路由
背景 在部署 vue 项目时,路由模式默认使用哈希(hash)模式,但是由于某些原因,要求使用 history 模式。但是对于现在的部署环境则遇到了一个问题。首先是目录: 12345site ---- 项目根目录 ├── siteA ---- 项目A │ └── index.html └── siteB ---- 项目B └── index.html 即项目放在了同一个根目录下,那么此时我们就需要调整 vue 的一些配置。具体如下 Vue 项目配置 路由设置 1234567891011121314151617export default [ { path: '/siteA', name: 'siteARoot', component: () => import('@/views/siteA/index'), children: [ { path: 'index', name: 'Index& ...
初识vue3之better-scroll组件封装
关于此分类 关于初识 vue3分类主要是记录一些通过 vue3 进行的实践与学习记录。 此文主要记录封装基于BetterScroll 2.0插件封装的 scroll-view 组件。适用于移动端的弹性滚动及下拉刷新、上拉加载等场景。 弹性滚动 下拉加载 上拉刷新 滚动前后及滚动中事件 滚动条(待添加) 本文会随着作者日常使用进行补充及内容修正 简单的实现过程 实现之前需要先明确一下需求: 弹性滚动 下拉刷新、上拉加载 自定义传入内容 事件派发 弹性滚动 实现弹性滚动只需要按照官方示例初始化即可实现。 123456789101112131415161718<template> <div class="wrapper" ref="wrapper"> <div class="content"> <div v-for="i in 100">{{ i ...
初识vue3之基础语法记录
关于此分类 关于初识 vue3分类主要是记录一些通过 vue3 进行的实践与学习记录。 此文主要记录一些在 vue3 中的一些语法改变(只记录composition api语法),当然使用@vue/composition-api插件也可以令vue2适用本文所记录的语法。 本文会随着作者日常使用进行补充及内容修正 数据相关(data) setupscript setuptsx1234567891011121314151617181920212223242526272829303132<template> <div> <!-- vue模式下展示ref数据不需要加.value --> <div>当前title:{{ title }}</div> <input v-model="title" type="text" /> <div>当前用户名:{{ form.name ...