前端
文章平均质量分 76
chrislin9
这个作者很懒,什么都没留下…
展开
-
cookie vue-cookie
cookie介绍cookie是存储在客户端浏览器的一段文本信息 1.大小限制在4KB 2.一个网站的cookie数量在50条左右 3.存入cookie有一定的风险 4.可以设置有效期,默认的为会话结束 5.一般路径为根目录 6.可以设置域名 7可以设置secure,通过https访问(secure属性:当设置为true时,表示创建的 Cookie 会被以安全的形式向服务器传输,也就是只能在 HTTPS 连接中被浏览器传递到服务器端进行会话验证,如果是 HTTP 连接则不会传递该原创 2021-01-06 11:22:58 · 444 阅读 · 0 评论 -
前端 pdf 预览功能
vue-pdf 使用vue-pdf 整体展示这是我在没有webpack扩展/修改等的情况下使用Nuxt解决此问题的方法。适用于多页pdf。通过npm安装npm install -save vue-pdf创建一个名为vue-pdf.js的插件:import Vue from 'vue'import pdf from "vue-pdf";Vue.component('vue-pdf', pdf)添加到nuxt.config.js:plugins: [ { src: '~/plug原创 2020-12-30 14:32:23 · 895 阅读 · 0 评论 -
nuxt整理
参考Nuxt.js router 属性配置_w3cschoolNuxt爬坑原创 2020-12-26 16:45:08 · 100 阅读 · 0 评论 -
vue3 知识点总结
知识点setup 函数的用法,可以代替 Vue2 中的 date 和 methods 属性,直接把逻辑卸载 setup 里就可以ref 函数的使用,它是一个神奇的函数,我们这节只是初次相遇,要在template中使用的变量,必须用ref包装一下。return出去的数据和方法,在模板中才可以使用,这样可以精准的控制暴漏的变量和方法。如何选择 Ref()和 reactive()Vue2.x 和 Vue3.x 生命周期对比vue3组件执行同等功能优先于vue2执行vue3项目 推荐使用vue3 的钩原创 2020-12-26 16:44:38 · 1127 阅读 · 0 评论 -
nuxt部署
部署第一步:首先把项目里的运行npm run build,打包出.Nuxt文件夹,然后把.Nuxt、package.json、nuxt.config.js、static这些文件上传到服务器。第二步:在服务端刚刚上传的路径下,运行npm install或者cnpm install等待结束之后会出现node-modules文件,也就是项目所需要的依赖。第三步:通过pm2启动项目,pm2 start npm --name “xxx” – run start其它方式:## (项目目录的node_mo原创 2020-12-23 14:00:01 · 572 阅读 · 0 评论 -
支付场景下 获取结果的几种方式总结
参考:Web 实时推送技术的总结浅谈Websocket、Ajax轮询和长连接(long pull)轮询轮询是客户端和服务器之间会一直进行连接,每隔一段时间就询问一次。其缺点也很明显:连接数会很多,一个接受,一个发送。而且每次发送请求都会有Http的Header,会很耗流量,也会消耗CPU的利用率。优点:实现简单,无需做过多的更改缺点:轮询的间隔过长,会导致用户不能及时接收到更新的数据;轮询的间隔过短,会导致查询请求过多,增加服务器端的负担长连接长轮询是对轮询的改进版,客户端发送HTTP给服务原创 2020-10-20 15:35:30 · 1077 阅读 · 0 评论 -
elementui el-select change事件传递多个值
elementui el-select change事件传递多个值<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="一级菜单"> <el-select v-model="menuSelect" filterable placeholder="请选择" style="margin:0 auto ;" size="m原创 2020-08-21 11:00:52 · 7396 阅读 · 2 评论 -
vue 面试题
vue面试题computed 和 watchcomputed 有缓存,原data数据不变,不会重新计算watch 监听引用类型 拿不到oldvalue (监听string 和 对象的不同)动态绑定class的方法计算属性和 watch 的区别怎样理解单向数据流keep-alive自定义组件的语法糖 v-model 是怎样实现的路由跳转vue-router 有哪几种导航钩子Vue.js 2.x 双向绑定原理什么是 MVVM,与 MVC 有什么区别vuexthis.$nextTi原创 2020-08-13 18:17:53 · 499 阅读 · 0 评论 -
前端开发小技巧整理
使用css使文字超出部分用省略号三个点…显示的方法.box span{ overflow: hidden; word-break: keep-all; white-space: nowrap; text-overflow: ellipsis;}原创 2020-08-11 17:55:25 · 96 阅读 · 0 评论 -
Css实现漂亮的滚动条样式
自定义滚动条1## 参数说明::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。::-webkit-scrollbar-track-piece 内层轨道,滚动条转载 2020-08-11 17:49:08 · 4760 阅读 · 2 评论 -
常用 npm 包
dependencies:应用能够正常运行所依赖的包。这种 dependencies 是最常见的,用户在使用 npm install 安装你的包时会自动安装这些依赖。devDependencies:开发应用时所依赖的工具包。通常是一些开发、测试、打包工具,例如 webpack、ESLint、Mocha。应用正常运行并不依赖于这些包,用户在使用 npm install 安装你的包时也不会安装这些依赖。Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterat原创 2020-08-03 15:59:56 · 845 阅读 · 0 评论 -
webpack3 总结
webpackwebpack 命令webpack配置webpack 脚手架参考局部安装 Webpack原创 2020-07-25 10:04:51 · 69 阅读 · 0 评论 -
node npm 阿里云
$ npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver$ npm install原创 2020-07-08 11:49:27 · 177 阅读 · 0 评论 -
vue 组件通信的几种方式解读
$children / $parent拿到 $children / $parent 即可访问子 / 父 组件的所有变量和方法。官方说 $children / $parent 仅作为应急的通信方法,其中一个原因就是 $children / $parent仅代表的是根组件下的第一个子/父vue组件(普通html标签不含有vue实例,不包含在内),当位置变化或者之间需要增加新的组件,对应的指向就变了,如以下例子。props / $emit官方推荐的父子关系通信方式,不用在乎层级关系,而且没有多余数据转载 2020-05-23 09:58:10 · 385 阅读 · 0 评论 -
vue 总结整理
v-model 修饰符:.lazy .number .trimlazy:取代 imput 监听 change 事件。( 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change事件进行同步)number:输入字符串转为数字。trim:输入去掉首尾空格。<p>v-model.lazy:<input type="text" v-model.lazy="messa原创 2020-05-22 14:53:15 · 300 阅读 · 0 评论 -
sass 语法总结
基本语法$blue: blue;/*直接使用*/ div { color: $blue; }$blue: blue; // 全局变量 div { $blue: red; // 局部变量 color: $blue; // red }嵌套语法父选择器的标识符&article a { color: blue; &:hover { color: red }}/*编译结果为:article a { color: blue }article转载 2020-05-20 11:40:42 · 258 阅读 · 0 评论 -
vue vue-cli构建项目配置详解
vue webpack 基本目录结构config├── dev.env.js //dev环境变量配置├── index.js // dev和prod环境的一些基本配置└── prod.env.js // prod环境变量配置build├── build.js // npm run build所执行的脚本├── check-versions.js // 检查npm和node的版本├── logo.png├── utils.js // 一些工具方法,主要用于生成cssLoader和styleL转载 2020-05-18 11:24:48 · 373 阅读 · 0 评论 -
vue 创建项目完整步骤及配置
安装node.jsNode.js安装包及源码下载地址:https://nodejs.org/en/download安装vuenpm install -g cnpm --registry=https://registry.npm.taobao.org // 安装使用淘宝镜像//方法1.安装依赖库 vue(默认最新版本) npm install vue //回车后执行//方法2.安装指定版本的 vue, element转载 2020-05-18 10:39:06 · 674 阅读 · 0 评论 -
vue config/index.js 配置的详细理解
vue webpack的配置文件基本目录结构config├── dev.env.js //dev环境变量配置├── index.js // dev和prod环境的一些基本配置└── prod.env.js // prod环境变量配置build├── build.js // npm run build所执行的脚本├── check-versions.js // 检查npm和node的版本├── logo.png├── utils.js // 一些工具方法,主要用于生成cssLoader和st原创 2020-05-18 10:30:20 · 2463 阅读 · 1 评论 -
css 水平对齐与垂直对齐 几种方式的对别
水平对齐要水平居中对齐一个元素(如 ), 可以使用 margin: auto; (如果没有设置 width 属性(或者设置 100%),居中对齐将不起作用。)如果仅仅是为了文本在元素内居中对齐,可以使用 text-align: center;要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块 元素中左右对齐使用 position: absolute; 属性来对齐元素: ( {position: absolute; right: 0px;})float实现对齐(1原创 2020-05-15 15:05:37 · 2531 阅读 · 0 评论 -
CSS Display(显示) 与 Visibility(可见性)
简述display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。display 属性规定元素应该生成的框的类型。none 此元素不会被显示。block 此元素将显示为块级元素,此元素前后会带有换行符。inline 默认。此元素会被显示为内联元素,元素前后没有换行符。inline-block 行内块元素。(CSS2.1 新增的值)list-item 此元素会作为列表显示。run-in 此元素会根据上下文作为块级元素或内联元素显示。compact CSS 中有原创 2020-05-15 10:17:23 · 357 阅读 · 0 评论 -
CSS 盒子模型
CSS 盒子模型(Box Model)CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容Margin(外边距) - 清除边框外的区域,外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域,内边距是透明的。Content(内容) - 盒子的内容,显示文本和图像。css 盒子大小计算内边距: padding边框:border外边距 margin盒子长度=内容+内边距+边框+外边距原创 2020-05-14 17:57:31 · 118 阅读 · 0 评论 -
js 时间转换
字符转时间// separator 间隔符stringToDate : function(dateStr,separator){ if(!separator){ separator="-"; } var dateArr = dateStr.split(separator); var year = parseInt(dateArr[...原创 2020-05-08 11:37:47 · 89 阅读 · 0 评论 -
ES6 小技巧
mapvar m = new Map();var s = new Set();var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);m.get('Michael'); // 95var m = new Map(); // 空Mapm.set('Adam', 67); // 添加新的key-valuem.set...原创 2020-04-17 09:17:33 · 83 阅读 · 0 评论 -
js json对象的使用
简介//JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。//JSON.stringify()【从一个对象中解析出字符串】1. JSON.stringify(obj/arr)//JSON.parse()【从一个字符串中解析出json对象】//JSON.parse() 方法用于将一个 JSON 字符串转换为对象。2. JSON.parse...原创 2020-04-02 17:44:37 · 193 阅读 · 0 评论 -
export default function 和 export function 的区别
// 第一组export default function crc32() {}; // 输出import crc32 from 'crc32'; // 输入// 第二组export function crc32() {}; // 输出import {crc32} from 'crc32'; // 输入第一组是使用 export default 时,对应的 import 语句不需...原创 2019-12-16 15:07:02 · 101 阅读 · 0 评论 -
vscode 快捷键
vscode 快捷键记住快捷键能够提高工作效率Ctrl+Shift+P,F1 展示全局命令面板Ctrl+P 快速打开最近打开的文件Ctrl+Shift+N 打开新的编辑器窗口Ctrl+Shift+W 关闭编辑器Ctrl + X 剪切Ctrl + C 复制Alt + up/down 移动行上下Shift + Alt up/down 在当前行上下复制当前行Ctrl + Shift...原创 2020-01-19 14:00:16 · 112 阅读 · 0 评论 -
Vue事件修饰符的使用
Vue事件修饰符事件处理如果需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event,把它传入到methods中的方法中。 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有:.stop:等同于JavaScript中的event.stopPropagation()...原创 2020-01-08 21:47:57 · 133 阅读 · 0 评论 -
vue-cli里package.json解释
vue-cli package.json 详解{ //这个代码块里的都是项目描述,是创建者自定义的 "name": "qqmusic", //项目名称 "version": "1.0.0", //项目版本 "description": "qq music app by vue", //项目描述 "author": "yangbo", //项目作者 "private": ...原创 2020-01-02 11:09:12 · 617 阅读 · 1 评论 -
css 布局的几种方式
参考:css 布局的几种方式转载 2020-01-01 22:54:35 · 212 阅读 · 0 评论 -
CSS | 字体系列
参考: CSS | 字体系列转载 2019-12-31 10:32:32 · 103 阅读 · 0 评论 -
css常用样式整理_css属性大全
一. 字体属性:(font)大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高 {line-height: normal;}(正常) 单位:PX、PD、EM粗细 {font-weight: b...原创 2019-12-27 16:16:34 · 351 阅读 · 0 评论 -
js方法总结
js方法总结toFixed()用法:toFixed() 方法可把 Number 四舍五入为指定小数位数的数字语法:NumberObject.toFixed(num)let num = new Number(23.83);// 23.8console.log(num)charAt()作用:charAt() 方法可返回指定位置的字符,返回的字符是长度为 1 的字符串语法:strin...原创 2019-12-27 16:09:07 · 77 阅读 · 0 评论 -
office 所有后缀对应的 content-type
office 所有后缀对应的 content-type文件后缀MIME TYPE.docapplication/msword.dotapplication/msword.docxapplication/vnd.openxmlformats-officedocument.wordprocessingml.document.dotxapplication/...原创 2019-12-27 14:05:59 · 437 阅读 · 0 评论