Giter Club home page Giter Club logo

blog's People

Contributors

vhxubo avatar

Stargazers

avatar avatar

Watchers

avatar avatar

blog's Issues

Day.js

Moment.js 的 2kB 轻量化方案，拥有同样强大的 API

在 Day.js 中使用**时区

var utc = require('dayjs/plugin/utc') // dependent on utc plugin
var timezone = require('dayjs/plugin/timezone')
dayjs.extend(utc)
dayjs.extend(timezone)

dayjs().tz('Asia/Shanghai') // 获取上海时间

dayjs.tz.guess() // 猜测当前时区

// dayjs.tz.setDefault("America/New_York") // 用来设置默认时区

VSCode 自定义主题样式

在别的视频中看到别人的className显示很好看，于是想尽方法去寻找那个字体

最后，当我放弃的时候，发现CSS Modules and React | CSS-Tricks中使用到该字体：Operator Mono Ssm，但是对于我想要的那个好看的样式，需要在 italic 模式下

于是乎，在搜索 Operator Mono 字体时，发现beichensky/Font: FiraCode 和 Operator Mono 字体中的设置文章

"editor.fontFamily": "Operator Mono",
"editor.fontLigatures": true, 
"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "name": "italic font",
            "scope": [
                "comment",
                "keyword",
                 "storage"
            ],
            "settings": {
                "fontStyle": "italic"
            }
        },
    ]
}

但是，这里面的 scope 覆盖的太多，通过 > inspectTMScopes 便可以知道指定的文本在哪个范围下

最终的配置文件如下

  "editor.fontFamily": "Operator Mono lig, Sarasa Term SC",
  "editor.fontLigatures": true,
  "editor.formatOnType": true,
  "editor.lineHeight": 1.5,
  "editor.fontWeight": "400",
  "editor.cursorWidth": 5,
  "editor.cursorBlinking": "solid",
"editor.fontFamily": "Dank Mono, Menlo, Monaco, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": [
                  //following will be in italic
                  "comment",
                  "emphasis",
                  "entity.name.method.js",
                  "entity.name.class.js",
                  "entity.name.tag.doctype",
                  "entity.other.attribute-name",
                  "entity.other.attribute-name.tag.jade",
                  "entity.other.attribute-name.tag.pug",
                  "keyword",
                  "keyword.control",
                  "keyword.operator.comparison",
                  "keyword.control.flow.js",
                  "keyword.control.flow.ts",
                  "keyword.control.flow.tsx",
                  "keyword.control.ruby",
                  "keyword.control.module.ruby",
                  "keyword.control.class.ruby",
                  "keyword.control.def.ruby",
                  "keyword.control.loop.js",
                  "keyword.control.loop.ts",
                  "keyword.control.import.js",
                  "keyword.control.import.ts",
                  "keyword.control.import.tsx",
                  "keyword.control.from.js",
                  "keyword.control.from.ts",
                  "keyword.control.from.tsx",
                  "keyword.operator.expression.delete",
                  "keyword.operator.new",
                  "keyword.operator.expression",
                  "keyword.operator.cast",
                  "keyword.operator.relational",
                  "keyword.operator.sizeof",
                  "keyword.operator.logical.python",
                  "italic",
                  "markup.italic",
                  "markup.quote",
                  "markup.changed",
                  "markup.italic.markdown",
                  "markup.quote.markdown",
                  "markup.deleted.diff",
                  "markup.inserted.diff",
                  "meta.delimiter.period",
                  "meta.diff.header.git",
                  "meta.diff.header.from-file",
                  "meta.diff.header.to-file",
                  "meta.tag.sgml.doctype",
                  "meta.var.expr",
                  "meta.class meta.method.declaration meta.var.expr storage.type.js",
                  "meta.decorator punctuation.decorator",
                  "meta.selector",
                  "punctuation.accessor",
                  "punctuation.definition.comment",
                  "punctuation.definition.template-expression.begin",
                  "punctuation.definition.template-expression.end",
                  "punctuation.section.embedded",
                  "quote",
                  "source.js constant.other.object.key.js string.unquoted.label.js",
                  "source.go keyword.package.go",
                  "source.go keyword.import.go",
                  "source.go keyword.function.go",
                  "source.go keyword.type.go",
                  "source.go keyword.struct.go",
                  "source.go keyword.interface.go",
                  "source.go keyword.const.go",
                  "source.go keyword.var.go",
                  "source.go keyword.map.go",
                  "source.go keyword.channel.go",
                  "source.go keyword.control.go",
                  "storage",
                  "storage.type",
                  "storage.modifier",
                  "storage.type.property.js",
                  "storage.type.property.ts",
                  "storage.type.property.tsx",
                  "tag.decorator.js entity.name.tag.js",
                  "tag.decorator.js",
                  "text.html.basic entity.other.attribute-name.html",
                  "text.html.basic entity.other.attribute-name",
                  "variable.language",
                  "variable.other.object.property"
                ],
                "settings": {
                  "fontStyle": "italic"
                }
            }
        ]
    }

参考

MySQL

Windows 下设置 root 密码

