Sass笔记
简介
Sass是一款强化CSS的辅助工具,它在CSS语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能
sass从第三代开始,放弃了缩进式风格,并且完全向下兼容普通的css代码,这一代的sass也被称为scss
使用方法
我使用的WebStorm编辑器,用它写scss不太理想。第一点输出css文件路径,如何配置,我是真的不懂。第二点安装autoprefixer插件,如何配置,同样不懂,感觉自己有点蠢(´-ω-`)
换成VSCode吧,安装Live Sass Compiler插件,它是scss预处理器用来编译成css文件,如果你见到两个相同名字的插件,老版本v3.0.0已经停止更新,当前新版本是v5.5.1,总之选最新版的就对了
另外,再安装个Autoprefixer插件,它是用来辅助Live Sass Compiler插件,帮助你生成兼容前缀,比如万恶的IE,你不需要亲自写兼容前缀了,Autoprefixer插件会帮你做这件事
两个插件完毕后,开始配置吧,首先打开Liv ...
epub电子书制作
简介简单点说,epub就是电子书,这个电子书有封面、插图、目录索引,而你只需要一款阅读器打开它。
对比txt、word、pdf、markdown优势在哪?
我喜欢把带有封面的电子书放到我的书柜上,但txt、word、markdown没有封面,下面是书柜展示:
也就是说,我想制作带有封面的电子书放到我的书柜上,只剩下pdf、epub选择了;通常我在手机与电脑设备上阅读轻小说,如果是pdf格式的电子书,它在手机上的阅读体验相当糟糕,你需要不停地放大缩小来看每一段文字,请恕我拒绝(´・ω・`),相反epub在手机设备上体验极好,可以随意设置字体大小,还能看图,就决定用epub来制作电子书了
电子阅读器
我喜欢美丽的事物,最好书柜上的图书能展示封面,另外我很讨厌丑的阅读器,目前只用过AppleBooks(苹果设备专有的阅读器)、NeatReader(国人制作全平台epub阅读器),下面是AppleBooks展示:
Sigil和Calibre这两款是制作epub的工具,自然也能读取epub电子书,但它们不适合当书柜,给出的理由是不优雅。我知道看这篇文章的读者,有部分是实用主义(能用就行 ...
uni-app笔记
简介
uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台
uni-app作为跨平台一种解决方案,有预感坑会非常多,了解如何写代码和解决bug即可;官方文档很杂乱,可能是因为杂乱关系,部分文档未能及时更新,没办法保证全部API可以使用;官方推荐的教学视频,也不推荐看,理由是视频录制时间为19~20年,跟现在版本差别很大,硬要看也不是不行,尽量选年份离现在比较近的
学习前需要的知识点
html+css+js
vue
微信小程序
后端(不会也没关系)
scss(另一个名字sass)
生命周期应用生命周期
注意:应用生命周期仅在App.vue中监听,在其他页面监听无效
页面生命周期
组件生命周期
项目规范兼容页面要点
rpx单位
长列表用nvue的list组件,app端瀑布流用nvue的waterfall组件等
尽量使用class选 ...
小程序笔记
简介
用户不需要下载安装,点开即用,用完即走,实现用户当前需求的工具
运行环境不同:网页运行在浏览器环境中,小程序运行在微信环境中
API不同:小程序无法调用DOM和BOM的API,但小程序可以调用微信环境提供的API,例如:地理位置、扫码、支付
项目结构
默认项目文件
pages:用来存放所有小程序页面,以单独文件夹存在
utils:用来存放工具性质的模块
app.js小程序项目的入口文件
app.json:小程序项目的全局配置文件
app.wxss:小程序项目的全局样式文件
project.config.json:项目的配置文件
sitemap.json:用来配置小程序及其页面是否允许被微信索引
常用组件
view:类似于HTML中的div,是一个块级元素
block:类似于Vue中的template,是一个占位符
scroll-view:滚动列表效果
swiper和swiper-item:轮播图容器组件和轮播图item组件
text:显示文字,selectable属性实现长按选中文本
rich-text:通过nodes属性把HTML字符串渲染为对应的UI结构<ric ...
vue项目
简介
这个项目仅用于练习vue,功能并未完善,bug也非常多,目前已完成主页、歌单列表、音乐播放、歌词;如果你想运行项目,需要下载musicapp与NeteaseCloudMusicApi-master,分别注入依赖后同时运行;素材不下载也没关系,并不妨碍运行项目;如果你希望加入新功能,可以点击下方文档
点我进入网易云音乐项目教学视频
点我进入网易云音乐NodeJS版API文档
如果链接失效,谷歌搜索网易云音乐NodeJS版API
脚手架创建musicapp项目
创建musicapp项目1234567// 使用vue脚手架生成vue create musicapp// 多选router、vuex、lesscd musicappnpm run serve
检测视窗宽度自适应字体大小
public/js/rem.js123456789101112131415161718192021const remSize = () => { // 获取视窗宽度 let deviceWidth = document.documentElement.clien ...
vue笔记
简介
Vue是JS延伸出的一种框架,能在一个组件中写HTML、CSS、JS,它不需要操作DOM,而是通过渲染方式挂载到页面上,效率是不是会高一些呢?
写代码也很爽,我想给一个功能添加点击事件,只需要给标签绑定@click,再到方法里写绑定事件的函数,这样就好了;对比原生js,你需要到html添加id属性,在回到js获取id,再给id绑定事件写函数,步骤是不是较为繁琐?
说说不好的点,你需要记住大量指令,经常查阅文档是家常便饭的事
安装过程与创建hello-world项目
安装Node,选择长期维护版,自带npm
12345// 查询node版本node -v// 查询npm版本npm -v
通过npm指令安装nrm,nrm是管理npm的工具,由于npm服务器在国外,通过npm下载依赖会因为墙问题,导致项目运行不起来,所以需要nrm修改下载源,比如taobao镜像源在国内,下载速度会快一些
12345678// 安装nrmnpm install nrm -g// 查看所有支持源nrm ls// 使用taobao镜像源nrm use taobao
安装vue脚手架,用游戏方式来 ...
freecodecamp训练
简介介绍下freecodecamp组织,以”帮助人们免费学习编程”为使命,创建了大量免费的编程教程,包括交互式课程、视频课程、文章等。看完HTML、CSS、JS理论知识后,我已经等不及想在freecodecamp实战啦!每次课题挑战成功,我会截图保存下来,总结自己遇到难题
如果题目太难或不理解,抄作业总会吧?
第一篇 响应式网页设计认证1.Tribute Page这是一个链接,点我查看致敬页
2.Survey Form这是一个链接,点我查看调查表单
3.Product Landing Page这是一个链接,点我查看产品登入页
4.Technical Documentation Page这是一个链接,点我查看技术文档页
5.Personal Portfolio这是一个链接,点我查看个人作品集展示页
第二篇 JavaScript算法和数据结构1. 回文检查器123456789101112function palindrome(str) { // 除了英文数字,过滤其他符号 let a = str.match(/[a-zA-Z0-9]/g).join('') ...
《JavaScript高级程序设计》笔记
学习方法:全部内容都要看,内容能理解换下一个,无法理解上b站看解说,找不到解说上Google看文章,依然无法理解,那么抱着疑问回到书中继续往下看吧
第一章 简介1.2 JavaScript实现
完整的JavaScript实现包含:
核心(ECMAScript)
文档对象模型(DOM)
浏览器对象模型(BOM)
ECMAScript提供语言核心功能;DOM提供与网页内容交互的方法和接口;BOM提供与浏览器交互的方法和接口
第二章 HTML中的JavaScript2.1 Script元素
标签位置:为了避免加载JS文件导致页面空白,现代Web应用程序通常将所有JS引用放在元素中的页面内容后面
延迟脚本:defer属性脚本在执行时不会影响页面加载,脚本会被延迟到整个页面都解析完毕后再运行;延迟脚本不一定总会按顺序执行,因此最好只包含一个脚本
1<script defer src="example1.js"></script>
异步脚本:async属性脚本同样不会影响页面加载,脚本下载完不管页面是否解析完直接运行;同样不一定会按顺序执 ...
八乡山之旅
前阵子搭建完网站想休息一会,正巧朋友问要不要去八乡山,我立马答应了( ^ω^ )听说他们以前骑自行车上山 🚴,看了眼窗外的路,路不仅陡还很远,甚至还开起玩笑问要不要再骑一次,他表示骑到一半开始后悔了😂
来到山顶,风景极其美丽!明明太阳很大却不热,甚至还有一些冷。上面有凉亭和废弃建筑,不远处还有发电厂,以及不允许进入的军事管辖地。我们走了很长一段路,在某处休息时,看到一只很大的稚鸡飞过,吓了一跳 Σ(・□・;)
后来想去看瀑布,可惜车子快没油了,只能匆忙下山返程。偶尔跟朋友来一场说走就走的旅行,不管去哪都非常有意思 :)
奥睿科拓展坞与M2三星硬盘
Macbook系统盘256G是真的不够用╮(╯▽╰)╭趁打折期间入了奥睿科拓展坞,里边内置硬盘盒,桌面清爽党狂喜
拆包,扭螺丝,贴散热胶(赠送的)
体验方面:
M2三星读写600M左右,传输文件400M/s,没办法发挥硬盘性能
解决了macbook接口问题,缺点输入接口只有一个,比方说你没办法用USB口连接电脑
拓展坞是靠金属散热,没有风扇散热,正常使用是足够的,除非频繁使用温度会飙到50°+
不知道为什么拓展坞,偶尔会发出“滴滴”声😅,虽说大部分时间很安静就是了
罗技无线鼠标有时会卡顿,不少网友表示是苹果的锅?
除了“滴滴”声,鼠标有时卡顿,整体很满意
Mac罗技无线鼠标卡顿解决方法第一个方案:系统设置改网络服务顺序,蓝牙PAN调到顶,本质上是减少干扰(没用)第二个方案:下载厂家提供的驱动,罗技无线鼠标用的是USB微型接收器,免驱动无蓝牙显示(没用)第三个方案:2.4GWiFi与蓝牙使用的频段产生干扰,无线鼠标卡顿真正原因(有用)
WiFi设置成5G信号频段,两者互不干扰,但我家的路由器老旧无5G信号频段,下面有另一种解决方法
电脑接上网线,电脑关闭WiFi连接 ...