- 博客(30)
- 收藏
- 关注
RSS订阅原创 vue自定义指令-对输入框数字的限制，输入框的数字前面不能输入多余的0，例如00123， 00.12类型的数字
限制数字前面不能输入多余的0，例如00123 00.12import Vue from 'vue'Vue.directive('number', { bind(el) { el.onkeyup = () => { if (el.value) { if (parseInt(el.value) == parseFloat(el.value) && !el.value.includes('.')) { if (paeseI
2022-03-25 16:35:59
2342
原创 nginx 部署前端项目，不缓存html文件，项目发版后，不用手动刷新页面
nginx 部署前端项目，不缓存html文件，项目发版后，不用手动刷新页面location / { expires 1h; root /home/test/vue/dist/; index index.html index.htm; if ($request_filename ~* .*\.(htm|html)$) ## 配置页面不缓存 { add_header Cache-Control "private, no-store, no-cache, must-revalidate
2022-03-25 15:18:07
6468
原创 Vue开发规范细节
Vue开发规范细节一、必要的1、组件名为多个单词组件名应该始终是多个单词的，根组件 App 以及 、 之类的 Vue 内置组件除外。这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。例如：Vue.component(‘todo-item’, {// …})export default { name: ‘TodoItem’, // … }2、组件数据组件的 data 必须是一个函数。当在组件中使用 data property 的时候
2021-02-10 16:02:16
966
原创 Vue 更改keep-alive源码，满足条件性缓存（多个页签之间切换缓存，关闭页签重新打开不缓存）
应用场景当系统打开多个页签时，多个页签之间切换去做缓存，关闭页签重新打开该页签不缓存。解决方案更改 vue keep-alive源码1、制造一个唯一的key值，在路由参数里面加一个时间戳1.1 因keep-alive 使用组件名称name值作为唯一的key值去做条件缓存，但是该项目因书写不规范导致组件的name值不是唯一的。在路由的参数 里面增加一个时间戳 // 当点击系统左侧菜单的时候加时间戳 select(url) {
2021-02-07 16:47:31
1075
1
原创 Vue：keep-alive的用法总结
什么时候用到keep-alive如果没有缓存，每点击一次导航，内容区就会创建一个组件，该组件会经历整个生命周期，每点击一次，就会创建一个组件，比较浪费性能，这时，我们就要考虑到是否能将点击过的已创建的组件进行缓存，当再次点击已访问过的组件时，这时，就会从缓存中获取该组件，而不会重新创建，这就用到keep-aliveProps：include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多
2020-11-11 18:07:43
264
原创 Vue混入mixins的简单用法
比如说，你有一个方法好多文件都会用到，但你不想在各个文件中都写这个方法，这个时候你就可以用混入建一个独立的专门写混入的文件夹mixins在mixins文件及里面写一个index.js文件index.js文件中写入你的混入。一个index.js中可以写多个混入，const formatterNum = { methods:{ formatterNum(num) { //正常写你的方法 } }}//如果你想在这个文件中再写另一个混入，那就再定义一个const formatte
2020-09-30 16:58:13
270
原创 vue自定义指令：金额保留两位小数并且每三位逗号分割
vue自定义指令：金额保留两位小数并且每三位逗号分割可以专门建一个filter.js文件，统一做vue的一些自定义指令，方便以后维护。建的filter.js在main.js中引用。当然你直接在main.js里写也没有问题，只是后期不好维护。这里使用filter.js文件首先在filter.js中引入Vueimport Vue from 'vue'//保留两位小数并用逗号分隔Vue.filter('sumFilter', function(num) { if(num) { if(!isNaN
2020-09-30 16:11:40
1711
原创 vue 子组件会接收不同的数据类型，数据设置默认值的写法
vue prop 会接收不同的数据类型，这里列出了 常用的数据类型的设置默认值的写法。其中包含： Number, String, Boolean, Array, Function, ObjectrefAge: { type: Number, default: 0},refName: { type: String, default: ''},hotDataLoadi...
2020-02-26 14:52:05
2563
原创 js异步执行顺序
将同步代码放入setTimeout中，变成异步，则和ajax中的回调同为异步，则按照异步的方式来排列执行顺序。由此引入异步之间的执行顺序问题！首先常见的异步一般有：ajax可以异步也可同步、回调、setTimeout系列、事件绑定。 而es6中的新增的promise、async/await。按照js的执行顺序，先执行同步，再执行异步。那么上面这些异步的执行之内该如何执行呢？首先了解一下宏...
2020-02-26 14:29:19
370
原创 前端性能优化处理方法---懒加载
懒加载1.什么是懒加载懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。2.为什么要用懒加载能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图...
2018-12-07 08:26:33
541
原创 JS 的线程、事件循环、任务队列简介
JS 是单线程的，但是却能执行异步任务，这主要是因为 JS 中存在事件循环（Event Loop）和任务队列（Task Queue）事件循环：JS 会创建一个类似于 while (true) 的循环，每执行一次循环体的过程称之为 Tick。每次 Tick 的过程就是查看是否有待处理事件，如果有则取出相关事件及回调函数放入执行栈中由主线程执行。待处理的事件会存储在一个任务队列中，也就是每次 Tic...
2018-12-04 20:23:44
217
原创 vue Router 路由守卫之beforeEach
首先使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ...})当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。每个守卫...
2018-11-29 09:38:28
794
原创 jquery ajax，axios，fetch优缺点及它们的区别
jquery ajaxjquery ajax实例$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});$.ajax的参数描述url 必需。规定把请求发送到哪个 URL。data...
2018-11-27 16:31:25
425
原创 localStorage、sessionStorage、Cookie的区别和共同点
webstoragewebstorage是本地存储，存储在客户端，包括localStorage和sessionStorage。localStoragelocalStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。sessionSt...
2018-11-27 14:36:12
245
原创 localStorage使用实例-进入显示广告，点击关闭之后，刷新网页不再出现
仿一下京东官网顶部的广告关闭，效果为第一次进入官网会出现广告，然后点击关闭，刷新网页不会再显示广告，但是当清除localStorage存入的数据，刷新网页会再显示广告。html代码<div class="header"> <div class="header-a"> <a href=""></a>
2018-11-27 14:30:03
1005
原创 基于nodejs爬虫
爬接口数据var https = require('https');https.get('https://api.readhub.cn/topic?lastCursor=76823&pageSize=20',function(res,req){var html=''; res.on('data',function(data){ html+=data; ...
2018-11-04 20:59:34
614
原创 nodejs express 框架 上传图片，上传头像问题
上传图片总结：必须 安装’multer’模块Npm I multer –S（手动输入小写）第一步App.js 里面 挂载index路由之前写入app.use(express.static(path.join(__dirname, 'public')));var multer = require('multer'); //删除图片临时放在'/tmp/'app.use(multer({...
2018-11-02 17:52:33
1150
原创 js继承 - 构造函数继承，call apply改变this指向 原型链继承，混合继承
1、构造函数继承function Person(name,age){ this.name = name; this.age = age; this.run = function(){ console.log('跑....'); } } function YPerson(name,age,color){ this.method = Person;//th...
2018-10-21 21:20:40
746
原创 js闭包
js闭包（js的特殊之处在于 函数内部可以直接读取全局变量，而在函数外部无法读取函数内部的变量，那在函数外部怎么读取到函数内部的变量呢？这就用到了闭包）闭包的特点：1、读取函数内部的变量。2、让这些变量始终保存在内存当中闭包的两个典型的应用场景：1、使用一个函数访问另一个函数的局部变量。（函数作为返回值）2、通过回调函数使用一个函数中的局部变量。（函数作为参数被传递）第一种应用场景...
2018-10-21 20:13:49
163
原创 js数组中的方法
js数组中的方法1、push和poppush方法用于在数组的末端添加一个或者多个元素，并返回添加因元素后的数组长度，push方法会改变原数组pop方法用于删除数组中的最后一个元素，并返回该元素，会改变原数组，对于空数组，使用pop方法不会报错，返回undefined 用法：arr.pop();小括号内不写参数。push与pop结合使用就构成了“先进后出”栈结构（stack）（先进...
2018-09-24 19:35:18
378
原创 js九宫格拖拽交换
js九宫格拖拽交换以下为代码内容<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>九宫格拖拽</title> </head> <style ty
2018-09-14 12:32:43
1330
原创 js淡入淡出式轮播（京东轮播图）和无缝轮播（淘宝轮播图）
js淡入淡出式轮播（京东轮播图）&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;淡入淡出式轮播（京东轮播图）&lt;/t
2018-09-12 23:06:10
1767
原创 JS倒计时
倒计时&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &am
2018-09-01 21:07:58
296
原创 CSS3 中3D转换--旋转正方体，滚动照片墙的写法
首先给父元素加两个属性，把父元素变成3D空间。 (1)transform-style:preserve-3d; （观察的场所 3D空间） (2)perspective:1000px;（近大远小–景深prespective，元素距离观察点的距离也就是物体和眼睛的距离，通常在900-1200之间。）然后利用3D转换的属性 transform&lt;!DOCTYPE html&gt...
2018-08-16 19:44:17
3704
原创 移动端的界面中滚动条的显示
移动端的界面中滚动条的显示第一种方式 将html和body的高度设置为100%；使他与屏幕的高度相同。html{height: 100%;}并将body设置为弹性 body{height:100%;display: flex; flex-direction: column;} flex-direction: column;使主轴方向为垂直方向，起点在上沿。）header设...
2018-08-13 21:36:28
1655
原创 宽高自适应
宽高自适应 在网页布局的时候经常要定义元素的宽和高，但很多时候我们希望元素的大小能够根据窗口的大小进行自动调整，这就用到了自适应。宽高自适应的优点: 元素自适应在网页中是非常重要的，它能够使得网页更加灵活，可以适应在不同的设备不同的窗口和不同的分辨率下显示。1、宽度自适应 元素宽度设置为100%；（块元素的宽度默认为auto）2、高度自适应 （1）元素高度自适应窗口的高度 设...
2018-08-12 21:31:30
833
原创 表单高级和表格高级
关于表单 1、表单字段集&amp;lt;fieldset&amp;gt;&amp;lt;/fieldsed&amp;gt;功能相当于一个方框，在字段集中可以包含文本和其他元素。 该元素用于对其它的元素进行分组，。 fieldset 元素可以嵌套，在内部可以设置多个fieldset 对象。2、字段集标题&amp;lt;legend&amp;gt;&amp;lt;/leg
2018-08-12 20:36:16
504
原创 弹性盒模型
flex是flexinle Box 的缩写，是弹性布局。 任何容器都可以指定flex布局：display：flex设置了flex布局后，当前容器内子元素的float，clear，vertical-align属性将全部消失。 采用flex布局后的元素成为flex容器，它所有的子元素自动成为容器成员，称为容器项目。 容器默认存在两根轴：水平的轴（main axis）和垂直轴（竖轴/侧轴）（c...
2018-08-12 11:58:59
814
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人