默认没有密码

mysql -u root
mysql > ALTER USER 'root'@'localhost' IDENTIFIED BY 'root';
mysql -u root -p

修改密码格式

https://www.itread01.com/content/1542710053.html

mysql > ALTER USER 'root'@'localhost' IDENTIFIED BY 'password' PASSWORD EXPIRE NEVER;
mysql > ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'root';

password-tool 实现

https://github.com/vhxubo/password-tool

开源项目

白屏优化

图标显示问题

页面美化

实现文件拖放

<v-data-table
  :headers="headers"
  :items="desserts"
  :search="search"
  @dragstart.native.prevent
  @dragover.native.prevent="getDraggedFile"
  @dragleave.native.prevent
  @drop.native.prevent="getDroppedFile"
></v-data-table>
methods: {
  getDroppedFile(event) {
    console.log(event.dataTransfer.files[0]);
  },
  getDraggedFile(event) {
    console.log(event.dataTransfer.items[0]);
  }
}

解决 Vue 列表数据渲染不能及时更新的问题

https://cn.vuejs.org/v2/guide/list.html
https://cn.vuejs.org/v2/guide/reactivity.html

方案一

清空数组，使用 concat 触发

this.desserts = []
this.desserts = this.desserts.concat(db.get('items').value())

方案二

使用 concat 触发并引入 lodash 进行数据去重

const _ = require('lodash')
this.desserts = _.uniq(this.desserts.concat(db.get('items').value()))

Edit 直接影响到表格数据

javascript对象的浅拷贝、深拷贝和Object.assign方法浅析_贝贝的前端 - SegmentFault 思否

原因分析

使用了数据的浅拷贝（直接赋值），应当使用深拷贝解决

浅拷贝直接引用的地址

this.item = item

解决方案

使用数据的深拷贝对数据进行转移

this.item = Object.assign({}, item)

去除默认应用菜单

import { app, protocol, BrowserWindow, Menu } from 'electron'
...
Menu.setApplicationMenu(null)

Windows Terminal 配置

Windows Terminal更新了配置文件方案，相比之前的json文件方便多了，正好电脑上次配置的没了，这次重新配置一下

代码补全还是需要安装PSReadLine

  • 下载Windows Terminal、PowerShell
  • 安装
Install-Module posh-git -Scope CurrentUser
Install-Module oh-my-posh -Scope CurrentUser
Install-Module -Name PSReadLine -Scope CurrentUser -Force -SkipPublisherCheck // 7自带
  • 配置字体Cascadia Code PL
  • 添加配置文件 notepad $PROFILE
Import-Module posh-git
Import-Module oh-my-posh
Set-PoshPrompt -Theme powerlevel10k_lean

设置代理

$env:http_proxy="http://127.0.0.1:7890"
$env:https_proxy="http://127.0.0.1:7890"

参考

前端小记

offset和client的区别

offsetWidth, clientWidth, scrollWidth and Height, respectively in CSS - GeeksforGeeks

  • offsetWidth: It returns the width of an HTML element including padding, border and scrollbar in pixels but it does not include margin width.
  • clientWidth: It returns the width of an HTML element including padding in pixels but does not include margin, border and scrollbar width.

<svg>的颜色修改

style="fill:red"以及style="stroke:red"

退出页面时显示可能存在未保存数据

window.onbeforeunload = (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault()
  // Chrome requires returnValue to be set.
  event.returnValue = ''
  return '关闭提示'      
}

对视频进行反转

transform: rotateY(180deg);

两个行块宽度50%却不在同一行 - SegmentFault 思否

Golang

VSCode 插件安装失败

Goproxy **

Go 1.13 及以上（推荐）

打开你的终端并执行

$ go env -w GO111MODULE=on
$ go env -w GOPROXY=https://goproxy.cn,direct

完成。

macOS 或 Linux

打开你的终端并执行

$ export GO111MODULE=on
$ export GOPROXY=https://goproxy.cn

或者

$ echo "export GO111MODULE=on" >> ~/.profile
$ echo "export GOPROXY=https://goproxy.cn" >> ~/.profile
$ source ~/.profile

完成。

Windows

打开你的 PowerShell 并执行

C:\> $env:GO111MODULE = "on"
C:\> $env:GOPROXY = "https://goproxy.cn"

luci-app

MVC 框架开发

  • M: /usr/lib/lua/luci/model/cbi
  • V: ``
  • C: /usr/lib/lua/luci/controller

配置文件 /etc/config

文件权限 /usr/share/rpcd/acl.d

开发调试

在开发调试的时候，需要删除 /tmp 下形如 luci-indexcache...lua和luci-indexcache..json的文件以及luci-modulecache目录，然后刷新页面，并且只有关闭页面才可以删除

参考链接

Eleventy (11ty)

Eleventy (11ty)是一个简单的静态博客生成器，支持liquid

我最喜欢它的一点是，它可以从任何地方获取到data，而不仅仅局限于本地创建的md文件

好想去玩Gatsby哎。。。

_data数据定义

