![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 81
sabrina_chen
web前端开发工程师,热爱技术,热爱生活
展开
-
前端 网络安全,预防攻击
XSS 分为三种:反射型,存储型和 DOM-basedXSS 通过修改 HTML 节点或者执行 JS 代码来攻击网站。例如通过 URL 获取某些参数上述 URL 输入可能会将 HTML 改为 ,这样页面中就凭空多了一段可执行脚本。这种攻击类型是反射型攻击,也可以说是 DOM-based 攻击。也有另一种场景,比如写了一篇包含攻击代码 的文章,那么可能浏览文章的用户都会被攻击到。这种攻击类型是存储型攻击,也可以说是 DOM-based 攻击,并且这种攻击打击面更广。如何防御最普遍的做法是转义输入输出原创 2022-06-27 16:07:52 · 1007 阅读 · 0 评论 -
vue-cli 项目优化
1.路由懒加载2.关闭productionSourceMap3.使用resolve4. 删除预加载5.开启gzip压缩CompressionPlugin6.优化loadshLodashModuleReplacementPlugin7.使用cdn加速原创 2022-05-24 18:18:54 · 1169 阅读 · 0 评论 -
vite+vue3+typescript 搭建项目框架
最近为了挑战自己,接到公司任务,说要写一个新的系统,心血来潮。就打算用新的技术来搭建一个项目框架。选用了vite + vue3+typescript+vant 来搭建。以下是自己一步一步搭建的过程。以及用自己的血泪踩得深坑。(PS:主要是为了激励自己学习新的技术,所以我的项目是从零开始搭建的,边做边学,哭唧唧)第一步 搭建基础的项目Vite是一个 web 开发构建工具,由于其原生 ES 模块导入方法,它允许快速提供代码。通过在终端中运行以下命令,可以使用 Vite 快速构建 Vue 项目。..原创 2021-07-24 17:25:59 · 1457 阅读 · 0 评论 -
ios 富文本无法获取焦点和输入问题
背景使用vue-quill-editor 和 quil-mention 组件做pc端和手机端的富文本功能(具体使用可以看上一篇文章)。目前遇到的问题如下:1. ios 无法输入和获取焦点(必须要长按或者双击才可以,无法容忍)2.提醒人无法筛选和输入中文问题具体解决办法如下:1. ios 无法输入和获取焦点(必须要长按或者双击才可以,无法容忍)问题出现的原因是:生成了默认样式: -webkit-user-select:none;(无法选中,导致出现问题)1)添加css样式.原创 2021-03-26 11:21:47 · 1084 阅读 · 0 评论 -
富文本编辑器 vue-quill-editor 实现 mention 提醒功能
业务需要要实现一个富文本编辑器,而且同时还要实现提醒@的功能。组件官网地址:1.https://www.npmjs.com/package/@yixink/quill-mention2.https://github.surmon.me/vue-quill-editor/1.组件准备使用vue-quill-editor 和 quill-mention 实现此功能安装组件yarn addquillvue-quill-editorquill-mention -D2.组件...原创 2021-03-24 19:03:49 · 2380 阅读 · 2 评论 -
vue nextTick 无法获取dom
什么是Vue.nextTick()??定义:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码;理解:nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数,总结一下项目中遇到的问题用vue qrcode 生成二维码插件的时候,原创 2020-08-04 15:32:06 · 2634 阅读 · 2 评论 -
IPhone X 移动端 兼容性问题
Iphone x 的刘海给屏幕增加了34pt的安全距离,就会导致我的页面布局错位。底部的tabbar 会被刘海挡住。以下是专门针对vue 解决tabbar 被挡住的解决办法1. 给index.html 页面添加 meta 属性// 避免浏览器使用IE的兼容模式<meta http-equiv="X-UA-Compatible" content="IE=edge"> ...原创 2020-03-18 15:01:11 · 622 阅读 · 0 评论 -
vue+webpack 创建项目
安装webpack全局安装:npm i -g webpack目的:在任何目录中通过CLI使用 webpack 这个命令项目安装:npm i -D webpack目的:执行当前项目的构建成功就会出现这几个目录使用实例思路1.安装node js第一步检测是否安装node;没有安装node的同学请到官网下载安装https://nodejs.org/...原创 2018-09-21 15:55:34 · 4080 阅读 · 0 评论 -
vue组件注册
1.组件注册(1)全局注册到目前为止,我们只用过 Vue.component 来创建组件: Vue.component('my-component-name', { // ... 选项 ... }) 这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。(2)局部注册import...原创 2018-09-21 15:33:41 · 210 阅读 · 0 评论 -
$ref的用法
this.$ref的用法<div id="app"><input type="text" ref="input1"/><button @click="add">添加</button></div><script>new Vue({el:原创 2018-09-21 15:31:33 · 2592 阅读 · 0 评论