- 博客(69)
- 收藏
- 关注
RSS订阅原创 Vue + vue-router + express SSR实践
Vue SSRSSR概念：https://ssr.vuejs.org/zh/server side render服务端渲染服务端渲染解释：将一个Vue组件在服务器渲染为HTML字符串并发送到浏览器，最后再将这些静态标记“激活”为可交互应用程序的过程称为服务端渲染。百度蜘蛛爬虫的机制百度蜘蛛是百度搜索引擎的一个自动化程序，它会不断的访问收集互联网上的网页、文章、视频等，通过抓取链接来收录网站，计算网站的权重和排名。纯html等静态化网站对百度蜘蛛比较友好，且百度蜘蛛几乎不会爬取js动态的网站，如
2021-08-06 14:43:58
1225
3
原创 使用css实现文字渐变
效果：<template> <div> <span class="font-gradient">用CSS实现文字渐变</span> </div></template><style lang="scss" scoped> .font-gradient { background: linear-gradient(to right, red, #1a80ea); -webkit-backgro
2021-07-28 16:49:14
1776
原创 :nth-child
:nth-child(an+b)这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）前三个元素 :nth-child(-n + 3)奇数 :nth-child(odd) 或 :nth-child(2n+1)偶数 :nth-child(even) 或 :nth-child(2n)官方链接::nth-child...
2021-07-27 15:40:16
213
原创 小程序获取胶囊位置，并根据胶囊位置设置定位
<view class=“test" catchtouchmove style="top:{{topHeight}}px;right:{{rightPosition}}px"></view>lifetimes: { // 在组件实例进入页面节点树时执行 attached() { const { height, top, right } = wx.getMenuButtonBoundingClientRect(); const width = wx.g
2021-07-27 15:27:51
1967
原创 CSS 实现底部弹窗渐进渐退 calc() transform
width: calc(100% - 40px);旋转 `transform`: rotate(90deg);<template> <div> <el-button type="primary" @click="showCard = true">点击触发弹窗</el-button> <div class="mask-layer" @click="showCard = false" v-if="showCard"><
2021-07-27 15:20:25
712
原创 CSS 页面禁止长按保存图片和长按复制文字
禁止长按保存图片img{ pointer-events:none; // 禁止none ，启用auto}禁止复制文本*{ -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
2021-06-25 14:47:45
1261
原创 手写call、apply、bind
// 手写call、apply、bind// 实现思路// 通过对象属性的方式调用函数，这个函数里面的this指向这个对象// 每次调用新增 一个symbol属性，调用完删除// 这个symbol属性就是调用mycall方法的函数// 函数形参中使用…ary是将多个形参都放到了一个数组里，在函数内部使用arg这个变量时，就是包含所有形参的数组// 在调用context fn时候，…arg是为了展开数组，依次传入参数调用函数let Person = { name: 'Tom',
2021-04-07 11:29:32
92
原创 字符串处理
解析 URL Params 为对象let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';parseParam(url)/* 结 果{ user: 'anonymous',id: [ 123, 456 ], // 重复出现的 key 要组装成数组，能被转成数字的就转成数字类型city: '北京', // 中⽂需解码enabled
2021-04-02 16:54:57
107
1
原创 git remote
使用git把代码提交到远程仓库的时候，报错：There is no tracking information for the current branch.这时候需要用git remote指定远程仓库这个时候第一次push需要网址： $ git add --all 或者使用 git add .(所得的文件) | git add file.js(对用指定文件)$ git commit -m "提交信息"$ git remote add origin '远程仓库url'$ git push
2021-04-02 09:50:57
113
原创 超出文本 单行、多行 显示省略号
单行width: 100%; /*一定要设置宽度，或者元素内含的百分比*/overflow:hidden; /*溢出的部分隐藏*/white-space: nowrap; /*文本不换行*/text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）；clip：不显示省略标记（...），而是简单的裁切*/多行display: -webkit-box;/* -webkit-box-orient: vertical; *//*! autoprefixer
2021-03-25 11:23:31
105
原创 1、Node.js 在安装模块的时候报错，缺少python环境 2、安装node-sass提示没有vendor文件的解决办法
1、Node.js 在安装模块的时候报错，缺少python环境// 以管理员身份运行cmdnpm install --global --production windows-build-tools2、安装node-sass提示没有vendor文件的解决办法cnpm rebuild node-sass --save-dev
2021-03-23 14:47:17
1143
原创 使用 nvm 管理不同版本的 node 与 npm
安装nvmhttps://github.com/coreybutler/nvm-windows/releases选择nvm-setup.zip，下载后直接安装。验证是否安装成功nvm -vnvm常用命令nvm off //禁用node.js版本管理(不卸载任何东西)nvm on //启用node.js版本管理nvm install <version> //安装node.js的命名 ver
2021-03-22 15:02:54
88
原创 瀑布流布局
等宽瀑布流实现思路：首先设置列宽度，然后计算能够展示的列数。向每一列中添加图片。代码：<template> <div ref="waterfall" class="waterfall-width-column"> <div style="display:flex;justify-content:space-around"> <div v-for="(item,index) in load
2021-03-15 15:34:25
200
1
转载 JavaScript 笔记
Array 对象Array.isArray()返回一个布尔值，表示参数是否为数组。valueOf()表示对该对象求值，数组的valueOf方法返回数组本身。toString()数组的toString方法返回数组的字符串形式。var arr = [1, 2, 3];arr.toString() // "1,2,3"var arr = [1, 2, 3, [4, 5, 6]];arr.toString() // "1,2,3,4,5,6"push()用于在数组的末端添加一个或多个元素，
2021-03-12 14:41:55
74
原创 使用Object.defineProperty()实现监听数据变化并在视图中更新
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- 数据
2021-03-10 11:41:41
448
原创 Vue组件化 $attrs/provide/inject/slot
$attrs包含了⽗作⽤域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当⼀个组件没有声明任何 prop 时，这⾥会包含所有⽗作⽤域的绑定 (class 和 style 除外)，并且可以通过 vbind="$attrs" 传⼊内部组件——在创建⾼级别的组件时⾮常有⽤。使用：// child：并未在props中声明foo <p>{{$attrs.foo}}</p>// parent <HelloWorld foo="foo"
2021-03-05 14:50:20
198
1
原创 获取url中“?“符后的字符串
// url格式：index.php?act=exampleAct&op=exampleOp&example_id=10getUrlParams(){ var url = location.search; //获取url中"?"符后的字符串 var obj = {}; if(url.indexOf('?') != -1){ var str = url.substr(1); var strs = str.split('&');
2021-03-01 17:19:05
422
原创 Cookie的属性
Cookie一共十个属性：Name: Cookie名Value: Cookie值Domain: Cookie的域。如果设成.test.com，那么子域名a.test.com和b.test.com，都可以使用.test.com的Cookie。Path: Cookie的路径。如果设成/path/，则只有路径为/path/的页面可以访问该Cookie。如果设为/，则本域名下的所有页面都可以访问该Cookie。Expires / Max-Age:Cookie的超时时间。若设置其值为一个时间，那么当到达.
2021-02-22 15:28:21
4189
1
原创 Promise.all和Promise.race
一、Pomise.all的使用Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。具体代码如下：let p1 = new Promise((resolve, reject) => { resolve('成功了')})let p2 = new Promise((resolve, reject) => { resolve('succe
2021-02-22 11:53:48
76
原创 BFC、IFC、GFC 和 FFC
CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。BFCBFC(Block Formatting Contexts)直译为"块级格式化上下文"。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。如何产生BFC？float的值不为none。overflow的值不为visible。position的值不为relative和static。display的值为table-cell, table-c
2021-02-03 10:07:23
147
原创 图片懒加载的三种实现方式
图片懒加载的三种实现方式：一、getBoundingClientRect API + Scroll with Throttle + DataSet API二、IntersectionObserver API + DataSet API三、vue-lazyload一、getBoundingClientRect API + Scroll with Throttle + DataSet API<img data-src="shanyue.jpg">首先设置一个临时 Data 属性 da
2021-01-27 17:43:15
2467
原创 Vue全局防抖和节流
防抖防抖分为两种:1、立即执行：频繁触发事件，第一次触发时执行函数，后面触发不会执行，停止触发，间隔一定时间之后再触发事件，函数才会再次执行。// 防抖处理-立即执行const on = Vue.prototype.$onVue.prototype.$on = function (event, func) { let timer; let flag = true; let newFunc = func if (event == 'click') { newFunc = fu
2021-01-25 18:13:03
1450
原创 el-input 解决无法输入问题
循环生成el-input，并且循环绑定不同的v-model，但无法输入值。查找到原因：因为组件嵌套太深，导致组件无法刷新。解决方法如下：使用@input事件，在输入时进行强制刷新<el-input v-model="inputData" @input="onInput()" /> onInput(){ this.$forceUpdate();}...
2021-01-21 18:31:56
3143
2
原创 Vue项目中../路径./路径@/路径~@/路径的区别
…/ 表示父级目录下./ 表示当前目录下@/ 是webpack/build/webpack.base.conf.js中配置的路径别名~ @/中的 ~ 代表根目录，~@即根目录下的配置为@的路径
2021-01-15 10:13:26
3712
1
原创 Vue点击页面详情后返回，停留在原始位置，且不刷新（使用keep-alive实现）
场景：pageOne页面是一个商品列表页面，在这个页面点击商品，就会跳转到pageTwo商品详细页面。此时再从pageTwo页面返回到pageOne页面时，pageOne页面需要做到：1.记录pageOne之前的滚动的距离。2.不重新请求数据。keep-alivekeep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。App.vue<template> <
2021-01-11 19:00:24
1783
1
原创 CSS 提示工具(Tooltip) 与 CSS绘制三角形和箭头
CSS 提示工具(Tooltip)<div> <div class="cssTooltip">CSS 提示工具(Tooltip) <span class="tooltiptext">Tooltip</span> </div></div><style scoped lang="scss">.cssTooltip { cursor: pointer; position:
2021-01-06 15:35:01
491
原创 Vue移动端弹出弹窗时禁止底部页面滑动
弹出弹窗时将body设置成fixed，弹窗消失时将body恢复原位。popupVisible(newValue) { if (newValue) { document.body.style.position = 'fixed'; document.body.style.width = '100%'; document.body.style.height = '100%'; } else { document.body.style.position = 'stat
2021-01-05 14:15:54
395
原创 Vue 手机页面无法滑动
在页面中加入以下代码：overflow-x: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;
2020-12-25 15:47:08
2987
2
原创 CSS文本 超出内容显示... / 换行
超出内容显示…text-overflow: ellipsis;换行：word-break: normal|break-all|keep-all;
2020-12-25 14:11:23
1467
原创 Vue 拨打电话
<div @click="callPhone"> 拨打电话</div>callPhone () { window.location.href = 'tel:110'}
2020-12-21 10:21:59
280
原创 Vue移动端实现拖拽+吸边处理
<template> <div> <div ref="customerService" class="customer-service" @touchstart="touchstartHandle('customerService',$event)" @touchmove="touchmoveHandle('customerService',$event)" .
2020-12-10 17:10:16
966
5
原创 Vue路由跳转
router-link1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。 2.带参数 <router-link :to="{name:'home', params: {id:1}}"> // para
2020-12-09 15:46:30
72
原创 Vue父子组件传值，子组件中props的多种类型总结
props: { // 基础类型检测 (`null` 意思是任何类型都可以) propA: Number, // 多种类型 propB: [String, Number], // 必传且是字符串 propC: { type: String, required: true }, // 数字，有默认值 propD: { type: Number, default: 100 }, // 数组/对象的默认值应当由一个工厂函数返回 pro
2020-12-09 14:23:14
3653
1
原创 Vue2.0子组件修改父组件传来的值时报错
场景：子组件是一个弹窗，父组件传值控制弹窗的显示。当在子组件关闭弹窗时，会改变父组件传来的值，这时控制台报错。代码：<div class="user-status" @click="loginDialogVisible = true"> <i class="el-icon-user"></i> <span>快速登录/注册</span></div>// UserLogin为弹窗组件<UserLogi
2020-12-09 10:38:04
632
原创 el-select中嵌套el-tree
实现效果：代码：<template> <div> <el-select v-model="value" multiple @change="selectChange"> <el-option style="height: auto" :value="selectedValue">
2020-12-08 18:40:59
2416
2
原创 Vue实现预渲染
前言Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一个 html 文件，然后根据访问的 url 来匹配对应的路由脚本，动态地渲染页面内容。单页应用在优化了用户体验的同时，也给我们带来了许多问题，例如 SEO 不友好、首屏可见时间过长等。服务端渲染（SSR）和预渲染（Prerender）技术正是为解决这些问题而生的。服务端渲染与预渲染区别客户端渲染：用户访问 url，请求 html 文件，前端根据路由动态渲染页面内容。关键链
2020-11-27 09:59:11
2940
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人