在_data下创建一个新的文件，譬如posts，返回值应该为一个数组元素，对应liquid模板中也是posts，我们可以使用for循环对数据进行循环。加上分页我们就可以对每一项数据生成一页对应的数据。

JavaScript

前端面经

郑州深蓝电子有限公司

  • div和span的区别
  • 盒模型
  • 闭包
  • ==和===
  • v-if和v-show
  • vue响应式
  • 定位
  • 悬浮窗口
  • .clearfix
  • 用过的css库
  • 浮动
  • 手机页面与
  • HTML5 CSS3 的新标签等
  • Canvas
  • px、rem、em
  • vue周期（data初始化的位置）
  • vue响应式原理
  • vue父子组件通信
  • 作用域
  • 手写去重
  • 手写冒泡
  • 前端跨域处理
  • GET和POST的区别
  • vue-router路由处理
  • vuex是什么
  • CSS选择器的执行顺序
  • js基本数据类型

科蓝

  • 闭包的好处

      闭包的好处： 1.希望一个变量长期保存内存中； 2.避免全局变量污染； 3私有成员的存在。
  闭包有三个特性：
  1. 函数嵌套函数；
  2. 内部函数使用外部函数的参数和变量；
  3. 参数和变量不会被垃圾回收机制回收。

  • SPA优缺点

      优点：
  无刷新切换内容，提高用户体验。
  符合前后端分离的开发**，通过ajax异步请求数据接口获取数据，后台只需要负责数据，不用考虑渲染。前端使用vue等MVVM框架渲染数据非常合适。
  减轻服务器压力，展示逻辑和数据渲染在前端完成，服务器任务更明确，压力减轻。
  后端数据接口可复用，设计JSON格式数据可以在PC、移动端通用。
  缺点：
  不利于SEO（搜索引擎优化），应用数据是通过请求接口动态渲染，不利于SEO。
  首页加载慢，SPA下大部分的资源需要在首页加载，造成首页白屏等问题。

  • v-show和v-if的区别

     在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

  • Ajax流程

  • ==和===的区别

  • vue各个周期

学长

  • 存储方法
  • 数据结构
  • 缓存处理

其它参考

Webpack4 学习记录

Webpack是一个前端打包工具，只能用于采用模块化开发的项目。

Webpack最主要的就是各种loader和plugin

v5与v4差别较大，在使用时以官网文档为准。

对于学习还是需要用到再去学比较好呀，笼统的全学了太难为人了

html-webpack-pulgin

css-loader,style-loader

mini-css-extract-plugin

清理dist目录

通常比较推荐的做法是，在每次构建前清理 /dist 文件夹，这样只会生成用到的文件。让我们使用 output.clean 配置项实现这个需求。

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     index: './src/index.js',
     print: './src/print.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Output Management',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
    clean: true,  //like this
   },
 };

参考

Windows 究极配置

快速设置小鹤双拼

https://ifttl.com/add-flypy-to-win10-microsoft-pinyin-and-other-configuration/

首先打开注册表，找到这个路径

计算机\HKEY_CURRENT_USER\Software\Microsoft\InputMethod\Settings\CHS

然后新建一个名为 UserDefinedDoublePinyinScheme0 的字符串值，数值数据为

小鹤双拼*2*^*iuvdjhcwfg^xmlnpbksqszxkrltvyovt

设置开机是否开启 Hyper-V

如果使用 Windows PowerShell，必须使用引号将启动项标识符引起来，例如：“{49916baf-0e08-11db-9af4-000bdbd316a0}”或“{current}” 。1

bcdedit /copy "{default}" /d "Windows 11 With Off Hyper-V"
bcdedit /set "{f40847d6-13a4-11ec-a306-00155d9d7c47}" hypervisorlaunchtype Off

f40847d6-13a4-11ec-a306-00155d9d7c47 来自上一条命令

全局配置

小软件/不方便更新的软件使用 Chocolatey 安装

软件

Chocolatey

安装

Chocolatey Software | Installing Chocolatey

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

应用

[Win]使用Chocolatey管理你的小软件们 - 知乎

choco install listary
# choco install 7zip
choco install peazip
choco install treesizefree
choco install mpv
choco install git
choco install internet-download-manager
choco install autohotkey

BT Tracker 服务器地址大全与常用 BT 软件下载地址 Tracker List - DNS.iCoA.CN

插件

Footnotes

  1. https://docs.microsoft.com/zh-cn/windows-hardware/drivers/devtest/changing-the-friendly-name-of-a-boot-entry ↩

Nestjs + TypeORM

在Module互相引用的问题

nestjs - Nest can't resolve dependencies of the AuthService (?). Please make sure that the argument at index [0] is available in the AuthModule context - Stack Overflow

  • 记得在别的地方imports
  • 记得在Module里面exports

Nestjs swagger的dto自动生成问题

  • 取消对dto class的分号格式化

参见

TypeORM不正常运行

加入以下代码后不能正常使用

  constructor(
    @InjectRepository(User)
    private usersRepository: Repository<User>,
  ) {}
  • 检查是否在module中引入imports: [TypeOrmModule.forFeature([User])],

