【个人开源】Vue3 轮播组件: v3-carousel
引水方知开源不易 与朋友首次开源了一个轮播插件,希望大家积极品尝 介绍基于 vue3 composition api 编写的轮播插件,多种属性适配,轮播内容 可完全自定义,基本可以满足大部分的轮播需求。 基本功能介绍: 是否开启自动轮播,自定义轮播时间 鼠标移入后暂停轮播,鼠标移出后重置轮播 点击 左侧/右侧 切换按钮,手动切换 点击 底部轮播指示器,手动切换 切换按钮 与 轮播指示器,可设置 hover 展示 左侧切换向左滚动,右侧切换向右滚动 … 在线Demo:正在制作… 安装1npm install v3-carousel or 1yarn add v3-carousel 使用main.js 123456import { createApp } from "vue";import App from "./App.vue";import Carousel from "v3-carousel"; // 引入const app =...
Hello World
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment 祝君无Bug~
Vue源码解读(知识点总结)
为了方便自己对知识点的巩固和理解,整理了李永宁大佬 12 篇《Vue源码解读》的文末知识点总结,在这里可以一览天下。如果想看详细文章,可点击标题下方的“阅读原文”即可。 (1)前言阅读原文 (2)Vue 初始化过程阅读原文 Vue 的初始化过程(new Vue(options))都做了什么? 处理组件配置项 初始化根组件时进行了选项合并操作,将全局配置合并到根组件的局部配置上 初始化每个子组件时做了一些性能优化,将组件配置对象上的一些深层次属性放到 vm.$options 选项中,以提高代码的执行效率 初始化组件实例的关系属性,比如 $parent、$children、$root、$refs 等 处理自定义事件 调用 beforeCreate 钩子函数 初始化组件的 inject 配置项,得到 ret[key] = val 形式的配置对象,然后对该配置对象进行响应式处理,并代理每个 key 到 vm 实例上 数据响应式,处理 props、methods、data、computed、watch 等选项 解析组件配置项上的 provide 对象,将其挂载到...
2021前端知识点总结
目录[TOC] JavaScript 啊 啊 啊 啊 Vue 2.x BiliBili: Vue 2.x 源码解读(12) —— path阶段 Emm…,慢慢看 v-if和v-for哪个优先级更高?如果两个同时出现,应该怎么优化得到更好的性能? 源码: compiler/codegen/index.js 在Vue 2.x版本中,v-if的优先级大于v-for 在Vue 3.x版本中,v-for的优先级大于v-if render函数: with(this){return _c('div', { ... })} Vue组件data为什么必须是个函数而Vue的根实例则没有此限制? 源码: src\core\instance\state.js -...
JavaScript运算符优先级
运算符的优先级决定了表达式中运算执行的先后顺序,优先级高的运算符最先被执行。 优先级汇总表下面的表将所有运算符按照优先级的不同从高(20+)到低(1)排列。 优先级 运算类型 关联性 运算符 21 圆括号 n/a(不相关) ( … ) 20 成员访问 从左到右 … . … 需计算的成员访问 从左到右 … [ … ] new (带参数列表) n/a new … ( … ) 函数调用 从左到右 … ( … ) 可选链(Optional chaining) 从左到右 ?. 19 new (无参数列表) 从右到左 new … 18 后置递增(运算符在后) n/a … ++ 后置递减(运算符在后) … -- ...
预防XSS攻击插件 js-xss
在面向客户开发时,特别是根据客户输入的内容进行入库试,无法预计会输入什么,所以需要对客户输入的内容进行过滤,以免引起不必要的bug甚至数据库崩掉 参考网站 github:js-xss 项目主页 在线测试 安装插件1npm install xss 引入插件1import { getDefaultWhiteList, FilterXSS } from 'xss'; 封装函数插件的github文档中给出了很多api,根据自己的需求进行封装即可,如下所示: 123456789101112131415161718192021222324252627282930export const filterXSS = (() => { const whiteList: any = getDefaultWhiteList(); // 获取默认白名单 // 添加新的白名单标签或属性 for (const i of Object.keys(whiteList)) { ...
VSCode注释高亮插件 Better Comments
本文概要 安装插件打开VSCode的插件市场,搜索Better Comments,点击install 使用该插件提供5中默认的高亮方式,配置信息如下: 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647"better-comments.tags": [ { "tag": "!", "color": "#FF2D00", "strikethrough": false, "underline": false, "backgroundColor": "transparent", "bold": false, "italic": false }, { ...
【转】看完让你彻底搞懂Websocket原理
最近在学习websocket的时候,从知乎的《WebSocket 是什么原理?为什么可以实现持久连接?》问题下看到了这个回帖,对我的帮助比较大,遂转载到自己的博客 WebSocket 和...
加载聊天历史记录并保留滚动条当前位置
在聊天框中,加载历史消息肯定是往消息的上面去加载,即对应数组的Array.unshift()操作,此时默认滚动条会回到顶部,所以我们需要重置滚动条的位置 Vue中代码实现首先记录加载历史前,滚动条的位置scrollHeight 1const scrollHeight: number = (document as any).getElementById('messageBox').scrollHeight; 加载历史消息 1234for (let i = 0; i < outMsg.list.length; i++) { // todo sth, ex: 消息处理 activeList.unshift(list[i]);} 滚动到原来的位置 注:因为我是在vue环境下,需要确保页面已经渲染完,再滚动到加载前的位置,所以使用Vue.nextTick() 1234nextTick(() => { const scrollDom: any = (document as...
查看代码行数
项目写久了,就像看看自己一个项目的真实代码有多少行,所以找了下面两个方法 命令行查看用mac终端自带的的find命令,可以查看目录下每个文件的行数,及最后输出总行数 12345678# input >find . "(" -name "*.vue" -or -name "*.html" -or -name "*.ts" -or -name "*.js" ")" -print | xargs wc -l# output >423 a.js1842 b.vue52 c.html7253 total VsCode查看直接在vscode的全局搜索中(快捷键为Command + Shift + c),输入b*[^:b#/]+.*$,并使用Use Regular Expression选项(即最右侧的星号和方块的按钮),进行搜索,即可查看 123456789# input >b*[^:b#/]+.*$# output >7253...