Vue组件化编程+Vuex
本文主要用于记录Vue2.0的组件化编程功能和vux管理数据,参考视频【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通】
主要介绍效果展示实现应用中局部功能代码和资源的集合代码复用组件可以产生嵌套
模块与组件 模块化与组件化模块组件模块化组件化
向外提供特定功能的js程序 一般就是一个js文件
为什么 ? 因为js文件很多很复杂
作用 复用js 简化js的编写 提高js运行效率
用来实现局部(特定)功能效果的代码集合(html/css/js/image…)
为什么? 一个界面的功能很复杂
作用 复用编码 简化项目编码 提高运行效率
当应用中的js都已模块化来编写 那这个应用就是一个模块化应用当应用中的功能都是以多组件的形式来编写 那么这个应用就是一个组件化应用
非单文件组件主要介绍基本语法经典案例vue提供非单文件组件的形式 使得一个文件包含有n个组件来编写为什么组件中要使用data:{return{xxx}}?123456789101112131415<script> // const data = { // x:1, ...
替身面板生成器
前言本文主要介绍如何给自己的替身匹配相应的面板
效果展示
配置参数鉴于在线版网址已经挂掉的情况下,建议使用离线版本,本质也是个echarts图表
在线版地址:点击离线版地址:点击之后右键另存为html使用方法:
选择右边输入数值之后生成数据
之后右击图片另存为,注意是替身面板,不是整个图片
下载以下任意图片 用ps工具覆盖刚刚的面板数值上去
下面介绍的是来自于b站up主木南工坊的pr替身教学
可以直接参考原视频的地址
JOJO石之海信封替换
前言本文用自建的jojo信封替换原akilar博客的蓝色信封,原帖地址:akilar的信封留言板
效果展示
配置参数
在[Blogroot]运行指令1npm install hexo-butterfly-envelope --save
在站点配置文件或者主题配置文件添加配置项(对,两者任一均可。但不要都写)12345678910111213141516# envelope_comment# see https://akilar.top/posts/58900a8/envelope_comment: enable: true #开关 cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg #信笺封面图 message: #信笺内容,支持多行 - 有什么想问的? - 有什么想说的? - 有什么想吐槽的? - 哪怕是有什么想吃的,都可以告诉我哦~ bottom: 自动书记人偶竭诚为您服务! #信笺结束语,只能单行 height: #调整信笺划出高度,默认1050px ...
给Blog安排一个图床
前言初次尝试使用Typora编写上传博客的时候,发现图片居然都加载不出来,原因是使用软件截屏的时候直接cv到了文章内容里面,地址还是本地的地址,以下提供了两种方案对图片进行在线化处理。
自2021年12月开始jsdeliver不提供中国内部的加速服务,可以自行斟酌换cdn加速,笔者学校网络暂时没有影响。
PicGo图床本地插件
安装PicGO图床
打开github 右上角选择你的仓库
新建一个仓库
仓库名称为picgo 公开该仓库
回到右上角settings
选择Developer settings
选择Personal acess tokens 并创建新的token之后复制下来(只有一次)
回到PicGo 在图床设置里选择github图床 设为默认图床后确定提供一下cdn加速的地址,cv即可: https://cdn.jsdelivr.net/gh/
安装插件1npm install hexo-asset-image --save
在_config.yml配置文件中,修改为post_asset_folder: true, 然后新建一篇文章1hexo new post ces ...
Animation主页动画处理
前言采用wowjs对主页进行动画效果处理,使得页面加载更加平滑流畅
预览效果
主要配置
引入wow.min.js 和 animated.min.css123456inject: head: - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" media="defer" onload="this.media='all'"> bottom: - <script defer src="https://cdn.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script&g ...
RGB头像魔改
前言本教程为rgb头像魔改,替换原先的头像,可以自定义颜色。
预览效果
主要配置
引入rgbHead.css1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677/* rgb头像魔改 */.avatar-img { display: flex; justify-content: center; align-items: center; overflow: visible; border-radius: 55px; box-shadow: 0 0 10px black; background: linear-gradient(135deg, rgb(1, 255, 234), rgb( ...
Aplayer设置与优化
前言本教程分为两个版本,一个是插件版本,一个是修改源代码的版本。两个版本选择一个即可。
预览效果
源代码版(个人使用)插件版
引入aplayer.pug打开themes\hexo-theme-butterfly\layout\includes\head.pug里面添加1include ./third-party/aplayer.pug
创建aplayer.pug在themes\hexo-theme-butterfly\layout\includes\third-party下创建aplayer.pug 内容如下123456if theme.aplayer && theme.aplayer.enable .aplayer(data-id=theme.aplayer.id data-server=theme.aplayer.server data-type=theme.aplayer.type data-fixed=theme.aplayer.fixed ...
Hexo搭建+Github
Hexo搭建本博客使用Hexo框架搭建,Hexo是一款轻量级,高效的博客框架,可以使用markdown对文章进行编写,可以实现无后端评论系统,站内搜索等,以及支持一键部署到github或gitee等主流代码平台,让使用者更加专注于博客内容的更新,以下是hexo的官网,内有使用文档以及其他教程,本篇视频资源参考自【2021最新版】保姆级Hexo+github搭建个人博客
基础工具git+nodejs
git是一款强大的项目管理工具,可以用于自定义项目的管理,实现进度的上传以及拉去,安装git随后自行选择32位或者64位安装
之后一路next,安装之后使用git -v验证是否安装成功
nodejs,一款前端程序员必备的服务端语言,安装地址nodejs,也是一路next安装,随后打开cmd输入node -v和npm -v验证是否安装成功
安装Hexo
新建一个项目文件夹,命名随意,用来放自己的博客内容,我的是blog
进入该文件夹,右键git bash输入以下指令安装hexo(注意git的命令窗口不是使用ctrl v进行粘贴,建议右键paste)
1npm install -g ...
Cyberpunk配色魔改
前言刚开始的主页没有啥个人风格,个人比较喜欢dark模式,但不喜欢它的反人类透明度,就直接改源码去掉了日间模式和透明度,之后发现还是不够满意,刚好就参考到了之前在永庆坊拍的照片配色风格
点击查看图片
使用步骤
新建css 自行命名 需要注意的是,如果你自己注释 最好不要使用双斜杠,如果报错,建议你移除没有的部分 12345678910111213141516171819202122232425262728293031323334353637383940/* 所有背景(包括首页卡片、文章页、页面页等) */#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_po ...
浅谈ES6-11
本文主要用于记录es6-11的学习过程,参考视频【尚硅谷Web前端ES6教程,涵盖ES6-ES11】
主要介绍
ECMA:ECMA 欧洲计算机制造商协会
ECMAScript:是ECMA国际通过ECMA-262标准化的脚本程序设计语言
ECMA-262:它定制的一种标准
历史:每年都会更新一个版本 截至写稿已经是第十二版 即es12
let主要介绍基本语法经典案例和var类似 又有点不同
声明变量
123let a;let b = 521,g = 'dasda',h = [];//可以一次声明多个
变量不能重复声明,但var可以。作用 防止变量被污染
块级作用域 es5 全局 函数 eval
12345{ let a = 'casc';}console.log(a);//这里会出错,但var可以,因为let只能在这个块级作用域里面生效
不存在变量提升
1234console.log(song);var song = 'aaa';//此时输出undefined 因为var声明的变量会提前赋一 ...