在Windows下面使用curl，需要对双引号进行转义

参考

promise

promise

  • 订阅模式
  • callback

使用方法

const pro1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('pro1 done')
  }, 1000)
})
pro1.then(value => console.log(value))

// result: pro1 done
function con (msg, time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(msg)
    }, time)
  })
}

con('hello', 1000).then(value => console.log(value))

解析

三种状态，两个内置函数；一旦承诺，无法从外部终止；多个promise不会 堵塞

三种状态

  1. pending（进行中）
  2. fulfilled（已成功）
  3. rejected（已失败）

内置函数

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve(value) — 如果任务成功完成并带有结果 value。
reject(error) — 如果出现了 error，error 即为 error 对象。

state — 最初是 "pending"，然后在 resolve 被调用时变为 "fulfilled"，或者在 reject 被调用时变为 "rejected"。
result — 最初是 undefined，然后在 resolve(value) 被调用时变为 value，或者在 reject(error) 被调用时变为 error。

Promise.all

Promise.all会等待耗时最长的promise,如果遇到失败，则全部失败。成功返回value数组。

以下代码将在5000ms后直接报错。

const pro1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('pro1 done')
  }, 1000)
})

const pro2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('pro2 done')
  }, 2000)
})

const proerror = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('fuck'))
  }, 5000)
})

Promise.all([pro1, pro2, proerror]).then(values => console.log(values))

参考链接

Reactjs ♥ 基础 Hooks

useState

组件的状态管理

const [name, setName] = useState('')

// 懒加载初始化? 只在需要的时候执行
const [name, setName] = useState(
  () =>  window.localStorage.getItem('name') || ''
)

useEffect

页面副反应

// 在每次页面更新都触发
useEffect(() => {
  console.log('DOM updated')
})

// 只在页面第一次渲染的时候触发
// 适用于初始化 JSON 数据等
useEffect(() => {
  console.log('Only on Mounted')
}, [])

// 根据数据状态进行数据更新
useEffect(() => {
  console.log('name updated')
}, [name])

// 在页面退出时执行, 类似于 Vue3 中的 `onUnmounted`
useEffect(() => {
  return () => {
    // 这里填写推出后最后执行的副反应
  }
})

useRef

获取 DOM 对象

// 因为在最开始的时候不加载 DOM, 需要配合 useEffect 使用
cosnt elemRef = useRef()

useEffect(() => {
  const elemNode = elemRef.current
  console.log(elemNode)
}, [])

React Hooks cheat sheet.pdf

2021.4.3

最近一段时间遇到了很多问题，也学到了很多零碎的知识。

完成了两个新的个人项目vhxubo/websites和vhxubo/website-navigation。
很久之前就想完成整个项目，但是之前一直因为不懂怎么去做，现在做出来了。
做出来的确没有花很长时间，但是后面逐步的优化挺浪费时间和精力的。

个人项目遇到的问题

  • TypeScript运用不熟练，对interface和type的定义依旧不清晰
  • 对async函数的使用
  • Vue3中响应式数据的处理
  • 如何实现好看的黑暗模式，以及黑暗模式的优化
  • 很多以往遇到过的问题，在最近遇到很熟悉但是依旧不知道如何解决
  • Promise.all() Promise.any() Promise.allSettled() 等函数在项目中的使用方案
  • axios在访问接口时应该提前做好url编码
  • v-if和v-show在图片资源切换时的选择
  • 对scroll事件的监听
  • 对项目的优化

学习到的东西

  • npm scripts的使用与编写，总结下来还是配合着bash命令好用，powershell真的太难用的，虽说有一定的语义化。。
  • 最近又重新温习了bash、vim、C++等内容，好像每到这个时候又会重新去学习一下，总之在日常中还是用的太少了
  • 学习了docker的打包和部署，总体挺不错的，就是打包处理体积挺大的
  • 学习了GitHub Actions，在一定情况下，挺好用的，很方便
  • 学习了一点php知识，php入门也挺简单的，在小项目上有很大的优势，就是我不清楚php的环境配置到底怎么搞会比较简单

笔记

实现黑暗模式的方法

使用local Storage存储一个theme变量，同时监听系统对黑暗模式的运用，window.matchMedia('(prefers-color-scheme: dark)').matches

对Vue3响应式的探索

ref的异步操作还是需要使用watch，watchEffect进行监听数据的变化，不然在setup里面根本得不到数据，因为在获取数据的时候，它可能还没有得到结果。

总结

每次遇到问题就很难受，但是问题解决之后，好像它又没有那么难了。。。选择性遗忘？

想做一个类库，但是总是没有机会去学习，哎

jQuery

2021.04.17
今天心血来潮，想着用jQuery来做一个浏览器插件吧，结果差点掉坑里出不来了

jQuery在一定程度上原生舒服多了，很方便的，不懂得为什么很多人不喜欢他，可能做的都是大一点的项目吧

总结一下今天用到的几个API

加载

// Shorthand for $( document ).ready()
$(function() {
    console.log( "ready!" );
});

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

添加元素

$('#labels').append('<p>label</p>'); //可以是数组

Ajax

