- 博客(22)
- 收藏
- 关注
RSS订阅原创 为什么要使用encodeuricomponent？
1、encodeuricomponent可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ’ ( ) 。其他字符（比如 ：;/?????&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。2、encodeuricomponent什么时候使用：用于url作为参数传递的场景中使用url当作参数传递的时候，当参数出现空格这样的特殊字段，后台只可以读取
2021-04-25 15:14:11
1786
原创 vue项目中移动端的图片预览
首先我试过三种方式分别是wc-view、vant中的upload组件、v-viewer插件（也可用于pc端）。这三种的差别在于wc-view：只可以放大预览，不可以手动放大图片。vant中的upload组件：可以放大预览，也可以手动放大，但是它不可以无限放大。v-viewer：是既可以放大预览，也可以手动放大，最终我选择了这一钟1、wc-view插件的方式首先安装依赖npm i wc-view --save-dev在main.js中引入文件import wcView from 'wc-v
2021-04-08 10:24:49
599
1
原创 遍历对象的方法
Object.keys()let meals = { mealA: 'Breakfast', mealB: 'Lunch', mealC: 'Dinner'};for (let key of Object.keys(meals)) { let mealName = meals[key]; // ... do something with mealName console.log(mealName);}// 'Breakfast' 'Lunch' 'Dinner'Object.val
2021-04-01 17:08:31
142
原创 数组遍历方法
for循环let arr = [1,2,3,4]for(let j = 0,len=arr.length; j < len; j++) { console.log(arr[j]);}forEach循环1.普通函数写法array.forEach(function(element) { console.log(element);});2箭头函数写法arr.forEach((item,index,array)=>{ console.log(index+':'+a
2021-04-01 16:54:45
178
原创 vue移动端适配
vant组件库中的进阶用法推荐postcss-pxtorem和lib-flexibleVant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。其中的rootValue:37.5 不建议修改。注意，若使用37.5则设计稿也建议使用375为标准的，尝试过使用7
2021-04-01 15:40:30
90
原创 vue-cli创建vue项目
首先检查一下是否安装了vue以及vue-cli用vue -V检查版本，如果出现’vue’ 不是内部或外部命令，也不是可运行的程序或批处理文件。则没有安装vue -V安装vue以及vue-clinpm install -g vuenpm install -g @vue/cli 安装完后即可检查一下版本vue -V##快速打开存放项目的文件夹在当前文件夹空白处出单击鼠标，然后按下快捷键Alt+D，这时候光标会自动聚焦到地址栏。直接输入cmd，按回车如上操作即可快速在命令窗口
2021-04-01 12:45:29
7313
5
原创 meta标签
必须属性content：定义与 http-equiv 或 name 属性相关的元信息。可选属性http-equiv：把 content 属性关联到 HTTP 头部。可选值：content-typeexpiresrefreshset-cookieeg：使用带有 http-equiv 属性的 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。<meta http-equiv="charset" content="iso-8859-1"><meta http-
2020-06-28 10:19:06
108
原创 如何理解HTML语义化
语义化根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。语义化标签main:页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能article:显示像报纸一样的文章内容。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等。section:具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。如果只是为了添加样式，请用div！（有语义化的div）asid
2020-06-28 09:22:01
89
转载 学习：grid布局
说实话，能支持我看完的，真的是觉得非常有用，哈哈哈哈哈。。。。。一、概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid
2020-05-21 15:12:43
240
转载 学习：关于色彩理论
1. Color Wheel所谓Color Wheel，就是将一系列颜色，有次序地通过一个圆盘的形式，展现出来。它的产生方式是，首先列出三原色（PRIMARY COLORS）：红、黄、蓝。然后，二二混合，产生二级颜色（SECONDARY COLORS）：绿、橙、紫。接着，继续二二混合，又产生6种三级颜色（TERTIARY COLORS）：黄橙、红橙、红紫、蓝紫、黄绿、蓝紫。通过不断混合相邻颜色，产生新的颜色，最终形成一个全域的Color Wheel。2. 类似色和互补色12色的Color
2020-05-21 11:15:14
489
原创 css：判断从盒子的上下左右哪个位置进入盒子
html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> body { padding: 2em; text-align: center; } .box { position:
2020-05-19 10:29:38
174
转载 css：实现斑马条纹背景
效果代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .container { display: flex; flex-wrap: wrap; justify-content: space-around; align-content: space-aroun
2020-05-18 16:04:02
528
原创 学习cookie
什么是cookie？Cookie（复数形态Cookies），类型为「小型文本文件」，一般不超过 4KB 的小型文本数据，指某些网站为了辨别用户身份而储存在用户本地终端（访问页面的设备，比如：手机、电脑）上的数据。它由一个名称（Name）、一个值（Value）和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成。如何查看cookie？可以在浏览器的开发者工具中查看到当在这里插入图片描述前页面的 Cookie：如何设置cookie？1、客户端发送 HTTP 请求到服务器。2、
2020-05-17 09:47:37
205
原创 js：记录函数、构造函数、原型以及原型链的学习。
函数每个函数都有其属性和方法。属性1、length属性。2、prototype属性：每个函数都有一个prototype属性，这个对象指向原型对象（下面会讲到什么是原型对象）；每个函数都包含不同的原型对象；当将函数用作构造函数的时候，新创建的对象会从原型对象上“继承”属性。方法1、call（）。2、apply（）。3、bind（）。4、toString（）。构造函数专门用来生成实例对象的函数。它就是对象的模板，描述对象的基本信息；构造函数就是一个普通的函数。为了和普通函数区别，构造函数名
2020-05-15 17:08:59
126
原创 PhotoSwipe:学习PhotoSwipe.js 相册展示插件
官网：http://photoswipe.comgithub：https://github.com/dimsemenov/photoswipe第一步引入css、js<!-- Core CSS file --><link rel="stylesheet" href="path/to/photoswipe.css"> <!-- Skin CSS file (styling of UI - buttons, caption, etc.) In the fold
2020-05-11 16:17:38
643
原创 微信小程序：增加水印
通过封装组件的方式实现html<view class='water'> <view class='row' wx:for="{{rows}}" wx:key="index"> <view class='col' wx:for="{{cols}}" wx:key="index" style="color:{{color}}">{{name}}</view> </view> </view>css.
2020-05-10 11:13:35
1279
原创 小程序：实现从一个页面跳转到另外一个页面，把另外一个页面的值带到上个页面
另外一个页面js goback: function (e) { console.log(e) var that = this var pages = getCurrentPages(); var currPage = pages[pages.length - 1]; //当前页面 var prevPage = pages[pages.l...
2020-05-07 15:59:40
1280
原创 小程序：实现点击增加相应的内容以及删除
html<!--index.wxml--> <view class="delete-container" wx:for="{{addPrice}}" wx:key=""> <view class="delete-icon"> <icon class="iconfont icon-jianshao1-copy " data-inde...
2020-05-07 15:37:24
767
原创 vue：style标签中的scoped属性（作用域）和lang属性的介绍
1、 什么是CSS预处理器CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。CSS预处理语言有SCSS (SASS) 和LESS等等，总之都是用来实现样式的。2、lang因此lang的属性可选：scss（sass）、less等等即：<style ...
2020-05-05 17:48:03
1360
原创 小程序：实现textarea随输入的文字行数的变化，高度自动增加（类似微信聊天输入框）
小程序：实现textarea随输入的文字行数的变化，高度自动增加（类似微信聊天输入框）原理：把textarea输入的内容放到text内显示出来，并且把text的内容隐藏，需要用到定位把textarea覆盖到text上。html：js：css：效果：可以自己实现看一下效果是不是自己想要的????。...
2020-05-04 17:52:11
3493
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人