$.ajax() 记得后面的.

解决400错误

在处理提交data时，data:JSON.stringify({username:'xxx'})，再将dataType设置为json

设置Header

直接写入

header:{Accept:''}

manjaro 配置

双系统时间同步

键映射

也可以在系统设置里面直接设置，硬件 输入设备 键盘

“ Visual Studio Code无法监视此大工作空间中的文件更改”

在Linux上运行Visual Studio代码
[Arch Linux] [Manjaro] How to avoid "Visual Studio Code is unable to watch for file changes in this large workspace" (error ENOSPC)

To avoid this error, we need to increase the inotify watcher limit.

The way to do this is different on Arch based distributions than other Linux distributions.

Instructions for Arch Linux/Manjaro

Check for an already existing inotify config file
(recent versions of Manjaro include one)

ls /etc/sysctl.d/*-max_user_watches.conf

a) If no output

echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

b) If the command outputs a file

(in the rare case where it outputs multiple files, continue using the last one in the list)

# replace `/etc/sysctl.d/50-max-user-watches.conf` with the file returned from the previous `ls` command
echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/50-max_user_watches.conf && sudo sysctl --system

Check it's working

cat /proc/sys/fs/inotify/max_user_watches

Expected output: 524288

清理缓存

给你的Arch Linux 清理空间腾出地方 | guqing's blog

清理安装包缓存

$ sudo pacman -Scc

清理孤立的软件包

$ sudo pacman -Rns $(pacman -Qtdq)

清理日志

$ journalctl --vacuum-size=50M

安装 .deb

How To Convert DEB Packages Into Arch Linux Packages - OSTechNix

滚轮慢

Nodejs Modules 规范对比

这个问题困扰了我好长时间，在module.exports exports export中迷惑不已

只有在type="module"时才可以使用到export和import

Node Modules

分为 CommonJS 和 ESM

还有 UMD 和 AMD

默认导出不能和后面的 {} 类型导出在一起, 否则会被 {} 导出覆盖

配对使用

const xx = require() / const { xx } = require()

  • module.exports
  • exports
// 默认导出
module.exports = var/function
// 导出一个
module.exports.a = a
// 导出多个, 注意在 ES5 中没有结构
module.exports = {
  a: a,
  b: b
}

import xx from '' / import { xx } from ''

  • export
  • export default
// 默认导出
export default var/function
// 导出一个
export a
// 导出多个
export { a, b }

参考

Vue 3

Vue Devtools 不支持 Vue3 Vuex

通过使用 vuex 提供的 createLogger 插件，在 console 中查看

Vue Router 页面跳转数据不更新

我的解决方案:location.href='/room/xxxx'

官方解决方案

数据绑定v-model

v-model默认绑定的是value，针对表单数据的。如果是自定义组件，记得修改监听

在Vue3中提供了modelValue和update:modelValue，对应v-model的使用
自定义组件使用数据流双向绑定时，需要设置为其他的，否则还是单向的数据

在使用props作为响应式时一定是用toRefs()解耦操作

介绍|watch 响应式更改 | Vue.js

实现对任意父子组件数据的双向绑定

子组件

<template>
  {{ jsonRef }}
  <button @click="addJson">add</button>
</template>
<script>
import { ref, watch,toRefs } from 'vue'
export default {
  props: ['json'],
  emits: ['update:json'],
  setup(props, context) {
    // 这样是不行的，怎么说呢，就是这个数据太深入了监听不到
    // const jsonRef = ref(props.json)
    //应该是这样的***********
    const { json: jsonRef } = toRefs(props)
    const addJson = () => {
      jsonRef.value += 1
    }
//自定义事件中可以进行watch对数据进行更新
    watch(jsonRef, () => {
      context.emit('update:json', jsonRef.value)
    })
    return { jsonRef, addJson }
  },
}
</script>

父组件

<template>
  <div class="home">This is the home page</div>
  <Test v-model:json="json" />
</template>

<script>
import Test from '@/components/Test.vue'
import { ref, watch } from 'vue'
export default {
  name: 'Home',
  components: { Test },
  setup() {
    const json = ref('hello emit')
// 父组件监听数据
    watch(json, () => console.log(json.value))

    return { json }
  },
}
</script>

响应式遇到的问题

  • 在使用 ref 时记得 return
  • 使用 ref 时记得加.value
  • 使用 reactive 传输数据时可以使用toRaw还原数据
  • 数据响应式可能会延迟，使用watch对数据进行监听

生命周期

除了beforecate和created(它们被setup方法本身所取代)，我们可以在setup方法中访问的API生命周期钩子有9个选项:

  • onBeforeMount – 在挂载开始之前被调用：相关的 render 函数首次被调用。
  • onMounted – 组件挂载时调用
  • onBeforeUpdate – 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
  • onUpdated – 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  • onBeforeUnmount – 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
  • onUnmounted – 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
  • onActivated – 被 keep-alive 缓存的组件激活时调用。
  • onDeactivated – 被 keep-alive 缓存的组件停用时调用。
  • onErrorCaptured – 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

Vue 3 生命周期完整指南 - SegmentFault 思否

在 Vue 中如何在模板中使用其他库函数

在 setup 中写新的函数调用库函数

模板调用

{{ dateTimeFormat(datetime) }}

函数设定

    const dateTimeFormat = datetime =>
      dayjs(datetime).format("YYYY-MM-DD HH:mm:ss");

computed 也需要使用 .value

参考链接

mpv

mpv使用记录 - linkthis blog

配置

Argon-/mpv-config: Personal mpv configuration files and scripts (for syncing my computers). NOTE: my VO config is dynamic and relies on certain scripts (see corresponding comments in mpv.conf)

配置文件位置

Linux：~/.config/mpv/mpv.conf
Windows：``

no-border                     # no window title bar
save-position-on-quit         # 记忆上次播放的位置
keep-open                     # 播放结束后不退出
ontop                         # 在全屏的情况下，更容易进入全屏独占 "T"

插件

mpv/autoload.lua at master · mpv-player/mpv：自动加载当前播放文件目录里的视频文件到播放列表

监听滚动事件

监听滚动事件

实现针对 Issue 的进度提醒

有的文章下面有很多的评论，而浏览器的滚动条是全局的进度，对阅读很不友好。阮一峰的ES6教程中就实现了文章进度条的功能，很舒服。

思路

  • 获取到第一条 Issue 的高度，相当于它同一层级的下个元素距离顶端的距离a，到这个部分就是阅读结束的位置。
  • 获取到全局滚动条距离顶部的距离b
  • b/a就是阅读第一条的进度
  • 全局增加 scroll 监听事件
  • 在界面中加入进度数据元素

实现

使用油猴脚本实现：

// ==UserScript==
// @name         GitHub Issue Read Process
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  GitHub Issue 阅读进度
// @author       Vhxubo
// @match        https://github.com/*/*/issues/*
// @run-at document-end
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var element = document.querySelector('.js-issue-timeline-container');
    if (element){
        var processEle = document.createElement('div');
        var processStr = document.createTextNode('0%');
        processEle.style.cssText = 'position:fixed;bottom:0px;left:0px;z-index:9999;font-height:800;font-size:2rem;color:#d1d5da;user-select:none';
        processEle.appendChild(processStr);
        document.body.appendChild(processEle);

        window.addEventListener('scroll',function(){
            var process = Number.parseInt((document.documentElement.scrollTop/(element.offsetTop-window.innerHeight))*100);
            if (process >= 0 && process <= 100)
            {
                processEle.innerText = process+'%';
            }else{
                processEle.innerText = '100%';
            }
        })
    }
})();

bug

打开新页面无法完美处理，只能刷新解决

参考链接

VSCode + Neo Vim

最开始的时候接触到vim，学习了好长时间，改了键位等等，但是最后还是死在了对vim的配置上面。

后来在VSCode里面使用vim键位，用了一段时间之后，发现打开文件的速度也太慢了，就放弃了vim。

想着不如直接学好VSCode自带的快捷键好了，于是乎开始深入学习VSCode，参照极客学院的VSCode教程。

直到现在，换上了VSCode的Neo Vim插件Neo Vim - Visual Studio Marketplace，打开速度可以接受，操作方法在Insert模式下与VSCode相互兼容，是一个很不错的选择。

init.vim

updatetime: 2021年7月9日
path: C:\Users\vhxubo\AppData\Local\nvim\init.vim

" 配置插件
call plug#begin('~/AppData/Local/nvim/plugged')

Plug 'tpope/vim-surround'
Plug 'asvetliakov/vim-easymotion'
Plug 'vim-scripts/argtextobj.vim'

call plug#end()

" 配置输入法切换的能力
autocmd InsertLeave * :silent :!C:\\tools\\im-select.exe 1033 && C:\\tools\\im-select.exe 2052

" 公用剪贴板
set clipboard^=unnamed,unnamedplus

" 配置leader
let mapleader = "\<Space>"

" 取消双leader
" map <Leader> <Plug>(easymotion-prefix)

" 配置快速修复
nnoremap <Leader>. <Cmd>call VSCodeNotify('editor.action.quickFix')<CR>

" VSCode侧边栏
nnoremap <Leader>b <Cmd>call VSCodeNotify('workbench.action.toggleSidebarVisibility')<CR>

" 复制后高亮
augroup highlight_yank
    autocmd!
    au TextYankPost * silent! lua vim.highlight.on_yank()
augroup END

配置Ctrl+S保存文件并退出insert模式

  "macros": {
    "saveAndEscapeNeovim": [
      "workbench.action.files.save",
      "vscode-neovim.escape"
    ]
  }
  • 添加键映射
  {
    "key": "ctrl+s",
    "command": "macros.saveAndEscapeNeovim",
    "when": "editorTextFocus && neovim.mode == insert"
  }

列选择

CTRL + V 列选择

替换一个文本（从寄存器里面读）

Vim 寄存器完全手册 | Harttle Land

y yaw
daw
"0p

取消搜索之后的高亮

在vim中取消搜索的高亮_What the Fuck-CSDN博客_vim取消搜索

:nohlsearch
:noh

配置语言切换能力

  • 将win10输入法设置为旧版模式
  • 安装英文语言
  • 下载im-select，放在C:\tools目录下
  • C:\Users\vhxubo\AppData\Local\nvim\init.vim添加如下配置
autocmd InsertLeave * :silent :!C:\\tools\\im-select.exe 1033 && C:\\tools\\im-select.exe 2052

配置剪贴板

Copy paste not working in neovim : neovim

set clipboard^=unnamed,unnamedplus

代码折叠方案

使用VSCode的折叠快捷键，配合gj gk替代jk防止展开
Ctrl + Shift + [ 折叠代码
Ctrl + Shift + ] 展开代码

配置vim-easymotion

  • vim-easymotion默认为双leader，取消了比较方便
" 配置leader为空格
let mapleader = "\<Space>"

" 取消双leader
map <Leader> <Plug>(easymotion-prefix)

<leader>-fw 寻找w
<leader>-w 对文本增加字符跳转前缀

Default Mapping      | Details
---------------------|----------------------------------------------
<Leader>f{char}      | Find {char} to the right. See |f|.
<Leader>F{char}      | Find {char} to the left. See |F|.
<Leader>t{char}      | Till before the {char} to the right. See |t|.
<Leader>T{char}      | Till after the {char} to the left. See |T|.
<Leader>w            | Beginning of word forward. See |w|.
<Leader>W            | Beginning of WORD forward. See |W|.
<Leader>b            | Beginning of word backward. See |b|.
<Leader>B            | Beginning of WORD backward. See |B|.
<Leader>e            | End of word forward. See |e|.
<Leader>E            | End of WORD forward. See |E|.
<Leader>ge           | End of word backward. See |ge|.
<Leader>gE           | End of WORD backward. See |gE|.
<Leader>j            | Line downward. See |j|.
<Leader>k            | Line upward. See |k|.
<Leader>n            | Jump to latest "/" or "?" forward. See |n|.
<Leader>N            | Jump to latest "/" or "?" backward. See |N|.
<Leader>s            | Find(Search) {char} forward and backward.
                     | See |f| and |F|.

Neo Vim

  • 切换大小写: gu小写
  • gU 大写
The gu, gU, and ~ are case operators.

To lowercase, uppercase, or toggle-case:

- the whole line: guu, gUU, g~~
- a word: guw, gUw, g~w
- a word object: guiw, gUiw, g~iw
- the character under cursor: vu, vU, ~
  • 替换文本 :s/test/boo/g 替换此行中的test为boo
  • :%s/test/bool/g 替换所有行的
  • :5,12s/foo/bar/g 替换5到12行
  • Search and replace | Vim Tips Wiki | Fandom
  • <C-p> 在代码补全窗口下等同于 Up
  • <C-n> 在代码补全窗口下等同于 Down
  • 删除d dd dnw
  • 复制y yy ynw
  • 修改 s S修改整行
  • 撤回 u U
  • 重做上一个操作 ctrl + r
  • 重复 .
  • 切换tab：gt向后 gT向前
  • 查看定义：gh
  • 粘贴p P
  • 添加新行 o O
  • 全选gg -> v -> G
  • 格式化代码= ==
  • 多行操作V -> mi/ma 可以进行多行注释
  • 向上翻页 Ctrl+f Ctrl+e
  • 向下翻页 Ctrl+b Ctrl+y
  • 替换模式 r 替换一个词替换完之后立马恢复 R 替换多个词不自动返回
  • 删除并插入 s 修改几个 S 修改整行
  • 下一个单词 w W
  • 上一个单词 b B
  • 词尾 e E
  • 当前行居中 zz 置顶zt 置底zb
  • 缩进 < >
  • 屏幕内顶行 H 底行 L

image

插件

安装

在Windows下，nvim的配置文件在~/AppData/Local/nvim/init.vim下，默认不存在，需要自己创建

  • 安装junegunn/vim-plug
  • 将plug.vim放到~/AppData/Local/nvim/autoload/下
  • 修改init.vim
call plug#begin('~/AppData/Local/nvim/plugged')

Plug 'tpope/vim-surround'

call plug#end()
  • 在nvim窗口下，执行:PlugInstall

tpope/vim-surround

删除一个配对符号 (delete a surrounding) ds
更改一个配对符号 (change a surrounding) cs
增加一个配对符号 (yank a surrounding) ys
在新的行增加一个配对符号并进行缩进 yS
在整行增加一个配对符号 yss
在整行增加一个配对符号，配对符号单独成行并进行缩进 ySs Yss
在行选择中，S<div>

691e0c29gy1frp69jz0x6g20ic0ds779

参考

Tool

库

UI 库

命令行美化

网络库

文件处理

Git

创建新分支

Git创建新分支并提交到github_荒野雄兵的专栏-CSDN博客_git创建新分支

git checkout -b dev
//or git checkout dev
// 查看分支
git branch
// 上传分支
git push origin HEAD -u

tag 和 releases

标签是 Git 中的概念，而 releases 则是 Github、码云等源码托管商所提供的更高层的概念。Git 本身是没有 releases 这个概念，只有 tag。两者之间的关系则是，release 基于 tag，为 tag 添加更丰富的信息，一般是编译好的文件。Git tag 和 GitHub releases - 蓝桥云课
https://git-scm.com/book/en/v2/Git-Basics-Tagging

新建 tag

git tag -a v1.0 -m "comment"
git tag v1.0
git tag -a v1.0 9fceb02

删除 tag

git tag -d v1.0

上传 tags

git tag创建、远程推送、回退以及强推push -f_QH_JAVA的专栏-CSDN博客

git push --tags

洛阳理工健康上报系统问题剖析

可以看到 Vue 完整源码

项目在 build 时,webpack 中会有一个叫 productionSourceMap 的配置属性,设置成 fasle,项目在打包后就看不到源码目录结构

module.exports = {
  productionSourceMap: false
};

cookies

部分页面只针对 cookies 进行验证，用户可以通过篡改 cookies 访问管理员页面

现在的前端框架全是通过API获得数据，如何记录用户登录状态？ - 阿健大叔的回答 - 知乎
https://www.zhihu.com/question/301253397/answer/548334082

参考链接

curl

Tip

在Windows中需要对特殊符号进行转义，如"需要用\"替代，某些特殊符号需要使用^

-X

设置请求方式，默认为 GET

$ curl -X POST http://localhost:3000/login

-c

将cookies写入到文件

$ curl -c cookies.txt https://github.com
$ cat cookies.txt

-H

设置Header

$ curl -H "content-type:application/json" https://github.com

-d

如果传输的数据为json，记得设置header， "content-type:application/json"

设置POST数据请求体

$ curl -X POST http://localhost:3000/login -d '{"username":"vhxubo","password":"*****"}'

-b

设置cookies

$ curl -b 'foo1=bar' -b 'foo2=baz' https://taobao.com
# 上面命令发送两个 Cookie。

$ curl -b cookies.txt https://www.taobao.com
# 上面命令读取本地文件 cookies.txt，里面是服务器设置的 Cookie（参见-c参数），将其发送到服务器。

参考

Word

一劳永逸，打造自己的word常规模板 - 知乎

Word中的尾注横线怎么删除-百度经验

word中尾注后的内容怎样生成目录_百度知道

如何查看Word是否缺失字体

https://zhidao.baidu.com/question/923084312055940659.html

文件--选项--高级--显示文档内容--字体替换

image

将图片改为嵌入型

嵌入型的图片和字符类型相同，方便居中操作

  1. Word 选项
  2. 剪切、复制和粘贴
  3. 将图片插入、粘贴为：嵌入型

图片插入题注

Alt s p

可以对题注样式进行设置：

  • 设置字体与居中
  • 段后1行

设置自动题注，可以选择

设计自己的毕业设计模板

  • 直接修改内置的 标题 1、2、3，否则题注前无法自动引用章节号
  • 默认不/谨慎修改正文格式，另：应该可以取消其他的基准，但是无法确保原始内容不变
  • 定义新的多级列表

设置样式

建议将样式基准改为：无样式。在默认样式上直接修改，不建议新建，否则题注前将无法自动引用章节号

全局西文字符：Times New Roman
全局中文字符：宋体

论文正文：宋体小四，单倍行距（有时为固定磅22/23）

  • 标题 1：黑体三号，居中，单倍行距（如果需要空行的话，可以调整段后1行，省去回车行）
    • 设置段前分页：段落、换行与分页、段前分页
  • 标题 2：黑体四号，左对齐，单倍行距
  • 标题 3：黑体小四，左对齐，单倍行距
  • 题注：楷体GB2312，五号，居中，单倍行距
    • 新增需要的标签
    • 设置编号（包含章节号，标题 1，连字符）
    • 自动插入题注

实现标题 1为第1章而后为正常标号

使用定义新的多级列表功能增加自动编号

第 1 章 概述
1.1 项目介绍
1.1.1 应用场景

  • 级别1
    • 设置输入编号的格式为第 1 章
    • 链接到标题 1
    • 编号之后设置为制表符
    • 制表符添加2厘米
  • 级别2
    • 将正规形式编号勾上
    • 链接到标题 2
    • 编号之后设置为空格
  • 级别3与级别2相同

禁用Insert按键

image

尾注

尾注后面加空白页的方法 - 百度文库
word操作技巧：有关脚注和尾注的使用方法 - 知乎
本科毕业论文引用参考文献是直接打出来[1]然后点上标，在文末列出参考文献，还是点引用插入尾注。？ - 知乎
Zotero安装与使用简介 – 杰峰的博客

  1. 加入尾注数据
  2. 进入草稿模式（视图->草稿）
  3. 显示备注（引用->脚注）
  4. 删除尾注分隔符和尾注延续分隔符
  5. 修改尾注样式为1,2,3...，设置在节的结尾插入
  6. 最后替换^e为[^&]

防止加入尾注之后，后面标题格式丢失

屏幕截图(27)

屏幕截图(24)

屏幕截图(25)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.